@mastra/mcp-docs-server 1.0.0-beta.13 → 1.0.0-beta.14

package/.docs/raw/guides/getting-started/astro.mdx

@@ -1,600 +1,441 @@
 ---
-title: "Integrate Mastra in your Astro project | Frameworks"
-description: A step-by-step guide to integrating Mastra with Astro.
+title: "Astro | Frameworks"
+description: "Get started with Mastra and Astro"
 ---
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import Steps from "@site/src/components/Steps";
-import StepItem from "@site/src/components/StepItem";
 
 # Integrate Mastra in your Astro project
 
-Mastra integrates with Astro, making it easy to:
+In this guide, you'll build a tool-calling AI agent using Mastra, then connect it to Astro by importing and calling the agent directly from your routes.
 
-- Build flexible APIs to serve AI-powered features
-- Simplify deployment with a unified codebase for frontend and backend
-- Take advantage of Astro's built-in [Actions](https://docs.astro.build/en/guides/actions/) or [Server Endpoints](https://docs.astro.build/en/guides/endpoints/#server-endpoints-api-routes) for efficient server-client workflows
+You'll use [AI SDK UI](https://ai-sdk.dev/docs/ai-sdk-ui/overview) and [AI Elements](https://ai-sdk.dev/elements) to create a beautiful, interactive chat experience.
 
-Use this guide to scaffold and integrate Mastra with your Astro project.
+:::note
 
