https://github.com/user-attachments/assets/0a955c8e-d993-4577-9ca3-e510a544cb6e
LangGraphJS Multi-Agent Telecom Support System
This is an intelligent customer support application built with CopilotKit and LangGraph. It features a multi-agent AI system that handles customer inquiries, manages telecom services, and automatically escalates complex issues to human agents.
The system includes four specialized agents:
- Intent Agent - Classifies customer messages and determines urgency
- Customer Lookup Agent - Retrieves customer profiles and service details
- Reply Agent - Generates personalized responses based on context
- Escalation Agent - Routes complex issues to appropriate support teams
This project is organized as a monorepo using Turborepo and pnpm workspaces.
Project Structure
.
├── apps/
│ ├── web/ # Next.js frontend application
│ └── agent/ # LangGraph agent
├── pnpm-workspace.yaml
├── turbo.json
└── package.json
Prerequisites
- Node.js 18+
- pnpm 9.15.0 or later
- OpenAI API Key (for the LangGraph agent)
Getting Started
- Install all dependencies (this installs everything for the frontend and agent:
pnpm install
- Set up your OpenAI API key:
cd apps/agent
echo "OPENAI_API_KEY=your-openai-api-key-here" > .env
- Start the development servers concurrently:
pnpm dev
This will start both the Next.js app (on port 3000) and the LangGraph agent (on port 8123) using Turborepo.
Available Scripts
All scripts use Turborepo to run tasks across the monorepo:
pnpm dev- Starts both the web app and agent servers in development modepnpm dev:studio- Starts the web app and agent with LangGraph Studio UIpnpm build- Builds all apps for productionpnpm lint- Runs linting across all apps
Running Scripts for Individual Apps
You can also run scripts for individual apps using pnpm's filter flag:
# Run dev for just the web app
pnpm --filter web dev
# Run dev for just the agent
pnpm --filter agent dev
# Or navigate to the app directory
cd apps/web
pnpm dev
Customization
The main UI component is in apps/web/src/app/page.tsx. You can:
- Modify the theme colors and styling
- Add new frontend actions
- Utilize shared-state
- Customize your user-interface for interacting with LangGraph
The LangGraph agent code is in apps/agent/src/.
📚 Documentation
- CopilotKit Documentation - Explore CopilotKit's capabilities
- LangGraph Documentation - Learn more about LangGraph and its features
- Next.js Documentation - Learn about Next.js features and API
Troubleshooting
Agent Connection Issues
If you see "I'm having trouble connecting to my tools", make sure:
- The LangGraph agent is running on port 8000
- Your OpenAI API key is set correctly
- Both servers started successfully