Getting Started
- agent-framework
About
What is Getting Started?
A project comprising a LangGraph agent that connects to MCP servers and calls their tools, paired with a frontend application built with CopilotKit for UI and state synchronization.
How to use Getting Started?
Set environment variables in .env files at the root and inside the agent folder, install Poetry for dependency management, then run the frontend and agent separately in different terminals (pnpm run dev-frontend and pnpm run dev-agent) or together (pnpm run dev). Open http://localhost:3000 in a browser.
Key features of Getting Started
- LangGraph agent connects to MCP servers and calls tools.
- Frontend uses CopilotKit for UI and state sync.
- Run frontend and agent in separate terminals for debugging.
- Environment variables configured via .env files.
- Poetry used for agent dependency management.
Use cases of Getting Started
—
FAQ from Getting Started
What is the architecture of Getting Started?
The codebase is split into two parts: an /agent folder containing a LangGraph agent that connects to MCP servers and calls their tools, and an /app folder with a CopilotKit frontend.
How do I run the application in development?
You can run the frontend and agent separately in different terminals using pnpm run dev-frontend and pnpm run dev-agent, or run both together with pnpm run dev.
What environment variables are required?
The root .env requires LANGSMITH_API_KEY and OPENAI_API_KEY. The agent/.env file also requires OPENAI_API_KEY and LANGSMITH_API_KEY.
How is dependency management handled?
Poetry is used for dependency management in the agent service. Install it with pip install poetry and verify with poetry --version.
What is the purpose of the MCP server connection?
The LangGraph agent connects to MCP servers and calls their tools, enabling tool‑use within the agent flow.
Details
- Author
- copilotkit
- GitHub stars
- 7
- Category
- agent-framework
- Repository
- copilotkit/mcp-client
https://github.com/user-attachments/assets/364b6705-14d4-4e6d-bea7-fb9f12664fab
Getting Started
Set Up Environment Variables:
touch .env
Add the following inside .env at the root:
LANGSMITH_API_KEY=lsv2_...
OPENAI_API_KEY=sk-...
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_...
Set Up Poetry:
Poetry is used for dependency management in the agent service. To install Poetry, run:
pip install poetry
To verify the installation, run:
poetry --version
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.
