AI导哈

MCP可视化对话式AI助手

这是一款企业级对话式AI助手，通过LangGraph多智能体编排实现实时流式对话、联网搜索与MCP数据可视化，适用于智能问答、数据分析和图表报告等场景。

  • by andrew41500
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 andrew41500/Conversational-AI-Assistant

使用说明

🚀 Conversational AI Assistant with MCP Visualization

A professional, enterprise-grade LLM Chat Interface featuring a full-screen multi-session layout, real-time streaming responses, LangGraph multi-agent orchestration, and an integrated Model Context Protocol (MCP) style Data Visualization server.

📸 Application Previews

1. Multi-Agent Web Research & Real-Time Badges 2. Autonomous MCP Chart Generation & Caption

🌟 Key Features

  • Multi-Agent Architecture (LangGraph): A Supervisor agent routes each request to specialist agents — a Chart Agent (MCP visualization server), a Research Agent (Tavily web search), and a General Agent — and chains them for multi-step tasks (e.g. search the web, then chart the results).
  • Live Agent Status Badges: Visual indicator pills render directly in the chat stream showing real-time routing (🧭 Routing to Research Agent, 🔧 Web Search, 🧭 Routing to Chart Agent, 🔧 Chart Visualizer).
  • Interactive Source Citations: Web search results automatically produce clickable source pill buttons linked directly to verified references.
  • Instant MCP Data Visualization: High-resolution charts (Line, Bar, Scatter) rendered in-memory and delivered instantly with synchronized natural-language captions.
  • Full-Screen Multi-Session Layout: Sidebar navigation for managing multiple concurrent chat sessions with session deletion and instant renaming.
  • Real-Time Streaming: Tokens stream word-by-word directly from Groq using ReadableStream for an organic chat experience.
  • Context Optimization & Sliding Window: Automatically scrubs heavy Base64 image payloads and old tool markers from historical context to strictly adhere to LLM token rate limits.
  • Microservices Architecture: Clean separation of concerns between Frontend, Backend Orchestrator, and Tool (MCP) Server running in Docker.

🛠️ Tech Stack

Frontend

  • React 19: Modern UI library for building the chat interface.
  • Vite 8: Next-generation frontend tooling for fast development.
  • Vanilla CSS: Custom-built responsive design with sleek dark mode and glassmorphism.

Backend (Orchestrator)

  • FastAPI: High-performance asynchronous Python web framework.
  • LangChain: Framework for orchestrating LLM workflows and tool-calling.
  • LangGraph: Supervisor/worker multi-agent state graph orchestration.
  • Groq (Qwen-3.8-27b): Ultra-fast LLM inference using LPU accelerators.
  • Tavily: Real-time web search API for the Research Agent.
  • SQLAlchemy + SQLite: Lightweight, reliable local message persistence.

MCP Data Server

  • FastAPI: Microservice to handle tool visualization requests.
  • Matplotlib: Python library for generating high-quality charts in-memory.

🚀 Getting Started

Prerequisites

Method 1: Using Docker (Recommended)

  1. Configure Environment: Create a .env file in the root directory (and copy to backend/.env for local runs):

    GROQ_API_KEY=your_groq_api_key_here
TAVILY_API_KEY=your_tavily_api_key_here

  2. Launch the System: From the root directory, run:

    docker-compose up --build

  3. Access the App:

Method 2: Running Locally (Manual)

1. MCP Data Server

cd mcp
pip install -r requirements.txt
uvicorn mcp_server:app --port 8001

2. Backend Orchestrator

cd backend
pip install -r requirements.txt
# Add GROQ_API_KEY to your env or .env file
uvicorn main:app --port 8000

3. Frontend

cd frontend
npm install
npm run dev

📁 Project Structure

├── backend/             # FastAPI Orchestrator (Logic, DB, LangChain)
│   ├── main.py          # Entry point & streaming endpoint
│   ├── agents.py        # LangGraph multi-agent graph (supervisor + workers + tools)
│   ├── database.py      # SQLAlchemy Models & SQLite setup
│   └── requirements.txt  # Python dependencies
├── frontend/            # React + Vite Frontend
│   ├── src/             # UI Components (Sidebar, Chat, etc.)
│   └── package.json     # JS dependencies
├── mcp/                 # MCP Data Visualization Server
│   ├── mcp_server.py    # Chart generation logic
│   └── requirements.txt  # Python dependencies
└── docker-compose.yml   # Multi-container orchestration

🧪 Testing the Visualization

To test the MCP feature, try sending the following prompt:

"Show me a bar chart of my monthly sales: Jan 450, Feb 780, Mar 620, Apr 900."

The Supervisor will route the request to the Chart Agent, which calls the MCP server and renders an inline PNG chart in the chat!

To test the multi-agent Research → Chart chain, try:

"Search for Malaysia's GDP for the last 5 years and plot it as a line chart."

The Supervisor routes to the Research Agent (Tavily) first, then to the Chart Agent — a genuine multi-step, multi-agent handoff.

🧪 Quality Assurance & Testing

This project includes a comprehensive automated test suite to ensure system stability and API contract integrity.

How to Run Tests

To verify the backend logic and database persistence:

  1. Navigate to the backend directory:
    cd backend
  2. Install testing dependencies:
    pip install -r requirements.txt
  3. Run the automated test suite:
    pytest tests/test_main.py

What is covered?

  • API Health Checks: Verification that all session and history endpoints are accessible.
  • Data Persistence: Validation of the SQLite/SQLAlchemy message storage layer.
  • Contract Integrity: Ensuring the chat and streaming endpoints adhere to the expected JSON schemas.

📝 License

This project is part of a technical assessment. All rights reserved by the author.

相关 MCP