MCP Integration

What is MCP?#

MCP (Model Context Protocol) is an open standard that allows AI assistants to use external tools and data sources. Think of it as a plugin system for AI -- when you configure an MCP server, your AI assistant gains new capabilities.

The Chipa Kit MCP server gives your AI assistant the ability to:

• Search the entire Chipa Kit component catalog.
• View detailed component information and file lists.
• Download and import component files directly into your project.
• Browse component categories.

Installation#

There are three ways to run the Chipa Kit MCP server:

Option 1: npx (recommended)

No installation needed. Your IDE runs this command automatically when configured:

npx @chipa-kit/mcp

Option 2: Global install

npm install -g @chipa-kit/mcp
chipa-kit-mcp

Option 3: From source

git clone https://github.com/chipa-kit/chipa-kit.git
cd chipa-kit
pnpm install
pnpm --filter @chipa-kit/mcp build
node packages/mcp-server/dist/index.js

IDE Configuration#

Add the Chipa Kit MCP server to your IDE's configuration file. Below are the configs for all supported IDEs.

Claude Desktop

Add to your Claude Desktop MCP config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "chipa-kit": {
      "command": "npx",
      "args": ["@chipa-kit/mcp"],
      "env": {
        "CHIPAKIT_API_KEY": "ck_live_your_key_here"
      }
    }
  }
}

Cursor

Add to .cursor/mcp.json in your project root, or in global Cursor settings:

{
  "mcpServers": {
    "chipa-kit": {
      "command": "npx",
      "args": ["@chipa-kit/mcp"],
      "env": {
        "CHIPAKIT_API_KEY": "ck_live_your_key_here"
      }
    }
  }
}

VS Code (Copilot MCP)

Add to .vscode/mcp.json:

{
  "servers": {
    "chipa-kit": {
      "command": "npx",
      "args": ["@chipa-kit/mcp"],
      "env": {
        "CHIPAKIT_API_KEY": "ck_live_your_key_here"
      }
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "chipa-kit": {
      "command": "npx",
      "args": ["@chipa-kit/mcp"]
    }
  }
}

Available Tools#

The MCP server exposes the following tools to your AI assistant:

search_components

Search the Chipa Kit catalog by keyword, category, framework, or styling.

get_component

Get full details for a specific component by slug or shortcode.

import_component

Download a component and return its file contents, ready to write to your project.

list_categories

List all available component categories with their component counts. Takes no parameters.

Example Prompts#

Once configured, you can use natural language with your AI assistant. Here are example prompts for a typical workflow:

1. Browse categories

"What component categories are available on Chipa Kit?"

2. Search for components

"Find React hero section components with Tailwind CSS"
"Search for dark mode toggle components"
"Show me navigation components for Vue"

3. Inspect a component

"Show me details for chipakit:janedoe/hero-v1"
"What files are in the pricing-cards component?"

4. Import into your project

"Import chipakit:janedoe/hero-v1 into my src/components/hero/ folder"
"Download chipakit:bobsmith/pricing-cards and add it to my project"

5. Customize

"Update the hero section colors to match my brand palette"
"Add dark mode support to this component"

Troubleshooting#

"Unable to connect to Chipa Kit API"

• Check your internet connection.
• If behind a corporate firewall, ensure https://chipakit.com is accessible.

"Invalid API key"

• Verify your CHIPAKIT_API_KEY is correct and has not expired.
• Generate a new key at chipakit.com/settings/api-keys.
• You can omit the key entirely for public (free-tier) access.

Server not appearing in IDE

• Run npx @chipa-kit/mcp manually in your terminal to verify it works.
• Check that your MCP configuration JSON is valid (no trailing commas, correct file path).
• Restart your IDE after changing MCP configuration.
• Check IDE logs for MCP connection errors.

Enable debug logging

{
  "mcpServers": {
    "chipa-kit": {
      "command": "npx",
      "args": ["@chipa-kit/mcp"],
      "env": {
        "LOG_LEVEL": "debug"
      }
    }
  }
}

"Component too large" warning

Components larger than 100KB are flagged as too large for inline MCP import to avoid exceeding context window limits. Download the ZIP from the Chipa Kit website instead:

https://chipakit.com/components/{shortcode}/download