Continue.dev Integration

September 4, 2025 · View on GitHub

Integrate the shadcn/ui MCP Server with Continue.dev for enhanced AI-powered development.

🚀 Quick Setup

Method 1: Application Settings

  1. Install Continue.dev:

  2. Configure MCP Server:

    • Open Continue.dev
    • Go to Settings → MCP Servers
    • Add new server:
{
  "name": "shadcn-ui",
  "command": "npx",
  "args": [
    "@jpisnice/shadcn-ui-mcp-server",
    "--github-api-key",
    "ghp_your_token_here"
  ]
}

Method 2: Configuration File

Add to your Continue.dev configuration file:

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

🎨 Framework-Specific Configurations

React (Default)

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

Svelte

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

Vue

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

React Native

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

🔧 Multiple Framework Setup

Configure multiple frameworks for comparison:

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

🎯 Usage Examples

Component Development

"Show me the shadcn/ui button component source code"
"Get the card component with usage examples"
"List all available shadcn/ui components"

Block Implementation

"Get the dashboard-01 block implementation"
"Show me the calendar-01 block with all components"
"List all available shadcn/ui blocks"

Code Generation

"Generate a login form using shadcn/ui components"
"Create a dashboard with shadcn/ui blocks"
"Show me how to use the dialog component"

Framework Comparison

"Compare the button component between React and Svelte"
"Show me the Vue version of the card component"
"Get the React form component with TypeScript"

🔍 Environment Variable Setup

Use environment variables for better security:

{
  "name": "shadcn-ui",
  "command": "npx",
  "args": ["@jpisnice/shadcn-ui-mcp-server"],
  "env": {
    "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
  }
}

🐛 Troubleshooting

Continue.dev Not Recognizing MCP Server

  1. Verify server runs standalone:

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

  2. Check configuration syntax:

    • Validate JSON format
    • Check for missing commas or brackets

  3. Restart Continue.dev after configuration changes

  4. Check Continue.dev logs for error messages

Common Issues

"Command not found":

# Ensure npx is available
npx --version

"Rate limit exceeded":

# Add GitHub token to configuration

"MCP server not recognized":

  • Restart Continue.dev
  • Check configuration file location
  • Verify JSON syntax

🔗 Next Steps