Open Multi Agent Canvas

Open Multi - Agent Canvas is an open - source multi - agent chat interface that supports managing multiple agents in dynamic conversations for travel planning, research, and general task processing.

Artificial intelligence chatbots Developer tools #Multi - agent #Open source #Task processing #MCP protocol .TypeScript

rating : 4.5 points

downloads : 423

update time : 2025-04-29

What is an MCP server?

The MCP (Model Context Protocol) server is a standardized protocol that allows different AI models to communicate and collaborate through a unified interface. It enables developers to easily build multi - model integration systems, such as chatbots, research assistants, and task automation tools.

How to use an MCP server?

Using an MCP server is very simple. Just configure your model or external service as an MCP - compatible endpoint, and then interact with them through the front - end interface. You can also customize the server to meet specific needs.

Applicable scenarios

The MCP server is suitable for application scenarios that require cross - model collaboration, such as travel planning, academic research, and business process optimization. It is especially suitable for tasks that require real - time response and high flexibility.

Main Features

Support for multiple model integrationsThe MCP server can connect multiple AI models simultaneously, enabling more complex task processing.

Flexible communication mechanismSupports multiple communication methods such as Standard Input/Output (StdIO) and Server - Sent Events (SSE).

Easy to expandUsers can add new models and service endpoints as needed.

Advantages and Limitations

Advantages

Unified API interface, reducing development costs

Powerful model collaboration capabilities

Flexible deployment options

Limitations

Requires a certain technical background for setup and maintenance

Some advanced features may depend on specific environments

How to Use

Install necessary dependencies

Ensure that pnpm and the CopilotKit API key are installed.

Configure environment variables

Create an.env file and fill in the required API key.

Start the MCP server

Run the command to start the local MCP server.

Usage Examples

Travel Planning AssistantLeverage the MCP server to integrate multiple travel - related AI models to provide users with personalized itinerary suggestions.

Mathematical Problem SolverCall a specialized mathematical calculation model through the MCP server to solve complex equations.

Frequently Asked Questions

How to start using an MCP server?

Does it support custom models?

Related Resources

CopilotKit Official Documentation

Gain in - depth understanding of how MCP works and best practices.

GitHub Code Repository

View the source code and contribute.

MCP Protocol Specification

Learn more about the technical details of MCP.

🚀 Open-Source Multi-Agent Canvas

An open-source multi-agent chat interface created by CopilotKit, enabling you to manage multiple agents in a dynamic conversation. Built with Next.js, LangGraph, and CopilotKit, it helps handle travel planning, research, and general tasks through the MCP server.

![CopilotKit-Banner](https://github.com/user-attachments/assets/8167c845-0381-45d9-ad1c-83f995d48290)

multi-agent-canvas

✨ Features

Existing Agents

Check out these awesome agents (they live in separate repositories). You can run them individually or deploy them on LangSmith:

In addition, the project now includes a built-in MCP (Multi-Channel Protocol) agent:

MCP Agent: A general-purpose agent that can handle various tasks through the configured MCP server.

Copilot Cloud Requirement

Copilot Cloud is required to run this project.

🚀 Quick Start

1. Prerequisites

Make sure you have:

pnpm

2. API Keys

Copilot Cloud

Run the Frontend

Rename the example.env file in the frontend folder to .env:

NEXT_PUBLIC_CPK_PUBLIC_API_KEY=...

Install the dependencies:

cd frontend
pnpm i

Need a CopilotKit API key? Get it here.

Then start the Next.js project:

pnpm run build && pnpm run start

MCP Agent Setup

mcp-demo

The MCP agent allows you to connect to various MCP-compatible servers:

Configure a Custom MCP Server:
- Click the "MCP Server" button in the top-right corner of the interface.
- Add a server through the configuration panel:
  - Standard IO: Run commands locally (e.g., Python scripts).
  - SSE: Connect to an external MCP-compatible server (via Server-Sent Events).
Public MCP Servers:
- You can connect to public MCP servers such as mcp.composio.dev and mcp.run.

Run the MCP Agent Backend (Optional)

Rename the example.env file in the agent folder to .env:

OPENAI_API_KEY=...
LANGSMITH_API_KEY=...

If you want to use the included MCP agent along with the built-in math server:

cd agent
poetry install
poetry run langgraph dev --host localhost --port 8123 --no-browser

Run the Tunnel

Add another terminal and select the remote endpoint. Then choose local development. After completing these steps, copy the command to your terminal and change the port to match the LangGraph server 8123.