<page url="/en/docs/react/getting-started/mcp-server">
# MCP Server

**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/getting-started/mcp-server
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/getting-started/(ui-for-agents)/mcp-server.mdx
> Access DarkCode UI documentation directly in your AI assistant


***

The DarkCode UI MCP Server gives AI assistants direct access to DarkCode UI component documentation, making it easier to build with DarkCode UI in AI-powered development environments.

<DocsImage
  src="https://darkcode-ui-assets.darkcode.dev/docs/darkcode-ui-react-mcp-light-new-2.jpg"
  darkSrc="https://darkcode-ui-assets.darkcode.dev/docs/darkcode-ui-react-mcp-dark-new.jpg"
  alt="DarkCode UI MCP Server"
/>

The MCP server currently supports **@darkcode-ui/react** only and [stdio transport](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio). Published at `@darkcode-ui/react-mcp` on npm. View the source code on [GitHub](https://github.com/DarkCode-Developers/darkcode-ui/tree/main/packages/react-mcp).

<Callout>
  As we add more components to DarkCode UI, they'll be available in the MCP server too.
</Callout>

## Quick Setup

### Cursor

Add to **Cursor Settings** → **Tools** → **MCP Servers**:

```json title=".cursor/mcp.json"
{
  "mcpServers": {
    "darkcode-ui-react": {
      "command": "npx",
      "args": ["-y", "@darkcode-ui/react-mcp@latest"]
    }
  }
}

```

Alternatively, add the following to your `~/.cursor/mcp.json` file. To learn more, see the [Cursor documentation](https://cursor.com/docs/context/mcp).

### Claude Code

Run this command in your terminal:

```bash
claude mcp add darkcode-ui-react -- npx -y @darkcode-ui/react-mcp@latest

```

Or manually add to your project's `.mcp.json` file:

```json title=".mcp.json"
{
  "mcpServers": {
    "darkcode-ui-react": {
      "command": "npx",
      "args": ["-y", "@darkcode-ui/react-mcp@latest"]
    }
  }
}

```

After adding the configuration, restart Claude Code and run `/mcp` to see the DarkCode UI MCP server in the list. If you see **Connected**, you're ready to use it.

See the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp) for more details.

### Windsurf

Add the DarkCode UI server to your project's `.windsurf/mcp.json` configuration file:

```json title=".windsurf/mcp.json"
{
  "mcpServers": {
    "darkcode-ui-react": {
      "command": "npx",
      "args": ["-y", "@darkcode-ui/react-mcp@latest"]
    }
  }
}

```

After adding the configuration, restart Windsurf to activate the MCP server.

See the [Windsurf MCP documentation](https://docs.windsurf.com/windsurf/cascade/mcp) for more details.

### Zed

Add the DarkCode UI server to your `settings.json` configuration file. Open settings via Command Palette (`zed: open settings`) or use `Cmd-,` (Mac) / `Ctrl-,` (Linux):

```json title="settings.json"
{
  "context_servers": {
    "darkcode-ui-react": {
      "command": "npx",
      "args": ["-y", "@darkcode-ui/react-mcp@latest"],
      "env": {}
    }
  }
}

```

After adding the configuration, restart Zed and open the Agent Panel settings view. Check that the indicator dot next to the darkcode-ui server is green with "Server is active" tooltip.

See the [Zed MCP documentation](https://zed.dev/docs/ai/mcp) for more details.

### VS Code

To configure MCP in VS Code with GitHub Copilot, add the DarkCode UI server to your project's `.vscode/mcp.json` configuration file:

```json title=".vscode/mcp.json"
{
  "servers": {
    "darkcode-ui-react": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@darkcode-ui/react-mcp@latest"]
    }
  }
}

```

After adding the configuration, open `.vscode/mcp.json` and click **Start** next to the darkcode-ui-react server.

See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) for more details.

### Codex

Add the DarkCode UI server to your `~/.codex/config.toml` (or a project-scoped `.codex/config.toml`):

```toml title="config.toml"
[mcp_servers.darkcode-ui-react]
command = "npx"
args = ["-y", "@darkcode-ui/react-mcp@latest"]

```

After adding the configuration, restart Codex and run `/mcp` in the TUI to verify the server is active.

See the [Codex MCP documentation](https://developers.openai.com/codex/mcp) for more details.

### OpenCode

Add the DarkCode UI server to your project's `opencode.json` configuration file:

```json title="opencode.json"
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "darkcode-ui-react": {
      "type": "local",
      "command": ["npx", "-y", "@darkcode-ui/react-mcp@latest"]
    }
  }
}

```

After adding the configuration, restart OpenCode to activate the MCP server.

See the [OpenCode MCP documentation](https://open-code.ai/docs/en/mcp-servers) for more details.

## Usage

Once configured, ask your AI assistant questions like:

- "Help me install DarkCode UI in my Next.js/Vite/Astro app"
- "Show me all DarkCode UI components"
- "What props does the Button component have?"
- "Give me an example of using the Card component"
- "Get the source code for the Button component"
- "Show me the CSS styles for Card"
- "What are the theme variables for dark mode?"

### Automatic Updates

The MCP server can help you upgrade to the latest DarkCode UI version:

```bash
"Hey Cursor, update DarkCode UI to the latest version"

```

Your AI assistant will automatically:
- Compare your current version with the latest release
- Review the changelog for breaking changes
- Apply the necessary code updates to your project

This works for any version upgrade, whether you're updating to the latest stable or pre-release version.

## Available Tools

The MCP server provides these tools to AI assistants:

| Tool | Description |
|------|-------------|
| `list_components` | List all available DarkCode UI components |
| `get_component_docs` | Get complete component documentation including anatomy, props, examples, and usage patterns for one or more components |
| `get_component_source_code` | Access the React/TypeScript source code (.tsx files) for components |
| `get_component_source_styles` | View the CSS styles (.css files) for components |
| `get_theme_variables` | Access theme variables for colors, typography, spacing with light/dark mode support |
| `get_docs` | Browse the full DarkCode UI documentation including guides and principles (use path `/docs/react/getting-started/quick-start` for installation instructions) |

## Troubleshooting

**Requirements:** Node.js 22 or higher. The package will be automatically downloaded when using `npx`.

**Need help?** [GitHub Issues](https://github.com/DarkCode-Developers/darkcode-ui/issues)

## Links

- [npm Package](https://www.npmjs.com/package/@darkcode-ui/react-mcp)
- [GitHub Repository](https://github.com/DarkCode-Developers/darkcode-ui/tree/main/packages/react-mcp)
- [Contributing Guide](https://github.com/DarkCode-Developers/darkcode-ui/blob/main/CONTRIBUTING.md)
</page>