mcpField
M
mcp-client

mcp-client

github.com/yeakub108Frameworks & SDKs0Updated 81w ago

About mcp-client

mcp-client is a web application paired with a LangGraph agent. It is structured for developing an agent that connects to MCP servers and calls their tools, with a CopilotKit frontend.

Key features

  1. 01LangGraph-based agent
  2. 02Connect to MCP servers
  3. 03Call MCP tools
  4. 04CopilotKit frontend
  5. 05Run frontend and agent separately

Use cases

  1. 01Build an agent that invokes MCP tools
  2. 02Develop the frontend and agent independently

MCP support

The LangGraph agent connects to MCP servers and calls their tools. The project README does not describe server management or additional MCP capabilities.

Details

From the project README

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.