### Clone Example with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-passkey/README.md

Use this command to clone the example project and customize it for your needs. Follow the on-screen instructions for further setup.

```bash
npx create-toolpad-app@latest --example auth-nextjs-passkey
# or
pnpm create toolpad-app --example auth-nextjs-passkey
```

--------------------------------

### Navigate to project and start development server

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/installation.md

After the automatic installation, change into the project directory and start the development server using your package manager.

```bash
cd <project-name>
npm run dev
```

```bash
cd <project-name>
pnpm run dev
```

```bash
cd <project-name>
yarn dev
```

--------------------------------

### Clone Example with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs/README.md

Use the create-toolpad-app CLI to quickly scaffold a new project based on this authentication example. Follow the on-screen prompts to customize your setup.

```bash
npx create-toolpad-app@latest --example auth-nextjs
```

--------------------------------

### Install Dependencies and Run Toolpad App

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/tutorial.md

After creating the project, navigate into the project directory, install dependencies, and start the development server. This command is shown for npm, pnpm, and yarn.

```bash
cd <project-name>
npm install && npm run dev
```

```bash
cd <project-name>
pnpm install && pnpm dev
```

```bash
cd <project-name>
yarn && yarn dev
```

--------------------------------

### Start Docs Site in Development

Source: https://github.com/mui/toolpad/blob/master/docs/README.md

Run this command from the project root to start the documentation site in development mode. Ensure you have yarn installed.

```bash
yarn && yarn docs:dev
```

--------------------------------

### Install and Run Example App with pnpm Filter

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Installs dependencies and runs a specific example app (core-nextjs) using pnpm filters.

```bash
pnpm --filter core-nextjs install
pnpm --filter core-nextjs dev
```

--------------------------------

### Clone Example with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/core/crud-vite/README.md

Use this command to clone the crud-vite example and customize it for your project. Follow the on-screen instructions to complete the setup.

```bash
npx create-toolpad-app@latest --example crud-vite
# or
pnpm create toolpad-app --example crud-vite
```

--------------------------------

### Clone Toolpad Example

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-vite/README.md

Use this command to copy the example and customize it for your project.

```bash
npx create-toolpad-app@latest --example auth-vite
# or
pnpm create toolpad-app --example auth-vite
```

--------------------------------

### Clone Example with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-pages/README.md

Clone this authentication example into your own project using the create-toolpad-app CLI.

```bash
npx create-toolpad-app@latest --example auth-nextjs-pages
# or
pnpm create toolpad-app --example auth-nextjs-pages
```

--------------------------------

### Bootstrap Example with npx

Source: https://github.com/mui/toolpad/blob/master/examples/studio/npm-stats/README.md

Use this command to bootstrap the npm-stats example using npx.

```bash
npx create-toolpad-app@latest --example npm-stats
```

--------------------------------

### Bootstrap Example with pnpm

Source: https://github.com/mui/toolpad/blob/master/examples/studio/npm-stats/README.md

Use this command to bootstrap the npm-stats example using pnpm.

```bash
pnpm create toolpad-app --example npm-stats
```

--------------------------------

### Clone Example with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-email/README.md

Use this command to clone the example project and customize it. Follow the on-screen prompts for further instructions.

```bash
npx create-toolpad-app@latest --example auth-nextjs-email
# or
pnpm create toolpad-app --example auth-nextjs-email
```

--------------------------------

### Start Toolpad Studio from Existing Project

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/getting-started/installation.md

Once Toolpad Studio is installed and scripts are added to package.json, you can start the development server using the 'toolpad-studio:dev' script. This command initializes a new application in the specified folder.

```bash
npm run toolpad-studio:dev
```

```bash
pnpm toolpad-studio:dev
```

```bash
yarn toolpad-studio:dev
```

--------------------------------

### Clone Example with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/core/crud-nextjs/README.md

Use create-toolpad-app to clone this example and customize it for your needs. Follow the on-screen instructions.

