Integration

September 4, 2025 · View on GitHub

Connect the shadcn/ui MCP Server to your favorite editor or AI tool.

🔌 Available Integrations

ToolStatusGuide
VS Code✅ SupportedVS Code Integration
Cursor✅ SupportedCursor Integration
Claude Desktop✅ SupportedClaude Desktop Integration
Continue.dev✅ SupportedContinue.dev Integration
Claude Code✅ SupportedClaude Code Integration

🚀 Quick Integration

  1. Install Continue Extension
  2. Add MCP Server configuration
  3. Start asking questions

See VS Code Integration for detailed steps.

Claude Desktop

  1. Edit configuration file
  2. Add MCP Server
  3. Restart Claude Desktop

See Claude Desktop Integration for details.

🎯 What You Can Do After Integration

  • Ask for component source code directly in your editor
  • Get component demos and usage examples
  • Retrieve complete blocks (dashboards, forms, etc.)
  • Explore repository structure without leaving your tool
  • Compare framework implementations (React, Svelte, Vue, React Native)

🔧 Common Configuration

Most integrations use this basic configuration:

{
  "command": "npx",
  "args": [
    "@jpisnice/shadcn-ui-mcp-server",
    "--github-api-key",
    "ghp_your_token_here"
  ]
}

For different frameworks:

{
  "command": "npx",
  "args": [
    "@jpisnice/shadcn-ui-mcp-server",
    "--framework",
    "svelte",
    "--github-api-key",
    "ghp_your_token_here"
  ]
}

{
  "command": "npx",
  "args": [
    "@jpisnice/shadcn-ui-mcp-server",
    "--framework",
    "react-native",
    "--github-api-key",
    "ghp_your_token_here"
  ]
}

🐛 Troubleshooting

Integration Not Working

  1. Verify server runs standalone:

    npx @jpisnice/shadcn-ui-mcp-server --help

  2. Check configuration syntax - JSON must be valid

  3. Restart your tool after configuration changes

  4. Check logs for error messages

Common Issues

  • Command not found: Ensure npx is available
  • Rate limit errors: Add GitHub token
  • Framework issues: Verify framework parameter
  • Permission errors: Check file permissions

🔗 Next Steps