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

# Model Context Protocol (MCP)

> Connect AI assistants to Voltaire documentation and generate custom Skills

[Model Context Protocol](https://modelcontextprotocol.io) allows AI assistants to access external tools and data sources. Use MCP servers to give Claude and other AI assistants access to Voltaire documentation and generate custom Skills for your contracts.

## Generating Custom Skills

The primary use case for the Voltaire MCP server is **generating custom Skills** tailored to your specific contracts and requirements.

Instead of using generic provider/contract abstractions, you can ask Claude to:

```
Using the Voltaire docs, generate a custom provider Skill that:
- Includes automatic retry with exponential backoff
- Caches eth_getBalance results for 12 seconds
- Batches requests automatically
- Is optimized for my ERC-20 token contract at 0x...
```

Claude will use the Voltaire documentation to generate a custom implementation based on our [Skills](/skills) patterns.

<Tip>
  See [Skills Philosophy](/concepts/skills) to understand why Voltaire uses copyable implementations instead of rigid library abstractions.
</Tip>

## Live Documentation Viewer

The Playwright MCP server enables Claude to view your local documentation in real-time by:

* Navigating to your local Mintlify dev server
* Taking screenshots of documentation pages
* Inspecting page content and structure
* Verifying visual rendering and layout

This is especially useful for:

* Reviewing documentation changes as you write
* Validating component rendering (tabs, accordions, code blocks)
* Checking visual hierarchy and layout
* Ensuring examples display correctly

## Setup

<Tabs>
  <Tab title="Claude Code (CLI)">
    <Steps>
      <Step title="Add MCP Server">
        Add the Playwright MCP server using the Claude Code CLI:

        ```bash theme={null}
        claude mcp add playwright npx @playwright/mcp@latest
        ```

        Verify it's connected:

        ```bash theme={null}
        claude mcp list
        ```

        You should see `playwright: npx @playwright/mcp@latest - ✓ Connected`.
      </Step>

      <Step title="Install Playwright Browsers">
        Install the Chromium browser:

        ```bash theme={null}
        npx playwright install chromium
        ```

        This downloads the browser that Playwright uses to render pages.
      </Step>

      <Step title="Start Local Docs Server">
        Start the Mintlify dev server:

        ```bash theme={null}
        bun run docs:dev
        ```

        Server typically runs at `http://localhost:3002` (or 3000 if available).
      </Step>

      <Step title="Use in Claude Code">
        In Claude Code, ask Claude to view your documentation:

        ```
        Navigate to http://localhost:3002/primitives/bytecode
        and take a screenshot
        ```

        Claude can now view, screenshot, and interact with your local docs.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Claude Desktop">
    <Steps>
      <Step title="Install Playwright Browsers">
        Install the Chromium browser:

        ```bash theme={null}
        npx playwright install chromium
        ```
      </Step>

      <Step title="Configure Claude Desktop">
        Edit your Claude Desktop config file:

        **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
        **Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
        **Linux:** `~/.config/Claude/claude_desktop_config.json`

        Add the Playwright MCP server:

        ```json theme={null}
        {
          "mcpServers": {
            "playwright": {
              "command": "npx",
              "args": ["-y", "@playwright/mcp@latest"]
            }
          }
        }
        ```
      </Step>

      <Step title="Restart Claude Desktop">
        Restart Claude Desktop to load the MCP server.
      </Step>

      <Step title="Start Local Docs Server">
        ```bash theme={null}
        bun run docs:dev
        ```

        Server runs at `http://localhost:3000`.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Amp">
    <Steps>
      <Step title="Install Playwright Browsers">
        ```bash theme={null}
        npx playwright install chromium
        ```
      </Step>

      <Step title="Configure Amp">
        Edit your Amp settings file:

        **Global (macOS):** `~/.config/amp/settings.json`
        **Project-specific:** `.amp/settings.json` in your project

        Add the Playwright MCP server:

        ```json theme={null}
        {
          "mcpServers": {
            "playwright": {
              "command": "npx",
              "args": ["-y", "@playwright/mcp@latest"]
            }
          }
        }
        ```

        Alternatively, use VS Code settings or the "+ Add MCP Server" button in VS Code.
      </Step>

      <Step title="Start Local Docs Server">
        ```bash theme={null}
        bun run docs:dev
        ```
      </Step>
    </Steps>

    See [Amp Owner's Manual](https://ampcode.com/manual) for full MCP configuration options.
  </Tab>

  <Tab title="OpenCode">
    <Steps>
      <Step title="Install Playwright Browsers">
        ```bash theme={null}
        npx playwright install chromium
        ```
      </Step>

      <Step title="Configure OpenCode">
        Edit your OpenCode config:

        **Global:** `~/.config/opencode/opencode.json`
        **Project-specific:** `opencode.json` in your project root

        Add the Playwright MCP server:

        ```json theme={null}
        {
          "$schema": "https://opencode.ai/config.json",
          "mcp": {
            "playwright": {
              "type": "local",
              "command": ["npx", "-y", "@playwright/mcp@latest"],
              "enabled": true
            }
          }
        }
        ```
      </Step>

      <Step title="Manage via CLI (optional)">
        OpenCode provides CLI commands for MCP management:

        ```bash theme={null}
        opencode mcp enable playwright
        opencode mcp disable playwright
        opencode mcp info playwright
        ```
      </Step>

      <Step title="Start Local Docs Server">
        ```bash theme={null}
        bun run docs:dev
        ```
      </Step>
    </Steps>

    See [OpenCode MCP docs](https://opencode.ai/docs/mcp-servers/) for full configuration options.
  </Tab>
</Tabs>

## Usage

Ask Claude to view your documentation pages. Examples:

**View a specific page:**

```
Can you navigate to http://localhost:3000/primitives/bytecode/analyze
and take a screenshot?
```

**Review page structure:**

```
Please visit http://localhost:3000/crypto/keccak256 and tell me
if the code examples are displaying correctly.
```

**Check navigation:**

```
Navigate to http://localhost:3000 and verify the sidebar navigation
includes all primitive modules.
```

**Validate component rendering:**

```
Go to http://localhost:3000/primitives/address and check if the
tabs are working for Class API vs Namespace API examples.
```

Claude can:

* Navigate to any documentation page
* Take screenshots to visualize layout
* Inspect page content and DOM structure
* Click elements and interact with the page
* Verify links and navigation
* Check responsive design at different viewport sizes

<Note>
  As your codebase accumulates more Voltaire examples, you'll need the MCP server less frequently. The AI can learn from existing patterns in your code. At that point, we recommend excluding the MCP server from your context since everything the AI needs will already be in your codebase.
</Note>

## Available MCP Tools

The Playwright MCP server provides these tools:

**Navigation:**

* `browser_navigate` - Navigate to URL
* `browser_navigate_back` - Go back to previous page

**Screenshots:**

* `browser_take_screenshot` - Capture full page or specific elements
* `browser_snapshot` - Get accessibility tree snapshot

**Interaction:**

* `browser_click` - Click elements
* `browser_type` - Type into input fields
* `browser_fill_form` - Fill multiple form fields
* `browser_hover` - Hover over elements

**Inspection:**

* `browser_evaluate` - Run JavaScript on page
* `browser_console_messages` - Get console output
* `browser_network_requests` - View network activity

See the [Playwright MCP documentation](https://github.com/microsoft/playwright-mcp) for complete tool reference.

## Workflow Example

Typical workflow for reviewing documentation changes:

<Steps>
  <Step title="Start docs server">
    ```bash theme={null}
    bun run docs:dev
    ```

    Server runs at `http://localhost:3000`.
  </Step>

  <Step title="Make documentation changes">
    Edit MDX files in `docs/` directory. Mintlify hot-reloads automatically.
  </Step>

  <Step title="Ask Claude to review">
    ```
    Navigate to http://localhost:3000/primitives/bytecode
    and take a screenshot. Does the layout look correct?
    ```

    Claude navigates to the page, captures a screenshot, and provides visual feedback.
  </Step>

  <Step title="Iterate based on feedback">
    Make adjustments based on Claude's observations and repeat.
  </Step>
</Steps>

## Troubleshooting

<Accordion title="MCP server not appearing in Claude Desktop">
  **Check config file location:**

  * macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
  * Windows: `%APPDATA%\Claude\claude_desktop_config.json`
  * Linux: `~/.config/Claude/claude_desktop_config.json`

  **Verify JSON syntax:**

  ```bash theme={null}
  # macOS
  cat ~/Library/Application\ Support/Claude/claude_desktop_config.json | jq .
  ```

  **Restart Claude Desktop** after config changes.

  **Check logs** (if available in Claude Desktop developer tools).
</Accordion>

<Accordion title="Cannot connect to localhost:3000">
  **Verify Mintlify server is running:**

  ```bash theme={null}
  lsof -i :3000
  ```

  **Restart the dev server:**

  ```bash theme={null}
  # Stop existing server (Ctrl+C)
  bun run docs:dev
  ```

  **Check browser manually:**
  Visit `http://localhost:3000` in your browser to confirm it's accessible.
</Accordion>

<Accordion title="Playwright browser not launching">
  **Install Playwright browsers:**

  ```bash theme={null}
  npx playwright install
  ```

  **Check installation:**

  ```bash theme={null}
  npx playwright --version
  ```

  **Try running Playwright directly:**

  ```bash theme={null}
  npx playwright test --help
  ```
</Accordion>

<Accordion title="Screenshot quality issues">
  **Adjust viewport size:**
  Ask Claude to resize the browser:

  ```
  Resize the browser to 1920x1080 before taking the screenshot.
  ```

  **Capture specific elements:**

  ```
  Take a screenshot of just the code block with the keccak256 example.
  ```

  **Use full page screenshots:**

  ```
  Take a full page screenshot to capture everything.
  ```
</Accordion>

## Technical Details

**MCP Protocol:** Model Context Protocol 1.0
**Transport:** stdio (standard input/output)
**Browser Engine:** Chromium (via Playwright)
**Viewport:** Default 1280x720 (configurable)
**Permissions:** Local network access required for localhost

The Playwright MCP server runs locally and connects to your local documentation server. No external network access required except for initial package installation.