What is Open Multi Agent Canvas

Open Multi-Agent Canvas is an open-source multi-agent chat interface developed by CopilotKit that allows users to manage multiple agents in a single dynamic conversation. It is designed to facilitate tasks such as travel planning and research through the use of MCP servers.

Use cases

Use cases for Open Multi-Agent Canvas include coordinating travel itineraries with CoAgents Travel Agent, conducting research with CoAgents AI Researcher, and utilizing the MCP Agent for general-purpose tasks across different MCP-compatible servers.

How to use

To use Open Multi-Agent Canvas, ensure you have pnpm installed and obtain an API key from Copilot Cloud. After setting up the environment variables and installing dependencies, you can run the Next.js project to start managing your agents.

Key features

Key features of Open Multi-Agent Canvas include the ability to manage multiple agents simultaneously, integration with MCP servers for enhanced functionality, and a user-friendly interface built with Next.js and LangGraph.

Where to use

Open Multi-Agent Canvas can be used in various fields such as travel planning, academic research, customer service, and any domain requiring multi-agent interaction for complex problem-solving.

Open Multi-Agent Canvas, created by CopilotKit is an open-source multi-agent chat interface that lets you manage multiple agents in one dynamic conversation. It’s built with Next.js, LangGraph, and CopilotKit to help with travel planning, research, and general-purpose tasks through MCP servers.

Existing Agents

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

• CoAgents Travel Agent
• CoAgents AI Researcher

Additionally, this project now includes a built-in MCP (Multi-Channel Protocol) Agent:

• MCP Agent: A general-purpose agent capable of handling various tasks through configurable MCP servers.

Copilot Cloud is required to run this project:

Quick Start 🚀

1. Prerequisites

Make sure you have:

• pnpm

2. API Keys

• Copilot Cloud

Running the Frontend

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

NEXT_PUBLIC_CPK_PUBLIC_API_KEY=...

Install dependencies:

cd frontend
pnpm i

Need a CopilotKit API key? Get one here.

Then, fire up the Next.js project:

pnpm run build && pnpm run start

MCP Agent Setup

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

1. Configuring Custom MCP Servers:

   • Click the “MCP Servers” button in the top right of the interface
   • Add servers via the configuration panel:
     • Standard IO: Run commands locally (e.g., Python scripts)
     • SSE: Connect to external MCP-compatible servers (via Server-Sent Events)

2. Public MCP Servers:

   • You can connect to public MCP servers like mcp.composio.dev and mcp.run

Running 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 with the built-in math server:

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

Running a tunnel

Add another terminal and select Remote Endpoint.
Then select Local Development.
Once this is done, copy the command into your terminal and change the port to match the LangGraph server 8123

Documentation

• CopilotKit Docs
• LangGraph Platform Docs
• Model Context Protocol (MCP) Docs

License

Distributed under the MIT License. See LICENSE for more info.