Local AI Chat with LangGraph & MCP Tools
A Next.js chat application powered by LangGraph with MCP (Model Context Protocol) tools for real-time web search and data access. Features Server-Sent Events (SSE) streaming for real-time AI responses. Completely local and open source.
Architecture
Core Components
- Next.js 15 - Modern React framework with App Router
- LangGraph - AI agent framework for complex reasoning workflows
- MCP Tools - Google search, web scraping, and data access tools
- SSE Streaming - Real-time response streaming via Server-Sent Events
- Ollama - Local LLM hosting (Qwen 3 14B recommended)
Data Flow
User Message → LangGraph Agent → MCP Tools (Web Search) → LLM → SSE Stream → UI
Features
? Advanced AI Capabilities
- ✅ LangGraph Agent - Complex reasoning and tool usage
- ✅ Real-time Web Search - Current information via Google Search
- ✅ Web Scraping - Extract content from specific URLs
- ✅ SSE Streaming - Real-time response updates
- ✅ Tool Call Visibility - See when AI uses external tools
? Chat Interface
- ✅ Markdown Rendering - Rich text responses with code highlighting
- ✅ Conversation History - Persistent chat threads
- ✅ Multiple Sessions - Manage multiple conversations
- ✅ Real-time Status - Live updates during processing
? Privacy & Performance
- ✅ Completely Local - AI runs on your hardware
- ✅ No API Keys Required - Uses local Ollama instance
- ✅ Thread Management - SQLite-based conversation storage
- ✅ Debug Mode - Detailed logging and performance metrics
Quick Start
1. Install Ollama
# macOS brew install ollama # Windows/Linux # Visit https://ollama.com for installer
2. Install Required Model
ollama pull qwen3:4b
# Alternative: ollama pull qwen3:4b3. Start Ollama Service
4. Run the Application
5. Open Browser
Navigate to http://localhost:3000
Technical Requirements
Hardware
- RAM: 16GB+ (recommended for Qwen 3 14B)
- CPU: Modern multi-core processor
- Storage: 10GB+ free space for models
Software
- Node.js: v18+ (v20+ recommended)
- Ollama: Latest version
- Modern Browser: Chrome, Firefox, Safari, Edge
Key Dependencies
- Next.js 15 - React framework with App Router
- LangGraph - AI agent framework (@langchain/langgraph ^0.4.9)
- MCP SDK - Model Context Protocol (@modelcontextprotocol/sdk ^1.18.1)
- Ollama LangChain - Local LLM integration (@langchain/ollama ^0.2.4)
- SQLite Checkpointer - Conversation persistence (@langchain/langgraph-checkpoint-sqlite ^0.2.1)
Configuration
Model Configuration
Edit app/page.tsx to change the model:
const requiredModel = 'qwen3:4b'; // or 'qwen3:4b', 'llama3.1:70b', etc.
MCP Tools Available
Google Search (google_search)
- Purpose: Get current information from web search
- Usage: Automatically used for current events, facts, news
- Parameters:
query(string)
Web Scraper (scrape)
- Purpose: Extract content from specific URLs
- Usage: Get detailed information from websites
- Parameters:
url(string)
Dice Roller (roll_dice)
- Purpose: Generate random numbers
- Usage: Games, randomization, decision making
- Parameters:
sides(number),count(number)
Development
Available Commands
make prod # Install, build, and start production server make dev # Development server with hot reload make clean # Clean build artifacts make help # Show all available commands
Project Structure
app/
├── components/ # React components
│ ├── ChatInterface.tsx # Main chat UI
│ ├── ChatList.tsx # Conversation sidebar
│ └── StatusBanner.tsx # Connection status indicator
├── langraph_backend/ # LangGraph API routes
│ ├── route.ts # Main SSE streaming endpoint
│ ├── schemas.ts # Request/response validation
│ ├── lib/ # Utilities and checkpointer
│ └── conversations/ # Thread management API
│ ├── route.ts # List conversations
│ └── [thread_id]/route.ts # Get/delete specific conversation
├── mcp_server/ # MCP tool implementations
│ ├── [transport]/ # MCP protocol handler
│ │ └── route.ts # Tool registration and routing
│ ├── tools/ # Individual tool definitions
│ │ ├── googleSearch.ts # Google search tool
│ │ ├── scrape.ts # Web scraping tool
│ │ └── rollDice.ts # Random number generator
│ ├── search/ # Google search implementation
│ └── scrape/ # Web scraping implementation
├── utils/ # Shared utilities
│ └── localStorage.ts # Browser storage helpers
├── layout.tsx # Root layout component
└── page.tsx # Main chat page
Adding New MCP Tools
- Create tool definition in
app/mcp_server/tools/ - Register in
app/mcp_server/[transport]/route.ts - Tool will be automatically available to LangGraph agent
Troubleshooting
Ollama Issues
# Check if Ollama is running curl http://localhost:11434/api/tags # List installed models ollama list # Check model installation ollama pull qwen3:4b
Performance Optimization
- Reduce Model Size: Use
qwen3:7borqwen3:4bfor lower memory usage - Close Applications: Free up RAM for better model performance
- Check Resources: Monitor CPU/RAM usage during chat
SSE Streaming Issues
- Check browser console for connection errors
- Verify LangGraph backend is running on port 3000
- Ensure no firewall blocking Server-Sent Events
MCP Tool Errors
- Verify MCP server is connected in logs
- Check tool implementation in
app/mcp_server/tools/ - Ensure Google search API is accessible
API Endpoints
Chat Streaming
- POST
/langraph_backend- SSE streaming chat endpoint - Headers:
Content-Type: application/json,Accept: text/event-stream
Conversation Management
- GET
/langraph_backend/conversations- List all conversations - GET
/langraph_backend/conversations/[id]- Get specific conversation - DELETE
/langraph_backend/conversations/[id]- Delete conversation
MCP Tools
- POST
/mcp_server/mcp- MCP protocol endpoint for tools
Contributing
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
MIT License - See LICENSE file for details.
Acknowledgments
- Ollama - Local LLM hosting
- LangGraph - AI agent framework
- Model Context Protocol - Tool integration standard
- Next.js - React framework
