mcpField
O
open-mcp-client

open-mcp-client

github.com/mdhelaluddinbiswasFrameworks & SDKs1Updated 83w ago

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

  1. 01LangGraph agent connects to MCP servers
  2. 02Calls tools exposed by MCP servers
  3. 03CopilotKit frontend
  4. 04UI and state synchronization
  5. 05Run frontend and agent separately or together

Use cases

  1. 01Build an interface for an MCP-connected agent
  2. 02Develop and debug the agent apart from the frontend
  3. 03Run the frontend and agent together locally

MCP support

The LangGraph agent connects to MCP servers and invokes their tools.

Details

From the project README

https://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:

  1. /agent folder – A LangGraph agent that connects to MCP servers and calls their tools.
  2. /app folder – A frontend application using CopilotKit for UI and state synchronization.

Comments

Markdown supported

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.