MCP Host

MCP Host is a complete end-to-end implementation of a Model Context Protocol (MCP) host with an in-built MCP client. It provides a beautiful, polished chat interface with tool selection capabilities using MCP, and integrates with the MCP Registry for discovering available servers.

Features

• Chat Interface: A modern UI with a glassmorphism design and crimson theme
• MCP Client Integration: Discover and use tools from MCP servers
• Registry Integration: Automatically connect to servers listed in the MCP Registry
• Anthropic API Integration: Powered by Claude, one of the most capable AI assistants
• Server-Side Processing: Backend handles communication with Anthropic and MCP servers
• Docker Support: Easy local deployment with Docker

Getting Started

Prerequisites

• Docker and Docker Compose
• An Anthropic API key

Running with Docker

1. Clone the repository:

   git clone https://github.com/aidecentralized/canvas.git
   cd canvas

2. Start the application with Docker Compose:

   docker-compose up -d

3. Access the application at http://localhost:3000

4. In the app, click the gear icon to open settings and enter your Anthropic API key

Development Setup

If you want to run the application in development mode:

Server

cd server
npm install
npm run dev

Client

cd client
npm install
npm start

Configuring MCP Servers

MCP Host can connect to multiple MCP servers using Server-Sent Events (SSE). To add a server:

1. Open the application and click the gear icon to access settings
2. Go to the "MCP Servers" tab
3. Fill in the server details:
   • Server ID: A unique identifier for the server
   • Server Name: A human-readable name
   • Server URL: The SSE endpoint URL of the MCP server (e.g., http://localhost:3001/sse)
4. Click "Add Server"

Example MCP Server Setup

Here's an example of how to set up an MCP server with SSE transport that's compatible with MCP Host:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
import express from "express";
import { z } from "zod";

// Create an MCP server
const server = new McpServer({
  name: "MyServer",
  version: "1.0.0",
});

// Add your tools
server.tool("my-tool", { param: z.string() }, async ({ param }) => ({
  content: [{ type: "text", text: `You sent: ${param}` }],
}));

// Set up Express app
const app = express();
const port = 3001;

// To support multiple simultaneous connections, a session-based lookup object is used
const transports: { [sessionId: string]: SSEServerTransport } = {};

// SSE endpoint
app.get("/sse", async (_, res) => {
  const transport = new SSEServerTransport("/messages", res);
  transports[transport.sessionId] = transport;

  res.on("close", () => {
    delete transports[transport.sessionId];
  });

  await server.connect(transport);
});

// Message handling endpoint
app.post("/messages", async (req, res) => {
  const sessionId = req.query.sessionId as string;
  const transport = transports[sessionId];

  if (transport) {
    await transport.handlePostMessage(req, res);
  } else {
    res.status(400).send("No transport found for sessionId");
  }
});

// Start the server
app.listen(port, () => {
  console.log(`MCP server running on http://localhost:${port}`);
});

You can then add this server to MCP Host using the URL http://localhost:3001/sse.

Architecture

MCP Host consists of:

• Frontend: React application with Chakra UI
• Backend: Node.js server with Express
• MCP Client: Integrated client using the official MCP SDK with SSE transport
• Registry Client: Integration with the MCP Registry for server discovery

The application follows a clean architecture pattern with separation of concerns:

• Client: UI components, contexts for state management
• Server: API endpoints, MCP integration, registry integration, tool execution
• Shared: Common types used by both client and server

Communication Protocol

MCP Host uses Server-Sent Events (SSE) for communication with MCP servers. This approach offers several advantages:

1. Web Compatibility: SSE works over standard HTTP, making it compatible with web servers and accessible over networks
2. No File System Access Required: Unlike stdio transport, SSE doesn't require access to the local file system
3. Multiple Connections: Supports connections to multiple MCP servers simultaneously
4. Docker Friendly: Works well in containerized environments since it doesn't rely on process spawning

Registry Integration

MCP Host integrates with the MCP Registry to automatically discover and connect to available MCP servers. Key features include:

1. Automatic Discovery: Loads servers from the registry on startup
2. Filtering: Ignores GitHub/GitLab URLs as they're likely source code repositories, not live servers
3. Manual Refresh: Allows users to refresh the server list from the settings panel
4. Rich Metadata: Displays server details including verification status, rating, types, and tags

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• Model Context Protocol for the MCP standard
• Anthropic for the Claude AI assistant
• Chakra UI for the UI components