```bash
npx create-toolpad-app@latest --example crud-nextjs
# or
pnpm create toolpad-app --example crud-nextjs
```

--------------------------------

### Bootstrap Example with yarn

Source: https://github.com/mui/toolpad/blob/master/examples/studio/npm-stats/README.md

Use this command to bootstrap the npm-stats example using yarn.

```bash
yarn create toolpad-app --example npm-stats
```

--------------------------------

### Clone Example with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/core/crud-nextjs-pages/README.md

Use the create-toolpad-app CLI to quickly scaffold this example project for customization. Follow the on-screen prompts.

```bash
npx create-toolpad-app@latest --example crud-nextjs-pages
# or
pnpm create toolpad-app --example crud-nextjs-pages
```

--------------------------------

### Clone Toolpad Example

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-themed/README.md

Use this command to copy the auth-nextjs-themed example and customize it for your project. Follow the on-screen instructions.

```bash
npx create-toolpad-app@latest --example auth-nextjs-themed
```

```bash
pnpm create toolpad-app --example auth-nextjs-themed
```

--------------------------------

### Create a New Toolpad App with Example

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/tutorial.md

Use this command to create a new Toolpad application with the tutorial example pre-configured. Choose your preferred package manager.

```bash
npx create-toolpad-app@latest --example tutorial
```

```bash
pnpm create toolpad-app --example tutorial
```

```bash
yarn create toolpad-app --example tutorial
```

--------------------------------

### Create Toolpad App Interactively

Source: https://github.com/mui/toolpad/blob/master/packages/create-toolpad-app/README.md

Use this command to start an interactive project creation process. Follow the prompts to name your project and install dependencies.

```bash
npx create-toolpad-app@latest
```

```bash
yarn create toolpad-app
```

```bash
pnpm create toolpad-app
```

--------------------------------

### Start Documentation Development Server

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Builds and starts the documentation application in development mode. It will be accessible at http://localhost:3003/toolpad.

```bash
pnpm docs:dev
```

--------------------------------

### Clone Toolpad App Example

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-pages-nextauth-4/README.md

Clone this example to customize it for your needs using npx or pnpm.

```bash
npx create-toolpad-app@latest --example auth-nextjs-pages-nextauth-4
# or
pnpm create toolpad-app --example auth-nextjs-pages-nextauth-4
```

--------------------------------

### Clone Toolpad Example

Source: https://github.com/mui/toolpad/blob/master/examples/core/firebase-vite/README.md

Use this command to copy the firebase-vite example and customize it for your project.

```bash
npx create-toolpad-app@latest --example firebase-vite
# or
pnpm create toolpad-app --example firebase-vite
```

--------------------------------

### Clone Toolpad App Example

Source: https://github.com/mui/toolpad/blob/master/examples/core/tutorial/README.md

Use the create-toolpad-app command to clone this example and customize it for your needs. Follow the on-screen instructions.

```bash
npx create-toolpad-app@latest --example tutorial
# or
pnpm create toolpad-app --example tutorial
```

--------------------------------

### Run Next.js App in Playground

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Navigates to the Next.js example application directory within the playground and starts its development server.

```bash
cd playground/nextjs
pnpm dev
```

--------------------------------

### Bootstrap QR Generator App with create-toolpad-app

Source: https://github.com/mui/toolpad/blob/master/examples/studio/qr-generator/README.md

Use this command to bootstrap the QR generator example with npx.

```bash
npx create-toolpad-app@latest --example qr-generator
```

--------------------------------

### Start Development Server

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-vite/README.md

Run this command to start the Vite development server. Open the provided URL in your browser to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Render Build and Start Commands

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/how-to-guides/render-deploy.md

These are the default build and start commands for a Node.js application on Render. They can typically be left unchanged for Toolpad Studio deployments.

```bash
yarn; yarn build
yarn start
```

--------------------------------