-<Tabs>
-  <TabItem value="actions" label="Actions">
-
-:::warning
-
-This guide assumes you're using Astro's Actions with React and the Vercel adapter.
+While this guide shows you how to use Astro with React and full server-side rendering (SSR), there are many ways to use Astro with Mastra. You can [opt-in to SSR](https://docs.astro.build/en/guides/on-demand-rendering/#enabling-on-demand-rendering) on a per-file basis and use other frameworks like Svelte, Vue, Solid, or Preact. You can use Astro to build out a chat interface and call endpoints [natively in Astro](https://docs.astro.build/en/recipes/call-endpoints/).
 
 :::
 
-  <Steps>
+## Before you begin
 
-<StepItem>
+- You'll need an API key from a supported [model provider](/models/v1). If you don't have a preference, use [OpenAI](/models/v1/providers/openai).
+- Install Node.js `v22.13.0` or later
 
-Install the required packages:
+## Create a new Astro app (optional)
 
-<Tabs>
-<TabItem value="npm" label="npm">
+If you already have an Astro app, skip to the next step. Your Astro app should be setup like this:
 
-```bash copy
-npm install mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
-```
+- Use SSR (`output: "server"` in `astro.config.mjs`)
+- Use the [React integration](https://docs.astro.build/en/guides/integrations-guide/react/)
+- Tailwind installed
 
-</TabItem>
-<TabItem value="yarn" label="yarn">
+To support [on-demand rendering](https://docs.astro.build/en/guides/on-demand-rendering/) this guide will use the [Node.js adapter](https://docs.astro.build/en/guides/integrations-guide/node/) but any of the supported server adapters will work.
 
-```bash copy
-yarn add mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
+<Tabs groupId="pm">
+<TabItem value="npm" label="npm">
+```bash
+npm create astro@latest mastra-astro -- --add node --add react --add tailwind --install --skip-houston --template minimal --git
 ```
-
 </TabItem>
 <TabItem value="pnpm" label="pnpm">
-
-```bash copy
-pnpm add mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
+```bash
+pnpm create astro@latest mastra-astro --add node --add react --add tailwind --install --skip-houston --template minimal --git
+```
+</TabItem>
+<TabItem value="yarn" label="yarn">
+```bash
+yarn create astro@latest mastra-astro --add node --add react --add tailwind --install --skip-houston --template minimal --git
 ```
-
 </TabItem>
 <TabItem value="bun" label="bun">
-
-```bash copy
-bun add mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
+```bash
+bun create astro@latest mastra-astro --add node --add react --add tailwind --install --skip-houston --template minimal --git
 ```
-
 </TabItem>
 </Tabs>
 
-</StepItem>
-
-<StepItem>
-
-To integrate Mastra into your project, you have two options:
+This creates a project called `mastra-astro`, but you can replace it with any name you want.
 
-- Use the One-Liner
+`cd` into your project and edit the `astro.config.mjs` file to set the [`output` setting](https://docs.astro.build/en/reference/configuration-reference/#output) to `"server"`:
 
-  Run the following command to quickly scaffold the default Weather agent with sensible defaults:
+```js title="astro.config.mjs {10}
+// @ts-check
+import { defineConfig } from 'astro/config';
 
-  ```bash copy
-  npx mastra@beta init --default
-  ```
+import node from '@astrojs/node';
+import react from '@astrojs/react';
+import tailwindcss from '@tailwindcss/vite';
 
-  > See [mastra init](/reference/v1/cli/create-mastra) for more information.
-
-- Use the Interactive CLI
-
-  If you prefer to customize the setup, run the `init` command and choose from the options when prompted:
-
-  ```bash copy
-  npx mastra@beta init
-  ```
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+  adapter: node({
+    mode: 'standalone'
+  }),
 
-Add the `dev` and `build` scripts to `package.json`:
+  integrations: [react()],
 
-```json title="package.json"
-{
-  "scripts": {
-    ...
-    "dev:mastra": "mastra dev",
-    "build:mastra": "mastra build"
+  vite: {
+    plugins: [tailwindcss()]
   }
-}
+});
 ```
 
-</StepItem>
-
-<StepItem>
-
-Modify the `tsconfig.json` file in your project root:
+Lastly, edit the `tsconfig.json` to resolve paths:
 
-```json title="tsconfig.json"
+```ts title="tsconfig.json"
 {
-  ...
-  "exclude": ["dist", ".mastra"]
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+    // ...
+  }
 }
 ```
 
-</StepItem>
-
-<StepItem>
-
-Setup your API key in a `.env` file:
-
-```bash title=".env" copy
-OPENAI_API_KEY=<your-api-key>
-```
-
-</StepItem>
-
-<StepItem>
-
-Add `.mastra` and `.vercel` to your `.gitignore` file:
-
-```bash title=".gitignore" copy
-.mastra
-.vercel
-```
-
-</StepItem>
-
-<StepItem>
-
-Astro uses Vite, which accesses environment variables via `import.meta.env` rather than `process.env`. As a result, the model constructor must explicitly receive the `apiKey` from the Vite environment like this:
-
-```typescript title="src/mastra/agents/weather-agent.ts"
- import { createOpenAI } from "@ai-sdk/openai";
-
- const openai = createOpenAI({
-   apiKey: import.meta.env?.OPENAI_API_KEY,
-   compatibility: "strict"
- });
-```
-
-> More configuration details are available in the AI SDK docs. See [Provider Instance](https://ai-sdk.dev/providers/ai-sdk-providers/openai#provider-instance) for more information.
-
-</StepItem>
-
-<StepItem>
+## Initialize Mastra
 
-Start the Mastra Dev Server to expose your agents as REST endpoints:
+Run [`mastra init`](/reference/v1/cli/mastra#mastra-init). When prompted, choose a provider (e.g. OpenAI) and enter your key:
 
-<Tabs>
+<Tabs groupId="pm">
 <TabItem value="npm" label="npm">
 
-```bash copy
-npm run dev:mastra
+```bash
+npx mastra@beta init
 ```
 
 </TabItem>
-<TabItem value="cli" label="CLI">
+<TabItem value="pnpm" label="pnpm">
 
-```bash copy
-mastra dev:mastra
+```bash
+pnpm dlx mastra@beta init
 ```
 
 </TabItem>
-</Tabs>
-
-> Once running, your agents are available locally. See [Local Development Environment](/docs/v1/getting-started/studio) for more information.
-
-</StepItem>
-
-<StepItem>
-
-With the Mastra Dev Server running, you can start your Astro site in the usual way.
-
-</StepItem>
-
-<StepItem>
-
-Create an `actions` directory:
-
-```bash copy
-mkdir src/actions
-```
-
-</StepItem>
-
-<StepItem>
-
-Create a new Action, and add the example code:
-
-```bash copy
-touch src/actions/index.ts
-```
-
-```typescript title="src/actions/index.ts" showLineNumbers copy
-import { defineAction } from "astro:actions";
-import { z } from "astro:schema";
-
-import { mastra } from "../mastra";
-
-export const server = {
-  getWeatherInfo: defineAction({
-    input: z.object({
-      city: z.string(),
-    }),
-    handler: async (input) => {
-      const city = inputData.city;
-      const agent = mastra.getAgent("weatherAgent");
-
-      const result = await agent.generate(
-        `What's the weather like in ${city}?`,
-      );
-
-      return result.text;
-    },
-  }),
-};
-```
-
-</StepItem>
-
-<StepItem>
-
-Create a new Form component, and add the example code:
-
-```bash copy
-touch src/components/form.tsx
-```
-
-```typescript title="src/components/form.tsx" showLineNumbers copy
-import { actions } from "astro:actions";
-import { useState } from "react";
-
-export const Form = () => {
-  const [result, setResult] = useState<string | null>(null);
-
-  async function handleSubmit(formData: FormData) {
-    const city = formData.get("city")!.toString();
-    const { data } = await actions.getWeatherInfo({ city });
-
-    setResult(data || null);
-  }
-
-  return (
-    <>
-      <form action={handleSubmit}>
-        <input name="city" placeholder="Enter city" required />
-        <button type="submit">Get Weather</button>
-      </form>
-      {result && <pre>{result}</pre>}
-    </>
-  );
-};
-```
-
-</StepItem>
-
-<StepItem>
-
-Create a new Page, and add the example code:
-
-```bash copy
-touch src/pages/test.astro
-```
-
-```astro title="src/pages/test.astro" showLineNumbers copy
----
-import { Form } from '../components/form'
----
+<TabItem value="yarn" label="yarn">
 
-<h1>Test</h1>
-<Form client:load />
+```bash
+yarn dlx mastra@beta init
 ```
 
-> You can now navigate to `/test` in your browser to try it out.
-
-Submitting **London** as the city would return a result similar to:
-
-```plaintext
-Agent response: The current weather in London is as follows:
-
-- **Temperature:** 12.9°C (Feels like 9.7°C)
-- **Humidity:** 63%
-- **Wind Speed:** 14.7 km/h
-- **Wind Gusts:** 32.4 km/h
-- **Conditions:** Overcast
+</TabItem>
+<TabItem value="bun" label="bun">
 
-Let me know if you need more information!
+```bash
+bunx mastra@beta init
 ```
 
-</StepItem>
-
-  </Steps>
-  </TabItem>
-
-  <TabItem value="server-endpoints" label="Server Endpoints">
-
-:::warning
-
-This guide assumes you're using Astro's Endpoints with React and the Vercel adapter, and your output is set to server.
-
-:::
-
-## Prerequisites
+</TabItem>
+</Tabs>
 
-Before proceeding, ensure your Astro project is configured as follows:
+This creates a `src/mastra` folder with an example weather agent and the following files:
 
-- Astro React integration: [@astrojs/react](https://docs.astro.build/en/guides/integrations-guide/react/)
-- Vercel adapter: [@astrojs/vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/)
-- `astro.config.mjs` is set to `output: "server"`
+-	`index.ts` - Mastra config, including memory
+- `tools/weather-tool.ts` - a tool to fetch weather for a given location
+-	`agents/weather-agent.ts`- a weather agent with a prompt that uses the tool
 
-<Steps>
+You'll call `weather-agent.ts` from your Astro routes in the next steps.
 
-<StepItem>
+## Install AI SDK UI & AI Elements
 
-Install the required packages:
+Install AI SDK UI along with the Mastra adapter:
 
-<Tabs>
+<Tabs groupId="pm">
 <TabItem value="npm" label="npm">
 
-```bash copy
-npm install mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
+```bash
+npm install @mastra/ai-sdk@beta @ai-sdk/react ai
 ```
 
 </TabItem>
-<TabItem value="yarn" label="yarn">
+<TabItem value="pnpm" label="pnpm">
 
-```bash copy
-yarn add mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
+```bash
+pnpm add @mastra/ai-sdk@beta @ai-sdk/react ai
 ```
 
 </TabItem>
-<TabItem value="pnpm" label="pnpm">
+<TabItem value="yarn" label="yarn">
 
-```bash copy
-pnpm add mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
+```bash
+yarn add @mastra/ai-sdk@beta @ai-sdk/react ai
 ```
 
 </TabItem>
 <TabItem value="bun" label="bun">
 
-```bash copy
-bun add mastra@beta @mastra/core@beta @mastra/libsql@beta @ai-sdk/openai
+```bash
+bun add @mastra/ai-sdk@beta @ai-sdk/react ai
 ```
 
 </TabItem>
 </Tabs>
 
-</StepItem>
-
-<StepItem>
-
-To integrate Mastra into your project, you have two options:
-
-- Use the One-Liner
-
-  Run the following command to quickly scaffold the default Weather agent with sensible defaults:
-
-  ```bash copy
-  npx mastra@beta init --default
-  ```
-
-  > See [mastra init](/reference/v1/cli/create-mastra) for more information.
-
-- Use the Interactive CLI
-
-  If you prefer to customize the setup, run the `init` command and choose from the options when prompted:
-
-  ```bash copy
-  npx mastra@beta init
-  ```
-
-Add the `dev` and `build` scripts to `package.json`:
-
-```json title="package.json"
-{
-  "scripts": {
-    ...
-    "dev:mastra": "mastra dev",
-    "build:mastra": "mastra build"
-  }
-}
-```
-
-</StepItem>
-
-<StepItem>
-
-Modify the `tsconfig.json` file in your project root:
-
-```json title="tsconfig.json"
-{
-  ...
-  "exclude": ["dist", ".mastra"]
-}
-```
-
-</StepItem>
-
-<StepItem>
-
-Setup your API key in a `.env` file:
-
-```bash title=".env" copy
-OPENAI_API_KEY=<your-api-key>
-```
+Next, initialize AI Elements. When prompted, choose the default options:
 
-</StepItem>
-
-<StepItem>
-
-Add `.mastra` to your `.gitignore` file:
+<Tabs groupId="pm">
+<TabItem value="npm" label="npm">
 
-```bash title=".gitignore" copy
-.mastra
-.vercel
+```bash
+npx ai-elements@latest
 ```
 
-</StepItem>
-
-<StepItem>
-
-Astro uses Vite, which accesses environment variables via `import.meta.env` rather than `process.env`. As a result, the model constructor must explicitly receive the `apiKey` from the Vite environment like this:
-
-```typescript title="src/mastra/agents/weather-agent.ts"
- import { createOpenAI } from "@ai-sdk/openai";
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
 
- const openai = createOpenAI({
-   apiKey: import.meta.env?.OPENAI_API_KEY,
-   compatibility: "strict"
- });
+```bash
+pnpm dlx ai-elements@latest
 ```
 
-> More configuration details are available in the AI SDK docs. See [Provider Instance](https://ai-sdk.dev/providers/ai-sdk-providers/openai#provider-instance) for more information.
-
-</StepItem>
-
-<StepItem>
-
-Start the Mastra Dev Server to expose your agents as REST endpoints:
-
-<Tabs>
-<TabItem value="npm" label="npm">
+</TabItem>
+<TabItem value="yarn" label="yarn">
 
-```bash copy
-npm run dev:mastra
+```bash
+yarn dlx ai-elements@latest
 ```
 
 </TabItem>
-<TabItem value="cli" label="CLI">
+<TabItem value="bun" label="bun">
 
-```bash copy
-mastra dev:mastra
+```bash
+bunx ai-elements@latest
 ```
 
 </TabItem>
 </Tabs>
 
-> Once running, your agents are available locally. See [Local Development Environment](/docs/v1/getting-started/studio) for more information.
+This downloads the entire AI Elements UI component library into a `@/components/ai-elements` folder.
 
-</StepItem>
+## Create a chat route
 
-<StepItem>
+Create `src/pages/api/chat.ts`:
 
-With the Mastra Dev Server running, you can start your Astro site in the usual way.
-
-</StepItem>
-
-<StepItem>
-
-Create an `api` directory:
+```ts title="src/pages/api/chat.ts"
+import type { APIRoute } from "astro";
+import { handleChatStream } from '@mastra/ai-sdk';
+import { toAISdkV5Messages } from '@mastra/ai-sdk/ui'
+import { createUIMessageStreamResponse } from 'ai';
+import { mastra } from '@/mastra';
 
-```bash copy
-mkdir src/pages/api
-```
+const THREAD_ID = 'example-user-id';
+const RESOURCE_ID = 'weather-chat';
 
-</StepItem>
+export const POST: APIRoute = async ({ request }) => {
+  const params = await request.json();
+  const stream = await handleChatStream({
+    mastra,
+    agentId: 'weather-agent',
+    params: {
+      ...params,
+      memory: {
+        ...params.memory,
+        thread: THREAD_ID,
+        resource: RESOURCE_ID,
+      }
+    }
+  })
+
+  return createUIMessageStreamResponse({ stream })
+}
 
-<StepItem>
+export const GET: APIRoute = async () => {
+  const memory = await mastra.getAgentById('weather-agent').getMemory()
+  let response = null
+
+  try {
+    response = await memory?.recall({
+      threadId: THREAD_ID,
+      resourceId: RESOURCE_ID,
+    })
+  } catch {
+    console.log('No previous messages found.')
+  }
 
-Create a new Endpoint, and add the example code:
+  const uiMessages = toAISdkV5Messages(response?.messages || []);
 
-```bash copy
-touch src/pages/api/test.ts
+  return Response.json(uiMessages)
+}
 ```
 
-```typescript title="src/pages/api/test.ts" showLineNumbers copy
-import type { APIRoute } from "astro";
+The `POST` route accepts a prompt and streams the agent's response back in AI SDK format, while the `GET` route fetches message history from memory so the UI can be hydrated when the client reloads.
 
-import { mastra } from "../../mastra";
+## Create a chat component
 
-export const POST: APIRoute = async ({ request }) => {
-  const { city } = await new Response(request.body).json();
-  const agent = mastra.getAgent("weatherAgent");
+Create `src/components/chat.tsx`:
 
-  const result = await agent.generate(`What's the weather like in ${city}?`);
+```tsx title="src/components/chat.tsx"
+import '@/styles/global.css';
+import { useEffect, useState } from 'react';
+import { DefaultChatTransport, type ToolUIPart } from 'ai';
+import { useChat } from '@ai-sdk/react';
 
-  return new Response(JSON.stringify(result.text));
-};
-```
-
-</StepItem>
+import {
+  PromptInput,
+  PromptInputBody,
+  PromptInputTextarea,
+} from '@/components/ai-elements/prompt-input';
 
-<StepItem>
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '@/components/ai-elements/conversation';
 
-Create a new Form component, and add the example code:
+import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message';
 
-```bash copy
-touch src/components/form.tsx
-```
+import {
+  Tool,
+  ToolHeader,
+  ToolContent,
+  ToolInput,
+  ToolOutput,
+} from '@/components/ai-elements/tool';
 
-```typescript title="src/components/form.tsx" showLineNumbers copy
-import { useState } from "react";
 
-export const Form = () => {
-  const [result, setResult] = useState<string | null>(null);
+function Chat() {
+  const [input, setInput] = useState<string>('');
 
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
+  const { messages, setMessages, sendMessage, status } = useChat({
+    transport: new DefaultChatTransport({
+      api: '/api/chat',
+    }),
+  });
 
-    const formData = new FormData(event.currentTarget);
-    const city = formData.get("city")?.toString();
+  useEffect(() => {
+    const fetchMessages = async () => {
+      const res = await fetch('/api/chat');
+      const data = await res.json();
+      setMessages([...data]);
+    };
+    fetchMessages();
+  }, [setMessages]);
 
-    const response = await fetch("/api/test", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ city })
-    });
+  const handleSubmit = async () => {
+    if (!input.trim()) return;
 
-    const text = await response.json();
-    setResult(text);
-  }
+    sendMessage({ text: input });
+    setInput('');
+  };
 
   return (
-    <>
-      <form onSubmit={handleSubmit}>
-        <input name="city" placeholder="Enter city" required />
-        <button type="submit">Get Weather</button>
-      </form>
-      {result && <pre>{result}</pre>}
-    </>
+    <div className="w-full p-6 relative size-full h-screen">
+      <div className="flex flex-col h-full">
+        <Conversation className="h-full">
+          <ConversationContent>
+            {messages.map((message) => (
+              <div key={message.id}>
+                {message.parts?.map((part, i) => {
+                  if (part.type === 'text') {
+                    return (
+                      <Message
+                        key={`${message.id}-${i}`}
+                        from={message.role}>
+                          <MessageContent>
+                            <MessageResponse>{part.text}</MessageResponse>
+                          </MessageContent>
+                      </Message>
+                    );
+                  }
+
+                  if (part.type?.startsWith('tool-')) {
+                    return (
+                      <Tool key={`${message.id}-${i}`}>
+                        <ToolHeader
+                          type={(part as ToolUIPart).type}
+                          state={(part as ToolUIPart).state || 'output-available'}
+                          className="cursor-pointer"
+                        />
+                        <ToolContent>
+                          <ToolInput input={(part as ToolUIPart).input || {}} />
+                          <ToolOutput
+                            output={(part as ToolUIPart).output}
+                            errorText={(part as ToolUIPart).errorText}
+                          />
+                        </ToolContent>
+                      </Tool>
+                    );
+                  }
+
+                  return null;
+                })}
+              </div>
+            ))}
+            <ConversationScrollButton />
+          </ConversationContent>
+        </Conversation>
+
+        <PromptInput onSubmit={handleSubmit} className="mt-20">
+          <PromptInputBody>
+            <PromptInputTextarea
+              onChange={(e) => setInput(e.target.value)}
+              className="md:leading-10"
+              value={input}
+              placeholder="Type your message..."
+              disabled={status !== 'ready'}
+            />
+          </PromptInputBody>
+        </PromptInput>
+      </div>
+    </div>
   );
-};
+}
+
+export default Chat;
 ```
 
-</StepItem>
+This component connects [`useChat()`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) to the `api/chat` endpoint, sending prompts there and streaming the response back in chunks.
 
-<StepItem>
+It renders the response text using the [`<MessageResponse>`](https://ai-sdk.dev/elements/components/message#messageresponse-) component, and shows any tool invocations with the [`<Tool>`](https://ai-sdk.dev/elements/components/tool) component.
 
-Create a new Page, and add the example code:
+## Render the chat component
 
-```bash copy
-touch src/pages/test.astro
-```
+The last step is to render the chat component on your index page. Edit `src/pages/index.astro`:
 
-```astro title="src/pages/test.astro" showLineNumbers copy
+```html title="src/pages/index.astro" {2,14}
 ---
-import { Form } from '../components/form'
+import Chat from '@/components/chat';
 ---
 
-<h1>Test</h1>
-<Form client:load />
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<Chat client:load />
+	</body>
+</html>
 ```
 
-> You can now navigate to `/test` in your browser to try it out.
+Import the `Chat` component and add it to the body with the `client:load` [directive](https://docs.astro.build/en/reference/directives-reference/#client-directives) so it runs on the client side.
 
-Submitting **London** as the city would return a result similar to:
+## Test your agent
 
-```plaintext
-Agent response: The current weather in London is as follows:
+1. Run your Astro app with `npm run dev`
+2. Open the chat at http://localhost:4321
+3. Try asking about the weather. If your API key is set up correctly, you'll get a response
 
-- **Temperature:** 12.9°C (Feels like 9.7°C)
-- **Humidity:** 63%
-- **Wind Speed:** 14.7 km/h
-- **Wind Gusts:** 32.4 km/h
-- **Conditions:** Overcast
+## Next steps
 
-Let me know if you need more information!
-```
+Congratulations on building your Mastra agent with Astro! 🎉
 
-</StepItem>
+From here, you can extend the project with your own tools and logic:
 
-  </Steps>
-  </TabItem>
-</Tabs>
+- Learn more about [agents](/docs/v1/agents/overview)
+- Give your agent its own [tools](/docs/v1/agents/using-tools)
+- Add human-like [memory](/docs/v1/agents/agent-memory) to your agent
 
-## Next Steps
+When you're ready, read more about how Mastra integrates with AI SDK UI and how to deploy your agent anywhere:
 
-- [Deployment | With Astro on Vercel](/docs/v1/deployment/web-framework#with-astro-on-vercel)
-- [Monorepo Deployment](/docs/v1/deployment/monorepo)
+- Integrate Mastra with [AI SDK UI](/guides/v1/build-your-ui/ai-sdk-ui)
+- Deploy your agent [anywhere](/docs/v1/deployment/overview)