Skip to content
Drivn logoDrivn

MCP Server

Connect AI assistants to Drivn's component registry via the Model Context Protocol.

What is MCP?

MCP (Model Context Protocol) is an open standard by Anthropic that lets AI assistants connect to external tools and data sources. Instead of copy-pasting component code into chat, your AI assistant connects directly to Drivn's component registry — getting exact source code, design tokens, and coding conventions.

  • Direct access to all 33+ component source files
  • Design token awareness for theme-consistent code
  • Convention rules so AI follows Drivn patterns automatically
  • No manual copy-pasting into AI context windows

How It Works

The MCP server runs as a subprocess of your editor. When the AI needs component data, it calls tools over the stdio protocol.

  1. 1You configure the MCP server in your editor
  2. 2AI assistant connects to drivn mcp via stdio protocol
  3. 3When you ask for a component, the AI calls get_component to get exact source
  4. 4The AI reads drivn://rules to understand your coding conventions
  5. 5Generated code follows dot notation, const styles, and Drivn patterns

Claude Code

Run the install command or add manually to .mcp.json at your project root or ~/.claude/ for global access.

1claude mcp add drivn -- npx drivn@latest mcp

Or add manually:

1// .mcp.json (project root or ~/.claude/)
2{
3  "mcpServers": {
4    "drivn": {
5      "command": "npx",
6      "args": ["drivn@latest", "mcp"]
7    }
8  }
9}

Cursor

Run the install command or add manually to .cursor/mcp.json.

1npx @anthropic-ai/cursor-mcp-installer drivn -- npx drivn@latest mcp

Or add manually:

1// .cursor/mcp.json
2{
3  "mcpServers": {
4    "drivn": {
5      "command": "npx",
6      "args": ["drivn@latest", "mcp"]
7    }
8  }
9}

VS Code (Copilot)

Run the install command or add manually to .vscode/mcp.json.

1code --add-mcp '{"name":"drivn","command":"npx","args":["drivn@latest","mcp"]}'

Or add manually:

1// .vscode/mcp.json
2{
3  "servers": {
4    "drivn": {
5      "command": "npx",
6      "args": ["drivn@latest", "mcp"]
7    }
8  }
9}

Windsurf

Add to your Windsurf configuration.

1// ~/.codeium/windsurf/mcp_config.json
2{
3  "mcpServers": {
4    "drivn": {
5      "command": "npx",
6      "args": ["drivn@latest", "mcp"]
7    }
8  }
9}

Claude Desktop

Add to the Claude Desktop configuration file.

1// macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
2// Windows: %APPDATA%\Claude\claude_desktop_config.json
3{
4  "mcpServers": {
5    "drivn": {
6      "command": "npx",
7      "args": ["drivn@latest", "mcp"]
8    }
9  }
10}

What You Can Ask

Once connected, ask your AI assistant anything about Drivn components.

  • “Add a Button component to my project”
  • “Browse all available Drivn components”
  • “Create a dialog with a form inside”
  • “Show me the design tokens for theming”
  • “What components do I need for a navigation sidebar?”
  • “Install a date picker with all its dependencies”

Available Tools

The MCP server exposes 7 tools that AI assistants can call.

list_components

Lists all available Drivn components with names and descriptions. No input required.

get_component

Returns full source code and metadata (dependencies, npm packages) for a specific component.

get_component_metadata

Returns metadata only (no source code) for a component. Lighter weight, useful for planning which components to use.

search_components

Searches components by name or description. Useful when you know what you need but not the exact component name.

get_installation_instructions

Returns step-by-step install commands for one or more components, with resolved dependencies and npm packages.

get_design_tokens

Returns the full CSS design token system — base globals and theme tokens (HSL custom properties).

get_drivn_rules

Returns the Drivn coding conventions document — dot notation, const styles, type-safe variants, and more.

Available Resources

Resources are read-only data that AI assistants can browse directly.

drivn://rules

Drivn coding conventions and component patterns (Markdown)

drivn://components/{name}

Source code for any component — one resource per component (e.g. drivn://components/button)

drivn://design-tokens

Full CSS globals with theme tokens

Example

Ask your AI assistant to add a component and it will use the MCP tools automatically.

1User: "Add a Dialog component to my project"
2​
3# Behind the scenes, the AI:
4# 1. Calls list_components → finds "dialog"
5# 2. Calls get_component({ name: "dialog" })
6#    → gets full source + metadata
7#    → sees dependency on "button"
8# 3. Reads drivn://rules
9#    → learns dot notation, const styles pattern
10# 4. Writes dialog.tsx and button.tsx
11#    to your components directory