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

Bootstrap your Mastra server:

```bash
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 @mastra/ai-sdk@latest
```

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

```typescript title="src/mastra/index.ts" {2,7-13}
import { Mastra } from '@mastra/core/mastra'
import { chatRoute } from '@mastra/ai-sdk'
// Rest of the imports...

export const mastra = new Mastra({
  // Rest of the configuration...
  server: {
    apiRoutes: [
      chatRoute({
        path: '/chat/:agentId',
      }),
    ],
  },
})
```

This will make all agents available in AI SDK-compatible formats, including the `weatherAgent` at the endpoint `/chat/weatherAgent`.

```bash
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 Assistant UI frontend to connect to it.

```bash
cd ..
```

Create a new `assistant-ui` project with the following command.

```bash
npx assistant-ui@latest create
```

:::note

For detailed setup instructions, including adding API keys, basic configuration, and manual setup steps, please refer to [assistant-ui's official documentation](https://assistant-ui.com/docs).

:::

Open the file in your assistant-ui frontend project that contains the `useChatRuntime` hook (usually `app/assistant.tsx` or `src/app/assistant.tsx`). Find the `useChatRuntime` hook and change the `api` property to the full URL of your Mastra agent's stream endpoint:

```tsx {8} title="app/assistant.tsx"
'use client'

// Rest of the imports...

export const Assistant = () => {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({
      api: 'http://localhost:4111/chat/weatherAgent',
    }),
  })

  // Rest of the component...
}
```

Now, the Assistant UI frontend will send chat requests directly to your running Mastra server.

```bash
npm run dev
```

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