Open MCP Client: Web-based MCP client to quickly connect to any MCP service.

General Introduction

Open MCP Client is an open source tool whose highlight is that it provides a web-based MCP (Model Context Protocol) client that allows users to connect to any MCP server for chatting without having to install it. It also supports embedding chat functionality into your own applications. Developed by the CopilotKit team, it combines LangChain's LangGraph technology, the project is deployed on the Vercel platform, the code is hosted on GitHub, and was last updated on March 10, 2025. Whether it's a quick test server or developing custom AI interactions, this tool is simple and practical, especially for users and developers who like a convenient experience.

Function List

• Provides a web-based MCP client to connect directly to any MCP server and chat in real-time.
• No installation is required, and the web version of the function can be used through the browser.
• Support for integrating the chat function into the user's own application.
• Use LangGraph technology to build intelligent agents that connect to server tools.
• The open source code is hosted on GitHub and supports viewing and modification.
• The front-end is based on CopilotKit, ensuring that the interface and state are synchronized.

Using Help

How to get started with Open MCP Client

Open MCP Client can be used in two ways: either through a quick experience with the web-based MCP Client, or locally deployed and integrated into an application. Below are detailed steps to help you get started.

1. Using the web-based MCP client

The web version is the core feature of Open MCP Client and is suitable for quick connection to MCP servers without any installation.

• Step 1: Visit the web version
  Open your browser and enter the address:open-mcp-client.vercel.appThis is the official web-based MCP client deployed by the CopilotKit team on Vercel. This is the official web version of the MCP client deployed by the CopilotKit team on Vercel, ready to go.
• Step 2: Obtain the MCP Server URL
  You need a valid MCP server URL, which can be accessed via the Composio and other platforms. Log in to the Composio website, create or select an MCP server, and copy its URL (usually in the format of https://example.com/mcp).
• Step 3: Connect to the server
  On the web version of the interface, locate the URL entry box (usually in a prominent position on the page) and paste in the URL of the MCP server you copied; click on the "Connect" button and the system will try to establish a connection. Once successful, the chat screen will load within a few seconds.
• Step 4: Start chatting
  Once connected, enter a message in the input box, such as "What's the weather like today?" or "Help me write code" and send. or "Write code for me", and then send it. The server will return the reply in real time, and the interface will display the content of the conversation, so the operation is simple and intuitive.

2. Local deployment and integration

If you need to run it locally or integrate the functionality into your project, you can follow the development steps below.

• Step 1: Clone the GitHub Repository
  Run the following command in the terminal to download the project locally:

git clone https://github.com/CopilotKit/open-mcp-client.git

Then go to the project directory:

cd open-mcp-client

• Step 2: Configure the root directory environment variables
  In the project root directory, create the .env Documentation:

touch .env

Open the file and add the following (replacing it with your actual API key):

LANGSMITH_API_KEY=lsv2_...

This key is used to connect to the LangSmith service and can be obtained by registering on the LangSmith website.

• Step 3: Configure Agent Environment Variables
  go into agent Folder:

cd agent
touch .env

exist agent/.env file is added:

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY is obtained from the OpenAI website and is used to support the LangGraph agent functionality.

• Step 4: Install dependencies
  Return to the root directory and run:

npm install

or use pnpm (recommended):

pnpm install

Install dependencies such as CopilotKit and LangGraph. Ensure that Node.js is installed locally (recommended version 18 or higher).

• Step 5: Activate Development Mode
  The project is divided into front-end (/app) and agents (/agent) two parts, it is recommended to run them on two separate terminals:
• Terminal 1 (front end):

  pnpm run dev-frontend
  

• Terminal 2 (Agent):

  pnpm run dev-agent
  

or start both with a single command:

pnpm run dev

After startup, access the http://localhost:3000You can see the local interface.

• Step 6: Test Connection and Chat
  Enter the MCP server URL in the local interface (the same way as the web version) and click Connect. After successful connection, you can enter messages to test the chat function.
• Step 7: Integration into your application
  The front-end code is in the /app folder, using the CopilotKit management interface and status synchronization. The agent code is in the /agent folder to connect to the server based on LangGraph. You can reuse this code, or refer to GitHub's README.md to modify the integration.

Detailed operation of main functions

• Web-based MCP Client
  The web version is the best feature, just enter the URL to connect. If the connection fails, check if the URL is correct or if the server is online. The interface is driven by CopilotKit for smooth operation.
• Live Chat
  The chat interface supports real-time input and display of replies, both in the web and local versions. After sending a message, the LangGraph agent processes the request and invokes the server tools, and the results are displayed automatically.
• Debugging and customization
  Local runtime , available browser developer tools (F12) to view logs and network requests . Code open source , can be modified /app in the front-end style, or adjust the /agent The proxy logic in the

caveat

• The web version relies on the Internet, and server responsiveness may be affected by the Internet.
• Local deployments require the API key to be configured correctly, otherwise the agent will not work.
• The project is updated frequently and it is recommended to regularly use the git pull Get the latest version.

By following the steps above, you can take full advantage of the convenience of the web-based MCP or develop deeper integrations.