```bash
project-root
├── mastra-server
│   ├── src
│   │   └── mastra
│   └── package.json
└── my-copilot-app
    └── package.json
```

Bootstrap your Mastra server:

```bash npm2yarn
npx create-mastra@latest
```

This command will launch an interactive wizard to help you scaffold a new Mastra project, including prompting you for a project name and setting up basic configurations. Follow the prompts to create your server project.

Navigate to your newly created Mastra server directory:

```bash
cd mastra-server # Replace with the actual directory name you provided
```

You now have a basic Mastra server project ready. You should have the following files and folders:

```bash
src
└── mastra
    ├── agents
    │   └── weather-agent.ts
    ├── scorers
    │   └── weather-scorer.ts
    ├── tools
    │   └── weather-tool.ts
    ├── workflows
    │   └── weather-workflow.ts
    └── index.ts
```

:::note

Ensure that you have set the appropriate environment variables for your LLM provider in the `.env` file.

:::

```bash npm2yarn
npm install @ag-ui/mastra @mastra/client-js @mastra/core @ag-ui/core @ag-ui/client @copilotkit/runtime
```

In your `src/mastra/index.ts` file, register the chat route:

```typescript title="src/mastra/index.ts" {2,7-19}
import { Mastra } from '@mastra/core/mastra'
import { registerCopilotKit } from '@ag-ui/mastra/copilotkit'
// Rest of the imports...

export const mastra = new Mastra({
  // Rest of the configuration...
  server: {
    cors: {
      origin: '*',
      allowMethods: ['*'],
      allowHeaders: ['*'],
    },
    apiRoutes: [
      registerCopilotKit({
        path: '/chat',
        resourceId: 'weatherAgent',
      }),
    ],
  },
})
```

This will make the `weatherAgent` available at `/chat` in a CopilotKit-compatible format. You have to add the CORS configuration to allow the CopilotKit frontend to access the Mastra server. For production deployments, make sure to restrict the CORS origins to only your frontend domain.

```bash npm2yarn
npm run dev
```

By default, the Mastra server will run on `http://localhost:4111`. Keep this server running for the next steps where we'll set up the CopilotKit frontend to connect to it.

```bash
cd ..
```

Create a new Next.js project with the name `my-copilot-app`:

```bash npm2yarn
npx create-next-app@latest my-copilot-app
```

Navigate to your newly created Next.js project directory:

```bash
cd my-copilot-app
```

```bash npm2yarn
npm install @copilotkit/react-ui @copilotkit/react-core
```

Open the home route of the Next.js app (usually `app/page.tsx` or `src/app/page.tsx`) and replace the existing contents with the following code to set up a basic CopilotKit chat interface:

```typescript title="app/page.tsx"
import { CopilotChat } from '@copilotkit/react-ui'
import { CopilotKit } from '@copilotkit/react-core'
import '@copilotkit/react-ui/styles.css'

export default function Home() {
  return (
    <CopilotKit runtimeUrl="http://localhost:4111/chat" agent="weatherAgent">
      <CopilotChat
        labels={{
          title: 'Weather Agent',
          initial: 'Hi! 👋 Ask me about the weather, forecasts, and climate.',
        }}
      />
    </CopilotKit>
  )
}
```

```bash npm2yarn
npm run dev
```

You should now be able to chat with your agent in the browser.

export const mastra = new Mastra({
  bundler: {
    externals: ['@copilotkit/runtime'],
  },
})