> ## Documentation Index
> Fetch the complete documentation index at: https://better-styled.com/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Server for real-time documentation access

> Connect better-styled documentation directly to AI tools via Model Context Protocol.

## What is MCP?

[Model Context Protocol](https://modelcontextprotocol.io/) (MCP) is an open standard that lets AI tools access external data sources in real-time.

With MCP, your AI assistant can search and fetch the latest better-styled documentation directly, without you needing to copy/paste.

## MCP Server URL

```
https://better-styled.com/mcp
```

## Claude Code

Add better-styled docs to Claude Code with a single command:

```bash theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
claude mcp add --transport http better-styled https://better-styled.com/mcp
```

Verify the connection:

```bash theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
claude mcp list
```

That's it! Claude Code now has access to the full documentation.

## Claude Web

Connect within Claude's web application:

<Steps>
  <Step title="Open Connectors">
    Navigate to [Connectors](https://claude.ai/settings/connectors) in Claude settings.
  </Step>

  <Step title="Add custom connector">
    Click "Add custom connector".
  </Step>

  <Step title="Configure">
    * **Name**: `better-styled`
    * **URL**: `https://better-styled.com/mcp`
  </Step>

  <Step title="Use in chat">
    Click the attachments button and select `better-styled` to include the documentation in your conversation.
  </Step>
</Steps>

## Claude Desktop

Add to your `claude_desktop_config.json`:

<Tabs>
  <Tab title="macOS">
    File location: `~/Library/Application Support/Claude/claude_desktop_config.json`

    ```json theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
    {
      "mcpServers": {
        "better-styled": {
          "type": "http",
          "url": "https://better-styled.com/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Windows">
    File location: `%APPDATA%\Claude\claude_desktop_config.json`

    ```json theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
    {
      "mcpServers": {
        "better-styled": {
          "type": "http",
          "url": "https://better-styled.com/mcp"
        }
      }
    }
    ```
  </Tab>
</Tabs>

Restart Claude Desktop after making changes.

## Cursor

Add to your `mcp.json` file (access via `Cmd+Shift+P` → "Open MCP settings"):

```json theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
{
  "mcpServers": {
    "better-styled": {
      "url": "https://better-styled.com/mcp"
    }
  }
}
```

## VS Code

Create `.vscode/mcp.json` in your project:

```json theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
{
  "servers": {
    "better-styled": {
      "type": "http",
      "url": "https://better-styled.com/mcp"
    }
  }
}
```

## Verifying the Connection

After setup, ask your AI assistant:

```
What is better-styled and how do I create a Button component?
```

If configured correctly, it will search the documentation and provide accurate answers.

## How It Works

The MCP server allows AI tools to:

1. **Search** the documentation for relevant information
2. **Fetch** specific pages when needed
3. **Stay current** with real-time access to the latest docs

<Note>
  MCP servers don't consume context until actively searched. You can connect multiple MCP servers without impacting performance.
</Note>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Connection failed in Claude Code">
    1. Verify the URL is correct: `https://better-styled.com/mcp`
    2. Check your internet connection
    3. Try removing and re-adding:

    ```bash theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
    claude mcp remove better-styled
    claude mcp add --transport http better-styled https://better-styled.com/mcp
    ```
  </Accordion>

  <Accordion title="MCP not showing in Claude Web">
    1. Make sure you added it in [Connectors settings](https://claude.ai/settings/connectors)
    2. Refresh the page
    3. Check that the URL includes `/mcp` at the end
  </Accordion>

  <Accordion title="Outdated information">
    MCP fetches documentation in real-time, so it should always be current. If you see outdated info, try restarting your AI tool.
  </Accordion>
</AccordionGroup>

<Card title="Back to Overview" icon="arrow-left" href="/ai/overview">
  See all AI integration options
</Card>