Getting Started
- agent-framework
🤖 AI Agent
About
What is Getting Started?
Getting Started is a starter application that pairs a LangGraph agent with a CopilotKit frontend, designed to connect to MCP servers and call their tools. It runs locally via pnpm commands and is intended for developers building AI agents that interact with Model Context Protocol servers.
How to use Getting Started?
Set up environment variables by creating a .env file at the root with LANGSMITH_API_KEY, and another .env file inside the agent folder with OPENAI_API_KEY and LANGSMITH_API_KEY. Run the frontend and agent in separate terminals using pnpm run dev-frontend and pnpm run dev-agent, or run both together with pnpm run dev. Then open http://localhost:3000 in your browser.
Key features of Getting Started
- LangGraph agent that connects to MCP servers and calls tools
- CopilotKit frontend for UI and state synchronization
- Supports separate development terminals for debugging
- Environment variable configuration for API keys
- Single command to run both services concurrently
Use cases of Getting Started
- Prototyping an AI agent that uses MCP server tools
- Testing and debugging MCP server integrations
- Learning how to combine a LangGraph agent with a CopilotKit frontend
FAQ from Getting Started
How do I set up environment variables?
Create a .env file at the root with LANGSMITH_API_KEY, and another .env file inside the agent folder with OPENAI_API_KEY and LANGSMITH_API_KEY.
How do I run the frontend and agent?
You can run them in separate terminals with pnpm run dev-frontend and pnpm run dev-agent, or run both together with pnpm run dev.
What is the architecture of the application?
The codebase is split into two main parts: an agent folder containing a LangGraph agent that connects to MCP servers, and an app folder containing a CopilotKit frontend for UI and state synchronization.
Which API keys are required?
You need an OpenAI API key and a LangSmith API key.
Can I run both services simultaneously?
Yes, running pnpm run dev starts both the frontend and agent together.
Details
- Author
- yeakub108
- Category
- agent-framework
- Repository
- yeakub108/mcp-client
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.
