Model Context Protocol (MCP)

Connect AI assistants to Voltaire documentation and generate custom Skills

Model Context Protocol 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 patterns.

See Skills Philosophy to understand why Voltaire uses copyable implementations instead of rigid library abstractions.

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

Claude Code (CLI)

1. Add MCP Server

   Add the Playwright MCP server using the Claude Code CLI:

   claude mcp add playwright npx @playwright/mcp@latest
   

   Verify it’s connected:

   claude mcp list
   

   You should see playwright: npx @playwright/mcp@latest - ✓ Connected.

2. Install Playwright Browsers

   Install the Chromium browser:

   npx playwright install chromium
   

   This downloads the browser that Playwright uses to render pages.

3. Start Local Docs Server

   Start the Mintlify dev server:

   bun run docs:dev
   

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

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

Claude Desktop

1. Install Playwright Browsers

   Install the Chromium browser:

   npx playwright install chromium
   
2. 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:

   {
     "mcpServers": {
       "playwright": {
         "command": "npx",
         "args": ["-y", "@playwright/mcp@latest"]
       }
     }
   }
   
3. Restart Claude Desktop

   Restart Claude Desktop to load the MCP server.

4. Start Local Docs Server

   bun run docs:dev
   

   Server runs at http://localhost:3000.

Amp

1. Install Playwright Browsers

   npx playwright install chromium
   
2. 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:

   {
     "mcpServers": {
       "playwright": {
         "command": "npx",
         "args": ["-y", "@playwright/mcp@latest"]
       }
     }
   }
   

   Alternatively, use VS Code settings or the ”+ Add MCP Server” button in VS Code.

3. Start Local Docs Server

   bun run docs:dev
   

See Amp Owner’s Manual for full MCP configuration options.

OpenCode

1. Install Playwright Browsers

   npx playwright install chromium
   
2. Configure OpenCode

   Edit your OpenCode config:

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

   Add the Playwright MCP server:

   {
     "$schema": "https://opencode.ai/config.json",
     "mcp": {
       "playwright": {
         "type": "local",
         "command": ["npx", "-y", "@playwright/mcp@latest"],
         "enabled": true
       }
     }
   }
   
3. Manage via CLI (optional)

   OpenCode provides CLI commands for MCP management:

   opencode mcp enable playwright
   opencode mcp disable playwright
   opencode mcp info playwright
   
4. Start Local Docs Server

   bun run docs:dev
   

See OpenCode MCP docs for full configuration options.

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

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.

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 for complete tool reference.

Workflow Example

Typical workflow for reviewing documentation changes:

1. Start docs server

   bun run docs:dev
   

   Server runs at http://localhost:3000.

2. Make documentation changes

   Edit MDX files in docs/ directory. Mintlify hot-reloads automatically.

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

4. Iterate based on feedback

   Make adjustments based on Claude’s observations and repeat.

Troubleshooting

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:

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

Cannot connect to localhost:3000

Verify Mintlify server is running:

lsof -i :3000

Restart the dev server:

# Stop existing server (Ctrl+C)
bun run docs:dev

Check browser manually: Visit http://localhost:3000 in your browser to confirm it’s accessible.

Playwright browser not launching

Install Playwright browsers:

npx playwright install

Check installation:

npx playwright --version

Try running Playwright directly:

npx playwright test --help

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.

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.