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.

The MCP server currently supports @darkcode-ui/react only and stdio transport. Published at @darkcode-ui/react-mcp on npm. View the source code on GitHub.

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

Quick Setup

Cursor

Add to Cursor Settings → Tools → MCP Servers:

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

Claude Code

Run this command in your terminal:

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

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

.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 for more details.

Windsurf

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

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

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 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:

.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 for more details.

Codex

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

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 for more details.

OpenCode

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

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 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:

"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

MCP Server