Model Context Protocol

The Model Context Protocol (MCP) is an open standard that allows AI assistants like Claude, Cursor, and other AI-powered tools to securely connect with external data sources and systems. Think of it as a "universal remote" that lets your AI tools access real-world data and functionality.

Kibo UI supports MCP to supercharge your AI development workflow.

Installation Guide

Step 1: Choose Your AI Tool

First, make sure you're using an AI development tool that supports MCP:

Claude Desktop (Free - recommended for beginners)
Cursor (AI-powered code editor)
Windsurf by Codeium (AI development platform)
Other MCP-compatible tools

Step 2: Locate Your Configuration File

Depending on your AI tool, you'll need to edit one of these files:

Claude Desktop: .cursor/mcp.json
Cursor: .cursor/mcp.json
Windsurf: .codeium/windsurf/mcp_config.json
Other tools: Check your tool's MCP documentation

Step 3: Add Kibo UI Configuration

Copy and paste this configuration into your MCP config file:

{
  "mcpServers": {
    "kibo-ui": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://www.kibo-ui.com/api/mcp/http"
      ]
    }
  }
}

Step 4: Restart Your AI Tool

Close and reopen your AI application for the changes to take effect.

Step 5: Verify the Connection

Test the integration by asking your AI assistant:

"What Kibo UI components are available for building a dashboard?"

If successful, your AI should be able to list and explain Kibo UI components!

Multiple MCP Servers

You can use Kibo UI alongside other MCP servers:

{
  "mcpServers": {
    "kibo-ui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://www.kibo-ui.com/api/mcp/http"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "filesystem": {
      "command": "npx", 
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}