🤖 MCP Server for AI Tools

Model Context Protocol (MCP) integration for Mishka Chelekom - Connect your favorite AI tools directly to the component library.

Mishka Chelekom includes a built-in MCP server that enables AI assistants like Claude Code, Cursor, and Claude Desktop to browse components, generate code, and access documentation seamlessly.

🚀 Quick Start

Option 1: Standalone Server

Start the MCP server independently:

mix mishka.mcp.server

📍 Server runs at http://localhost:4003/mcp

Options:

Example:

mix mishka.mcp.server --port 5000

Option 2: Integrate with Phoenix

Add the MCP endpoint directly to your Phoenix router:

mix mishka.mcp.setup

📍 Adds endpoint at /mcp on your Phoenix port (default http://localhost:4000/mcp)

Options:

Examples:

# Custom path
mix mishka.mcp.setup --path /api/mcp

# Enable in all environments
mix mishka.mcp.setup --dev-only=false

# Skip prompts
mix mishka.mcp.setup --yes

Option 3: Stdio Transport (No Server) — Recommended

Run the MCP server as a stdio process spawned by the MCP client itself — no HTTP listener, no separate terminal, zero ongoing setup. Ideal for project-local .mcp.json files checked into version control.

One-command setup:

mix mishka.mcp.setup --stdio

This writes (or merges into) .mcp.json in your project root with the correct entry, including MIX_QUIET=1 so Mix compile output never corrupts the MCP handshake. After running it once, your MCP client (Claude Code, Cursor, etc.) launches mix mishka.mcp.server --transport stdio itself whenever it needs to talk to chelekom — you never run that command by hand.

🛠 The MIX_QUIET=1 env entry is what keeps Mix's Compiling … messages off stdout when a rebuild happens. Setup writes it for you; if you hand-author .mcp.json instead, set it yourself.

🔌 Connect Your AI Tools

Important: Pick the connection style that matches your setup:

• Standalone HTTP server: http://localhost:4003/mcp
• Phoenix integration: http://localhost:4000/mcp (your Phoenix port)
• Stdio: spawned by the client — no URL, no port

Claude Code

# For standalone server
claude mcp add --transport http mishka-chelekom http://localhost:4003/mcp

# For Phoenix integration
claude mcp add --transport http mishka-chelekom http://localhost:4000/mcp

# For stdio (client spawns the process)
claude mcp add --transport stdio mishka-chelekom --env MIX_QUIET=1 -- mix mishka.mcp.server --transport stdio

Cursor / VS Code (HTTP)

Create .mcp.json in your project root:

{
  "mcpServers": {
    "mishka-chelekom": {
      "type": "http",
      "url": "http://localhost:4003/mcp"
    }
  }
}

For Phoenix integration, change port to 4000 (or your Phoenix port).

Cursor / VS Code (Stdio)

Self-contained config — no server needs to be running. The MIX_QUIET env var keeps Mix's compile output off stdout, so the protocol stream stays clean even on first run / after code changes:

{
  "mcpServers": {
    "mishka-chelekom": {
      "type": "stdio",
      "command": "mix",
      "args": ["mishka.mcp.server", "--transport", "stdio"],
      "env": {"MIX_QUIET": "1"}
    }
  }
}

Cursor / VS Code (via MCP Proxy)

If your editor doesn't support HTTP transport directly, use mcp_proxy_rust to bridge stdio and HTTP:

{
  "mcpServers": {
    "mishka-chelekom": {
      "command": "mcp-proxy",
      "args": ["--transport", "http", "http://localhost:4003/mcp"]
    }
  }
}

💡 Install the proxy with: cargo install mcp-proxy or download from releases

Claude Desktop

Add to your Claude Desktop configuration:

{
  "mcpServers": {
    "mishka-chelekom": {
      "type": "http",
      "url": "http://localhost:4003/mcp"
    }
  }
}

For Phoenix integration, change port to 4000 (or your Phoenix port).

🛠️ Available Tools (11)

Tools are actions the AI can perform on your behalf.

📚 Available Resources (9)

Resources are read-only data the AI can access.

💡 Example Usage

Once connected, you can ask your AI assistant things like:

• "Show me all available button variants"
• "Generate a modal component with primary color"
• "What JavaScript hooks does the carousel need?"
• "Search for form-related components"
• "Show me an example of the alert component"

⚠️ Note for AI Tools

AI assistants may initially try incorrect resource URIs before discovering the correct ones. This is normal behavior - the AI will automatically recover by listing available resources and using the correct URIs.

📖 Learn More

• Mishka Chelekom Documentation
• CLI Documentation
• GitHub Repository