### Start the Toolpad Studio development server

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/getting-started/first-app.md

Navigate into your application directory and run this command to start the development server and open the Toolpad Studio editor in your browser.

```bash
cd dog-app
npm run dev
```

--------------------------------

### Clone Toolpad Vite Example

Source: https://github.com/mui/toolpad/blob/master/examples/core/vite/README.md

Use this command to copy the Vite example for Toolpad Core to your local machine and customize it.

```bash
npx create-toolpad-app@latest --example vite
# or
pnpm create toolpad-app --example vite
```

--------------------------------

### Create Toolpad App with npm

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/examples.md

Use this command to create a new Toolpad project from an example using npm.

```bash
npx create-toolpad-app@latest --example "example-name"
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Installs project dependencies using pnpm. This is a common first step for local development.

```bash
pnpm install
```

--------------------------------

### Install Dependencies with npm, pnpm, or yarn

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/concepts/deployment.md

Install all necessary project dependencies before building or running your Toolpad Studio application.

```bash
npm install
```

```bash
pnpm install
```

```bash
yarn
```

--------------------------------

### Install NextAuth.js for Authentication

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/integrations/nextjs-approuter.md

If you plan to implement authentication, install the `next-auth` package. This is a prerequisite for integrating Auth.js with Toolpad Core.

```bash
npm install next-auth@beta
```

--------------------------------

### Start Postgres Database with Docker

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-email/README.md

Use this command to start a PostgreSQL database instance locally. Ensure the POSTGRES_PASSWORD matches your configuration.

```bash
docker run --name postgres -e POSTGRES_PASSWORD=postgres -p 5432:5432 -d postgres
```

--------------------------------

### Configure Custom Base Path for Build and Start

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/concepts/deployment.md

When building and starting your Toolpad Studio application, use the `--base` CLI parameter to specify the hosting path. This ensures the application is correctly served from the specified base URL.

```bash
toolpad-studio build --base /foo
toolpad-studio start --base /foo
```

--------------------------------

### Basic Sign-in Page Setup

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

Demonstrates the basic setup of the SignInPage component within an AppProvider. This is the foundational structure for integrating the sign-in functionality into your application.

```tsx
import { AppProvider } from '@toolpad/core/AppProvider';
import { SignInPage } from '@toolpad/core/SignInPage';

export default function App() {
  return (
    <AppProvider>
      <SignInPage
        providers={[...]} 
        signIn={async (provider) => {
          // Your sign in logic
        }}
      />
    </AppProvider>
  );
}
```

--------------------------------

### Install NotificationsProvider

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/use-notifications/use-notifications.md

To access notification APIs, install the `NotificationsProvider`. This is automatically included when using `AppProvider`.

```javascript
import { NotificationsProvider } from '@toolpad/core/useNotifications';

function App({ children }) {
  return <NotificationsProvider>{children}</NotificationsProvider>;
}
```

--------------------------------

### Configure pnpm Workspace for Examples

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Defines the packages to be included in the pnpm workspace, essential for testing example applications.

```yaml
packages:
  - 'packages/*'
  - 'docs'
  - 'test'
  - 'examples/nextjs'
