> ## 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.

# Vibe Coding

> Connect documentation to your AI coding assistant with MCP

<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>

Connect documentation MCP servers to your IDE so AI assistants can search docs while helping you code.

<CodeGroup>
  ```bash Notte Docs MCP Server theme={null}
  https://docs.notte.cc/mcp
  ```
</CodeGroup>

## Vibe Setup

<Tabs>
  <Tab title="Cursor">
    Open command palette → **"Open MCP settings"** → add to `mcp.json`:

    ```json theme={null}
    {
      "mcpServers": {
        "notte-docs": {
          "url": "https://docs.notte.cc/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Claude Code">
    ```bash theme={null}
    claude mcp add --transport http notte-docs https://docs.notte.cc/mcp
    ```

    Verify with `claude mcp list`.
  </Tab>

  <Tab title="VS Code">
    Create `.vscode/mcp.json`:

    ```json theme={null}
    {
      "servers": {
        "notte-docs": {
          "type": "http",
          "url": "https://docs.notte.cc/mcp"
        }
      }
    }
    ```
  </Tab>
</Tabs>

## Project Configuration

Commit a `.mcp.json` file to share with your team:

```json theme={null}
{
  "mcpServers": {
    "notte-docs": {
      "url": "https://docs.notte.cc/mcp"
    }
  }
}
```