MCP Integration

Beta — MCP integration is in beta. APIs may change.

Extend your copilot with external tools using the Model Context Protocol (MCP). MCP tools work alongside your custom tools and integrate seamlessly with CopilotProvider.

Usage

React hooks, transports, multi-server, and error handling.

MCP-UI

Render interactive UIs like forms, charts, and product cards.

What is MCP?

MCP (Model Context Protocol) is an open standard that allows AI assistants to connect to external tools and data sources. With MCP, your copilot can:

Access external services - GitHub, Slack, databases, APIs
Execute remote tools - Search, scraping, e-commerce, SEO tools
Display interactive UIs - Forms, charts, product cards via MCP-UI

How It Works

MCP tools integrate with CopilotProvider just like your custom tools:

┌─────────────────────────────────────────────────────────────────────────┐
│  CopilotProvider                                                        │
│  ┌───────────────────────────────────────────────────────────────────┐  │
│  │                                                                   │  │
│  │  ┌─────────────┐     ┌─────────────┐     ┌─────────────┐        │  │
│  │  │ useMCPTools │────▶│ registerTool│────▶│   AI gets   │        │  │
│  │  │   (hook)    │     │  (internal) │     │  all tools  │        │  │
│  │  └─────────────┘     └─────────────┘     └─────────────┘        │  │
│  │        │                                        │                │  │
│  │        ▼                                        ▼                │  │
│  │  ┌─────────────┐                         ┌─────────────┐        │  │
│  │  │ MCP Server  │◀────── tool call ───────│ CopilotChat │        │  │
│  │  │  (GitHub)   │─────── result ─────────▶│             │        │  │
│  │  └─────────────┘                         └─────────────┘        │  │
│  │                                                                   │  │
│  └───────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘

The flow:

Connect - useMCPTools connects to an MCP server and discovers available tools
Register - Tools are automatically registered with CopilotProvider (via registerTool)
Use - AI sees MCP tools alongside your custom tools and calls them when relevant
Execute - The SDK routes the call to the MCP server and returns the result

MCP tools work exactly like custom tools — they're just discovered from external servers instead of defined in your code.

Quick Start

Configure MCP servers directly on CopilotProvider:

import { CopilotProvider } from '@yourgpt/copilot-sdk/react';
import { CopilotChat } from '@yourgpt/copilot-sdk/ui';

function App() {
  return (
    <CopilotProvider
      runtimeUrl="/api/chat"
      mcpServers={[
        {
          name: "mcp360",
          transport: "http",
          url: "https://api.mcp360.ai/mcp",
          headers: { Authorization: `Bearer ${process.env.MCP360_API_KEY}` },
        },
      ]}
    >
      <CopilotChat />
    </CopilotProvider>
  );
}

Servers connect in the background — the chat is usable immediately, and tools become available when ready.

Combining with Custom Tools

MCP tools work alongside your custom tools:

function App() {
  return (
    <CopilotProvider
      runtimeUrl="/api/chat"
      tools={[
        {
          name: "get_user",
          description: "Get current user info",
          handler: async () => ({ name: "John", role: "admin" }),
        },
      ]}
      mcpServers={[
        {
          name: "mcp360",
          transport: "http",
          url: "https://api.mcp360.ai/mcp",
          headers: { Authorization: `Bearer ${process.env.MCP360_API_KEY}` },
        },
      ]}
    >
      {/* AI has: get_user + all mcp360_* tools */}
      <CopilotChat />
    </CopilotProvider>
  );
}

MCP Server Options

MCP360 provides 100+ pre-built MCP tools through a single connection.

mcpServers={[
  {
    name: "mcp360",
    transport: "http",
    url: "https://api.mcp360.ai/mcp",
    headers: { Authorization: `Bearer ${process.env.MCP360_API_KEY}` },
  },
]}

Includes: Web search, scraping, SEO tools, e-commerce data, and more.

Best for: Teams wanting multiple integrations through a single API key

mcpServers={[
  {
    name: "github",
    transport: "http",
    url: "https://mcp.github.com",
    headers: { Authorization: `Bearer ${token}` },
  },
]}

Best for: Single-purpose integrations (GitHub, Slack, etc.)

Supported Features

Feature	Status	Description
HTTP Transport	Supported	Connect to remote MCP servers via HTTP
SSE Transport	Supported	Real-time streaming via Server-Sent Events
Stdio Transport	Coming Soon	Connect to local MCP servers via stdin/stdout
Tool Discovery	Supported	Automatic tool listing and schema parsing
Tool Execution	Supported	Call tools and handle results
MCP-UI	Supported	Render interactive UI components
Elicitation	Supported	Human-in-the-loop approval flows
Multi-Server	Supported	Connect to multiple MCP servers simultaneously

Next Steps

Usage - React hooks, transports, and connection management
MCP-UI - Interactive UI components and pre-built React components
Tools - Learn about custom tools that work alongside MCP