> ## Documentation Index
> Fetch the complete documentation index at: https://docs.notte.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Mastra

> Give Mastra agents a browser with the Notte MCP server

<Tip>
  STOP. Do not read past this section until you have read and followed [/quickstart.md](/quickstart.md).

  Goal: produce a reliable SDK automation script. The intended authoring flow is generate then edit, not write browser automation from scratch.

  Do not hand-write SDK code with element IDs, selectors, or form fields from memory. Element IDs, selectors, and field mappings must come from a live `observe()` call, CLI `notte page observe` output, or generated workflow code. Guessed browser targets fail on real pages.

  Use the Notte skill and CLI to inspect the live site, validate actions/selectors, handle auth/session state, and export workflow code with `notte sessions workflow-code` before using SDK docs or SDK code.

  SDK reference pages are for understanding, running, or editing generated workflow code. They are not the starting point for manually authoring the initial browser automation. SDK-first code is guesswork on real-world pages with dynamic selectors, auth state, CAPTCHAs, and anti-bot behavior.
</Tip>

[Mastra](https://mastra.ai/) connects agents to MCP servers through `MCPClient`. Point it at the [Notte MCP server](/mcp-server) and every agent in your Mastra app can drive a browser.

## Prerequisites

* A Notte API key ([get one here](https://console.notte.cc))
* A provider key for the model you call

## 1. Install the SDKs

```bash theme={null}
npm install @mastra/core @mastra/mcp @ai-sdk/anthropic
```

## 2. Attach the Notte MCP server

<CodeGroup>
  ```typescript notte-mastra.ts theme={null}
  import { anthropic } from "@ai-sdk/anthropic";
  import { Agent } from "@mastra/core/agent";
  import { MCPClient } from "@mastra/mcp";

  const mcp = new MCPClient({
    servers: {
      notte: {
        url: new URL("https://api.notte.cc/mcp/"),
        requestInit: {
          headers: { Authorization: `Bearer ${process.env.NOTTE_API_KEY}` },
        },
      },
    },
  });

  const agent = new Agent({
    name: "notte-browser-agent",
    instructions: "You browse the web using the Notte tools.",
    model: anthropic("claude-sonnet-4-5-20250929"),
    tools: await mcp.listTools(),
  });

  const result = await agent.generate(
    "What is the main heading on https://example.com?",
    { maxSteps: 6 },
  );

  console.log(result.text);

  await mcp.disconnect();
  ```
</CodeGroup>

Set the following environment variables in your `.env` file:

```bash theme={null}
NOTTE_API_KEY=your-notte-api-key
ANTHROPIC_API_KEY=your-anthropic-api-key
```

<Note>
  `listTools()` returns every Notte tool namespaced as `notte_*`, ready to pass to an agent's `tools`. Use `listToolsets()` instead when you want to attach the server per request rather than at construction.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="MCP Server" icon="plug" href="/mcp-server">
    Every tool the Notte MCP server exposes
  </Card>

  <Card title="Vercel AI SDK" icon="triangle" href="/integrations/vercel-ai-sdk">
    The same MCP wiring without the Mastra runtime
  </Card>

  <Card title="Browser Agents" icon="robot" href="/concepts/agents">
    Hand a whole task to a Notte agent
  </Card>

  <Card title="Functions" icon="https://mintcdn.com/notte/laVxhSjtZz3-wqG3/logo/square-function.svg?fit=max&auto=format&n=laVxhSjtZz3-wqG3&q=85&s=d294a42f7a09939e5a532b4b524541f4" href="/concepts/functions" width="24" height="24" data-path="logo/square-function.svg">
    Turn a working run into a callable function
  </Card>
</CardGroup>