```

--------------------------------

### Install Toolpad Core with npm, pnpm, or yarn

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/installation.md

Use your preferred package manager to install the `@toolpad/core` package into your project.

```bash
npm install @toolpad/core
```

```bash
pnpm add @toolpad/core
```

```bash
yarn add @toolpad/core
```

--------------------------------

### Install MUI Material and Icons as Peer Dependencies

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/installation.md

If your project does not already include `@mui/material` and `@mui/icons-material`, install them along with their necessary Emotion dependencies.

```bash
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
```

```bash
pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled
```

```bash
yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled
```

--------------------------------

### Bootstrap Basic CRUD App

Source: https://github.com/mui/toolpad/blob/master/examples/studio/basic-crud-app/README.md

Use one of these commands to bootstrap the basic CRUD application example using create-toolpad-app.

```bash
npx create-toolpad-app@latest --example basic-crud-app
```

```bash
yarn create toolpad-app --example basic-crud-app
```

```bash
pnpm create toolpad-app --example basic-crud-app
```

--------------------------------

### Create Toolpad App with yarn

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/examples.md

Use this command to create a new Toolpad project from an example using yarn.

```bash
yarn create toolpad-app --example "example-name"
```

--------------------------------

### Environment Variables Setup

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-pages/README.md

Required environment variables for authentication. Ensure these are set in your .env.local file.

```bash
AUTH_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
```

--------------------------------

### Create Toolpad App with pnpm

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/examples.md

Use this command to create a new Toolpad project from an example using pnpm.

```bash
pnpm create toolpad-app --example "example-name"
```

--------------------------------

### Bootstrap QR Generator App with yarn

Source: https://github.com/mui/toolpad/blob/master/examples/studio/qr-generator/README.md

Use this command to bootstrap the QR generator example with yarn.

```bash
yarn create toolpad-app --example qr-generator
```

--------------------------------

### Install Toolpad Studio in Existing Project

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/getting-started/installation.md

To integrate Toolpad Studio into an existing project, first install the @toolpad/studio package using your preferred package manager. Then, add the necessary Toolpad Studio scripts to your package.json file.

```bash
npm install @toolpad/studio
```

```bash
pnpm add @toolpad/studio
```

```bash
yarn add @toolpad/studio
```

--------------------------------

### Configure Custom Start Port

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/concepts/deployment.md

Modify the start script in package.json to specify a custom port for your Toolpad Studio application to listen on.

```json
  "start": "toolpad-studio start -p 1234"
```

--------------------------------

### Bootstrap QR Generator App with pnpm

Source: https://github.com/mui/toolpad/blob/master/examples/studio/qr-generator/README.md

Use this command to bootstrap the QR generator example with pnpm.

```bash
pnpm create toolpad-app --example qr-generator
```

--------------------------------

### Install Toolpad Core Dependencies

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/integrations/nextjs-approuter.md

Install the necessary packages for Toolpad Core integration with Next.js. Use the package manager command that suits your project.

```bash
npm install @mui/material-nextjs @emotion/cache
```

```bash
pnpm add @mui/material-nextjs @emotion/cache
```

```bash
yarn add install @mui/material-nextjs @emotion/cache
```

--------------------------------

### Setup Authentication Pages

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/features/authentication.md

Configure the main authentication route to handle signin, signout, and other auth-related pages.

```tsx
import { AuthPages } from '@mui/toolpad/auth';

export default function Auth() {
  return <AuthPages />;
}
```

```tsx
import { getAuthPages } from '@mui/toolpad/auth'

...
  pages: getAuthPages('/auth')
...
```

--------------------------------

### Default Build and Start Commands for Toolpad Studio on Railway

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/how-to-guides/railway-deploy.md

These are the default commands used by Railway to build and start your Toolpad Studio application. They can typically be left unchanged.

```bash
$ npm run build
$ npm run start
```

--------------------------------

### Stacked Dialogs Example

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/use-dialogs/use-dialogs.md

Demonstrates how dialogs can be opened on top of each other, creating a stack. Closing a dialog reveals the one beneath it.

```js
{{"demo": "StackedDialog.js"}}
```

--------------------------------

### Run Toolpad Studio Development Mode

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Starts Toolpad Studio in development mode for a specified fixture path within the monorepo.

```bash
pnpm toolpad-studio dev test/integration/backend-basic/fixture/toolpad --dev
```

--------------------------------

### Start with Mini-Drawer on Desktop

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md

Configure the layout sidebar to default to a collapsed mini-drawer on desktop viewports using the `defaultSidebarCollapsed` prop.

```javascript
import { DashboardLayout } from "@mui/toolpad-components";

