MCP Integration

Provider-Level Config

The simplest way to add MCP servers — configure them 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://connect.mcp360.ai/v1/mcp360/mcp?token=YOUR_TOKEN",
        },
        {
          name: "github",
          transport: "http",
          url: "https://mcp.github.com",
          headers: { Authorization: `Bearer ${githubToken}` },
        },
      ]}
    >
      <CopilotChat />
    </CopilotProvider>
  );
}

All servers connect automatically and tools are registered with the AI.

MCPServerConfig Options

Option	Type	Default	Description
`name`	`string`	Required	Unique identifier for this server
`transport`	`"http" \| "sse"`	Required	Transport type
`url`	`string`	Required	Server URL
`headers`	`Record<string, string>`	`{}`	Custom HTTP headers
`timeout`	`number`	`30000`	Request timeout in ms
`prefixToolNames`	`boolean`	`true`	Prefix tools with server name

useMCPTools Hook

For more control, use the hook directly inside CopilotProvider:

function Chat() {
  const { isConnected, isLoading, toolDefinitions } = useMCPTools({
    name: "mcp360",
    transport: "http",
    url: "https://connect.mcp360.ai/v1/mcp360/mcp?token=YOUR_TOKEN",
  });

  return <CopilotChat />;
}

Hook Return Values

Property	Type	Description
`isConnected`	`boolean`	Whether connected to the server
`isLoading`	`boolean`	Whether connection is in progress
`toolDefinitions`	`ToolDefinition[]`	Available tools
`state`	`MCPClientState`	Full connection state including errors
`connect`	`() => Promise`	Manually connect
`disconnect`	`() => Promise`	Disconnect
`callTool`	`(name, args) => Promise`	Call a tool directly

Transport Types

useMCPTools({ name: "server", transport: "http", url: "https://mcp.example.com" });

Best for most remote MCP servers.

useMCPTools({ name: "realtime", transport: "sse", url: "https://mcp.example.com/events" });

Best for real-time streaming connections.

Multiple Servers

Call the hook multiple times — all tools register with the same CopilotProvider:

function Chat() {
  useMCPTools({ name: "github", transport: "http", url: "https://mcp.github.com", headers: { Authorization: `Bearer ${githubToken}` } });
  useMCPTools({ name: "slack", transport: "http", url: "https://mcp.slack.com", headers: { Authorization: `Bearer ${slackToken}` } });

  return <CopilotChat />;
}

With prefixToolNames: true (default), tools are namespaced to avoid conflicts: github_create_issue, slack_send_message.

MCP-UI

MCP-UI extends MCP to allow tools to return interactive HTML components — product cards, forms, charts — rendered inline in chat.

function Chat() {
  useMCPTools({ name: "shop", transport: "http", url: "/api/mcp" });

  const { handleIntent } = useMCPUIIntents({
    onIntent: (action, data) => {
      if (action === "add_to_cart") addToCart(data.productId, data.quantity);
    },
    onPrompt: (text) => setChatInput(text),
    onNotify: (message, level) => toast[level || "info"](message),
  });

  return <CopilotChat onUIIntent={handleIntent} />;
}

Intent Types

Type	Handler	Description
`intent`	`onIntent`	Semantic action for your app
`prompt`	`onPrompt`	Add text to chat input
`notify`	`onNotify`	Show notification
`link`	`onLink`	Open a URL
`tool`	`onToolCall`	Call another MCP tool

Error Handling

const { state } = useMCPTools({
  name: "server",
  transport: "http",
  url: "https://mcp.example.com",
  onError: (error) => console.error(`MCP Error: ${error.message}`),
});

// state.connectionState: "disconnected" | "connecting" | "connected" | "error"

MCP360 Gateway

Access 100+ tools through a single connection with MCP360:

useMCPTools({
  name: "mcp360",
  transport: "http",
  url: "https://connect.mcp360.ai/v1/mcp360/mcp?token=YOUR_TOKEN",
});

MCP360 includes web search, scraping, SEO tools, e-commerce data, and more. Explore all tools →

MCP Integration

On this page