Rege

Posted on Mar 5

Connect MCPs to Your AI Copilot/Chatbot.

#ai #react #opensource #productivity

TL;DR: MCP (Model Context Protocol) lets AI connect to external tools — most AI apps like Claude, Cursor support it now. We brought it to web-based AI Copilots, with support for interactive UI components.

We added MCP support to Copilot SDK.

What this means: Your AI copilot can now create Linear issues, query Supabase databases, check Sentry errors, manage Jira tickets — directly from the chat. Users ask, the copilot acts.

MCP (Model Context Protocol) is how AI apps connect to external tools. Claude, Cursor, Windsurf — they all support it. Services like Supabase, MongoDB, Sentry, Linear, Atlassian, AWS, Netlify and many more already provide MCP servers.

Now your AI copilots can connect to them too.

Basic Setup

Add MCP servers to your copilot:

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

<CopilotProvider
  runtimeUrl="/api/chat"
  mcpServers={[
    {
      name: "my-tools",
      transport: "http",
      url: "https://your-mcp-server.com/mcp",
    },
  ]}
>
  <YourApp />
  <CopilotChat />
</CopilotProvider>

The SDK handles connection, tool discovery, and execution.

Quick Start with MCP360

Want to try MCP without setting up individual services? MCP360 gives you 100+ tools through a single connection:

Web search — Google, YouTube, News
Web scraping — extract data from any page
Lead tools — email verification, company lookup
SEO — keyword research, SERP tracking
Maps — places, directions, reviews

Connect with one URL:

<CopilotProvider
  runtimeUrl="/api/chat"
  mcpServers={[
    {
      name: "mcp360",
      transport: "http",
      url: "https://connect.mcp360.ai/v1/mcp360/mcp?token=YOUR_TOKEN",
    },
  ]}
>

Get your token at mcp360.ai.

MCP-UI: Interactive Components in Chat

Here's what makes this different: MCP servers can return UI, not just text.

Ask your copilot to "show product options" and get clickable cards. Run a poll. Display a chart. All inside the chat.

Examples:

Product cards with "Add to Cart" buttons
Voting polls
Data tables
Approval workflows
Form inputs

The server sends a UI schema, the SDK renders it. Your copilot becomes an interactive assistant, not just a text box.

Multiple Servers

Connect as many sources as you need:

mcpServers={[
  {
    name: "mcp360",
    transport: "http",
    url: "https://connect.mcp360.ai/v1/mcp360/mcp?token=YOUR_TOKEN",
  },
  {
    name: "linear",
    transport: "http",
    url: "https://mcp.linear.app",
    headers: { Authorization: `Bearer ${linearToken}` },
  },
  {
    name: "supabase",
    transport: "http",
    url: "https://mcp.supabase.com",
    headers: { Authorization: `Bearer ${supabaseToken}` },
  },
]}

Tools are namespaced automatically: mcp360_web_search, linear_create_issue, supabase_query.

What You Can Build

Use Case	Tools
Sales copilot	Lead enrichment, company research, CRM sync
Support assistant	Ticket lookup, knowledge base, escalation
Research tool	Web scraping, competitive analysis, data aggregation
Internal ops	Database queries, reports, workflow automation

Get Started

git clone https://github.com/YourGPT/copilot-sdk
cd copilot-sdk/examples/mcp-demo
npm install && npm run dev

View Live Demo →

Links: GitHub · MCP Docs · MCP360

DEV Community