function MyApp() {
  return (
    <DashboardLayout defaultSidebarCollapsed>
      {/* Your app content */}
    </DashboardLayout>
  );
}
```

--------------------------------

### Add @react-three/fiber to Toolpad Studio app

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/how-to-guides/cube-component.md

Install the necessary libraries for rendering 3D graphics in your Toolpad Studio application.

```bash
yarn add three @react-three/fiber
```

--------------------------------

### Run Toolpad Core with pnpm Filter

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Starts Toolpad Core locally using a specific filter for the pnpm workspace.

```bash
pnpm --filter @toolpad/core dev
```

--------------------------------

### Create a Sign-In Page with Toolpad Core

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md

Use the `SignInPage` component to create a sign-in page for your Next.js app. This example demonstrates how to handle sign-in logic and errors.

```tsx
import * as React from 'react';
import type { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
import Link from '@mui/material/Link';
import { SignInPage } from '@toolpad/core/SignInPage';
import { signIn } from 'next-auth/react';
import { useRouter } from 'next/router';
import { auth, providerMap } from '../../auth';

export default function SignIn({ 
  providers,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const router = useRouter();
  return (
    <SignInPage
      providers={providers}
      signIn={async (provider, formData, callbackUrl) => {
        try {
          const signInResponse = await signIn(provider.id, {
            callbackUrl: callbackUrl ?? '/',
          });
          if (signInResponse && signInResponse.error) {
            // Handle Auth.js errors
            return {
              error: signInResponse.error.message,
              type: signInResponse.error,
            };
          }
          return {};
        } catch (error) {
          // An error boundary must exist to handle unknown errors
          return {
            error: 'Something went wrong.',
            type: 'UnknownError',
          };
        }
      }}
    />
  );
}

SignIn.getLayout = (page: React.ReactNode) => page;

SignIn.requireAuth = false;

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const session = await auth(context);

  // If the user is already logged in, redirect.
  // Note: Make sure not to redirect to the same page
  // To avoid an infinite loop!
  if (session) {
    return { redirect: { destination: '/' } };
  }

  return {
    props: {
      providers: providerMap,
    },
  };
}

```

--------------------------------

### Install Dependencies with Yarn Berry

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Installs project dependencies after configuring Yarn Berry.

```bash
yarn install
```

--------------------------------

### Install DialogsProvider

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/use-dialogs/use-dialogs.md

Install the DialogsProvider at the root of your application to enable dialog functionality. This is automatically included in Toolpad applications.

```tsx
import { DialogsProvider } from '@toolpad/core/useDialogs';

function App({ children }) {
  return <DialogsProvider>{children}</DialogsProvider>;
}
```

--------------------------------

### Start Toolpad Studio App with npm, pnpm, or yarn

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/concepts/deployment.md

Serve the built Toolpad Studio application. This command is used after the build step to run the application in a production-ready environment.

```bash
npm run start
```

```bash
pnpm start
```

```bash
yarn start
```

--------------------------------

### Create a new Toolpad App with npx, pnpm, or yarn

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/introduction/installation.md

Run this command to automatically set up a new Toolpad Core project, choosing your preferred framework and authentication.

```bash
npx create-toolpad-app@latest
```

```bash
pnpm create toolpad-app
```

```bash
yarn create toolpad-app
```

--------------------------------

### Run Toolpad Studio Development Server

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/getting-started/installation.md

After creating your application, navigate into the application directory and start the development server using your package manager. This will launch the Toolpad Studio editor in your browser.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

--------------------------------

### Provide Project Name

Source: https://github.com/mui/toolpad/blob/master/packages/create-toolpad-app/README.md

After running the create command, you will be prompted to enter the name for your new Toolpad project.

```bash
✔ Enter the name of your project:
```

--------------------------------

### Initialize Git Repository

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/how-to-guides/render-deploy.md

Run this command in your Toolpad Studio app directory if it's not already a Git repository.

```bash
git init
```

--------------------------------

### Create a New Toolpad Studio App

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/getting-started/installation.md

Use the create-toolpad-app CLI to initialize a new Toolpad Studio application in a specified directory. Choose your preferred package manager (npm, pnpm, or yarn).

```bash
npx create-toolpad-app@latest --studio my-toolpad-app
```

```bash
pnpm create toolpad-app --studio my-toolpad-app
```

```bash
yarn create toolpad-app --studio my-toolpad-app
```

--------------------------------

### getContext

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/reference/api/index.md

API for getting the current context in Toolpad Studio.

```APIDOC
## getContext

### Description
API for getting the current context in Toolpad Studio.

### Method
Not applicable (JavaScript API)

### Endpoint
Not applicable (JavaScript API)

### Parameters
Not specified in source.

### Request Example
Not specified in source.

### Response
Not specified in source.
```

--------------------------------

### Build and Run Toolpad Studio Project

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Builds the project and then runs a Toolpad Studio project from a specified local path. Useful for testing PRs locally.

```bash
pnpm && pnpm release:build
pnpm toolpad-studio dev /path/to/my/toolpad/studio/project
```

--------------------------------

### Create Dashboard Page

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md

Example of creating a simple dashboard page (`pages/index.tsx`) for your Toolpad Core application.

```tsx
import * as React from 'react';
import Typography from '@mui/material/Typography';

export default function HomePage() {
  return <Typography>Welcome to Toolpad!</Typography>;
}
```

--------------------------------

### Generate Prisma Client

Source: https://github.com/mui/toolpad/blob/master/examples/core/auth-nextjs-email/README.md

Run this command to generate the Prisma Client after setting up your database and schema. This command also applies database migrations.

```bash
npx prisma migrate dev --schema=./src/prisma/schema.prisma
```

--------------------------------

### Add Second Page to Navigation

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md

Example of creating an additional page (`pages/orders/index.tsx`) and updating the navigation configuration in `pages/_app.tsx`.

```tsx
import * as React from 'react';
import Typography from '@mui/material/Typography';

export default function OrdersPage() {
  return <Typography>Welcome to the orders page!</Typography>;
}
```

```tsx
export const NAVIGATION = [
  // ...
  {
    segment: 'orders',
    title: 'Orders',
    icon: <ShoppingCartIcon />,
  },
  // ...
];
```

--------------------------------

### Create a new Toolpad Studio app

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/getting-started/first-app.md

Use this command to create a new Toolpad Studio application named 'dog-app'.

```bash
npx create-toolpad-app@latest --studio dog-app
```

--------------------------------

### Auth.js Server Configuration

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

Configure Auth.js with providers and a secret. This example shows how to set up the sign-in page route.

```typescript
// ...
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers,
  secret: process.env.AUTH_SECRET,
  pages: {
    signIn: '/auth/signin', // you can customize this based on your requirement
  },
// ...
```

--------------------------------

### Create a New Toolpad App

Source: https://github.com/mui/toolpad/blob/master/README.md

Use one of these commands to create a new Toolpad application locally. Choose the command that matches your preferred package manager.

```bash
npx create-toolpad-app@latest
```

```bash
pnpm create toolpad-app
```

```bash
yarn create toolpad-app
```

--------------------------------

### Create a Basic Custom Component

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/concepts/custom-components.md

Defines a simple 'HelloWorld' component with a 'msg' prop. Use this to introduce custom UI elements. The 'argTypes' configuration makes 'msg' editable in the Toolpad Studio inspector.

```jsx
import * as React from 'react';
import { createComponent } from '@toolpad/studio/browser';

export interface HelloWorldProps {
  msg: string;
}

function HelloWorld({ msg }: HelloWorldProps) {
  return <div>{msg}</div>;
}

export default createComponent(HelloWorld, {
  argTypes: {
    msg: {
      type: 'string',
      default: 'Hello world!',
    },
  },
});
```

--------------------------------

### Access useNotifications Hook

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/use-notifications/use-notifications.md

Get access to the notification APIs by calling the `useNotifications` hook within your application components.

```javascript
import { useNotifications } from '@toolpad/core/useNotifications';

function MyApp() {
  const notifications = useNotifications();
  // ...
}
```

--------------------------------

### Use useDialogs Hook

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/use-dialogs/use-dialogs.md

Call the useDialogs hook to get access to the dialogs API within your React components.

```js
import { useDialogs } from '@toolpad/core/useDialogs';

function MyApp() {
  const dialogs = useDialogs();
  // ...
}
```

--------------------------------

### Initialize useDialogs Hook

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/use-dialogs/use-dialogs-api.md

Get access to the dialogs API by invoking the useDialogs hook within your React component.

```javascript
const dialogs = useDialogs();
```

--------------------------------

### Import createFunction

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/reference/api/create-function.md

Import the `createFunction` utility from the Toolpad Studio server module.

```jsx
import { createFunction } from '@toolpad/studio/server';
```

--------------------------------

### Custom Breadcrumbs with useActivePage Hook

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/page-container/page-container.md

Provides an example of using the useActivePage hook to dynamically generate breadcrumbs for a specific path.

```typescript
import { useActivePage } from '@toolpad/core/useActivePage';
import { Breadcrumb } from '@toolpad/core/PageContainer';

// Pass the id from your router of choice
function useDynamicBreadcrumbs(id: string): Breadcrumb[] {
  const activePage = useActivePage();
  invariant(activePage, 'No navigation match');

  const title = `Item ${id}`;
  const path = `${activePage.path}/${id}`;

  return [...activePage.breadcrumbs, { title, path }];
}
```

--------------------------------

### Use Toolpad Studio Package from PR

Source: https://github.com/mui/toolpad/blob/master/CONTRIBUTING.md

Updates the `@toolpad/studio` dependency in `package.json` to point to a specific commit's build artifact from CodeSandbox CI. Requires `pnpm --force` to install.

```json
"dependencies": {
   "@toolpad/studio": "https://pkg.csb.dev/mui/toolpad/commit/<commit>/@toolpad/studio"
}
```

--------------------------------

### Initialize useNotifications Hook

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/use-notifications/use-notifications-api.md

Invoke the useNotifications hook to get access to the notifications API. This should be done within a React component.

```javascript
const notifications = useNotifications();
```

--------------------------------

### Template String Example

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/studio/concepts/data-binding.md

Utilize template strings (backticks) for embedded expressions and multiline text. This is useful for reading values from other components.

```javascript
`Hello, ${name}!`
```

--------------------------------

### Implement Custom Sign-In Page

Source: https://github.com/mui/toolpad/blob/master/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

Integrate the SignInPage component into your Next.js app. This example demonstrates how to handle authentication callbacks and errors.

```tsx
// ...
import * as React from 'react';
import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
import { AuthError } from 'next-auth';
import { providerMap, signIn } from '../../../auth';

export default function SignIn() {
  return (
    <SignInPage
      providers={providerMap}
      signIn={async (
        provider: AuthProvider,
        formData: FormData,
        callbackUrl?: string,
      ) => {
        'use server';
        try {
          return await signIn(provider.id, {
            ...(formData && {
              email: formData.get('email'),
              password: formData.get('password'),
            }),
            redirectTo: callbackUrl ?? '/',
          });
        } catch (error) {
          if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
            throw error;
          }
          if (error instanceof AuthError) {
            return {
              error:
                error.type === 'CredentialsSignin'
                  ? 'Invalid credentials.'
                  : 'An error with Auth.js occurred.',
              type: error.type,
            };
          }
          return {
            error: 'Something went wrong.',
            type: 'UnknownError',
          };
        }
      }}
    />
  );
}

```