About open-mcp-client
open-mcp-client is a client application combining a LangGraph agent with a CopilotKit frontend. The agent connects to MCP servers and calls their tools, while the frontend provides UI and state synchronization.
Key features
- 01LangGraph agent connects to MCP servers
- 02Calls tools exposed by MCP servers
- 03CopilotKit frontend
- 04UI and state synchronization
- 05Run frontend and agent separately or together
Use cases
- 01Build an interface for an MCP-connected agent
- 02Develop and debug the agent apart from the frontend
- 03Run the frontend and agent together locally
MCP support
The LangGraph agent connects to MCP servers and invokes their tools.
Details
From the project READMEhttps://github.com/user-attachments/assets/f72e1f7d-3c84-4429-a465-23dff3d3bd63
Getting Started
Set Up Environment Variables:
touch .env
Add the following inside .env at the root:
LANGSMITH_API_KEY=lsv2_...
Next, create another .env file inside the agent folder:
cd agent
touch .env
Add the following inside agent/.env:
OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...
Development
We recommend running the frontend and agent separately in different terminals to debug errors and logs:
# Terminal 1 - Frontend
pnpm run dev-frontend
# Terminal 2 - Agent
pnpm run dev-agent
Alternatively, you can run both services together with:
pnpm run dev
Then, open http://localhost:3000 in your browser.
Architecture
The codebase is split into two main parts:
/agentfolder – A LangGraph agent that connects to MCP servers and calls their tools./appfolder – A frontend application using CopilotKit for UI and state synchronization.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.