Skip to main content

​
What is MCP?

Model Context Protocol (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: 
claude mcp add --transport http better-styled https://better-styled.com/mcp
Verify the connection: 
claude mcp list
That’s it! Claude Code now has access to the full documentation.

​
Claude Web

Connect within Claude’s web application:
1

Open Connectors

Navigate to Connectors in Claude settings.
2

Add custom connector

Click “Add custom connector”.
3

Configure

  • Name: better-styled
  • URL: https://better-styled.com/mcp
4

Use in chat

Click the attachments button and select better-styled to include the documentation in your conversation.

​
Claude Desktop

Add to your claude_desktop_config.json:
File location: ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "better-styled": {
      "type": "http",
      "url": "https://better-styled.com/mcp"
    }
  }
}
Restart Claude Desktop after making changes.

​
Cursor

Add to your mcp.json file (access via Cmd+Shift+P → “Open MCP settings”): 
{
  "mcpServers": {
    "better-styled": {
      "url": "https://better-styled.com/mcp"
    }
  }
}

​
VS Code

Create .vscode/mcp.json in your project: 
{
  "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
MCP servers don’t consume context until actively searched. You can connect multiple MCP servers without impacting performance.

​
Troubleshooting

  1. Verify the URL is correct: https://better-styled.com/mcp
  2. Check your internet connection
  3. Try removing and re-adding:
claude mcp remove better-styled
claude mcp add --transport http better-styled https://better-styled.com/mcp
  1. Make sure you added it in Connectors settings
  2. Refresh the page
  3. Check that the URL includes /mcp at the end
MCP fetches documentation in real-time, so it should always be current. If you see outdated info, try restarting your AI tool.

Back to Overview

See all AI integration options