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:
| Option | Alias | Description | Default |
|---|---|---|---|
--port | -p | HTTP port to listen on | 4003 |
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
/mcpon your Phoenix port (defaulthttp://localhost:4000/mcp)
Options:
| Option | Alias | Description | Default |
|---|---|---|---|
--path | -p | Custom MCP endpoint path | /mcp |
--dev-only | Only enable in development | true | |
--yes | Skip confirmation prompts | false |
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
🔌 Connect Your AI Tools
Important: Use the correct URL based on your setup:
- Standalone server:
http://localhost:4003/mcp- Phoenix integration:
http://localhost:4000/mcp(your Phoenix 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
Cursor / VS Code
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 (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-proxyor 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.
| Tool | Description |
|---|---|
generate_component | Generate mix command for a single component |
generate_components | Generate mix command for multiple components |
get_component_info | Get component configuration options (variants, colors, sizes) |
get_example | Get HEEx code examples with usage patterns |
get_js_hook_info | Get JavaScript hook documentation |
get_mix_task_info | Get mix task documentation |
search_components | Search components by name or functionality |
uninstall_component | Generate uninstall command |
update_config | Update project configuration settings |
validate_config | Validate configuration file for errors |
get_docs | Fetch documentation from mishka.tools |
📚 Available Resources (9)
Resources are read-only data the AI can access.
| Resource | Description |
|---|---|
list_components | List all available components with categories |
list_colors | List color variants with CSS variables |
list_variants | List style variants (default, outline, shadow, etc.) |
list_sizes | List size options (small, medium, large, etc.) |
list_spaces | List spacing options |
list_scripts | List JavaScript hooks (Carousel, Clipboard, etc.) |
list_dependencies | List component dependencies |
list_css_variables | List all CSS custom properties |
get_config | Get current project configuration |
💡 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.