WebSocket을 통해 에이전트 및 MCP 도구와 상호 작용하는 TypeScript/React 채팅 UI. 이 프로젝트는 Chat UI가 아닙니다. Model Context Protocol (MCP) 서버 구축을 위한 보일러판이며, 채팅을 통해 기능을 쉽게 테스트할 수 있습니다. 건축은 MCP 대리인과 공구를 가진 급속한 발달, 연장 및 상호 작용하는 실험을 가능하게 합니다.

https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8] [T0]] [T0]] [T0]] [T0]] [T0]] [T0]] [T0]] [T0] [T0] [T0]] [T0] [T0] [T0]] [T0]] [T0] [T0] [T0] [T0] [T0]] [T0] [T0]] [T0] [T0] [T0]] [T0]] [T0] [T0] [T0]] https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8] https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8]]] https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8]]]]]] [[https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8]]]]]]] [[[[[[https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8]]]]]]]]]]]]]] [[[[[[[https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8]]]]]]]]]]]]]]]]]] [[[[[[[[[[[[[[[[[[[[[[

에이전트 및 LLM 통합

Agents는 MCP와 원활한 통합을 위해 OpenAI Agents SDK를 사용하여 실행됩니다. 현재 구현은 Gemini LLM for Agent responses, 하지만 에이전트 구성을 업데이트하여 OpenAI LLM으로 쉽게 전환할 수 있습니다. 이 유연성은 다른 큰 언어 모델로 실험 할 수 있습니다.

특징

• 실시간 AI 에이전트 및 도구와 채팅
• Extensible tool system (Copilot을 요청하여 새로운 도구 등록)
• 채팅 중, 사용자는 디버깅 목적으로 모든 도구 통화 및 응답을 볼 수 있습니다.
• 차트 렌더링 및 데이터 시각화

MCP Chat UI

TypeScript/React chat UI for interacting with agents and MCP tools via WebSocket. This project is not just a Chat UI — it is a boilerplate for building Model Context Protocol (MCP) servers and easily testing their capabilities by chatting with them. The architecture enables rapid development, extension, and interactive experimentation with MCP agents and tools.

https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8

Agent & LLM Integration

Agents are run using the OpenAI Agents SDK for seamless integration with MCP. The current implementation uses Gemini LLM for agent responses, but you can easily switch to OpenAI LLM by updating the agent configuration. This flexibility allows you to experiment with different large language models as needed.

Features

• Chat with AI agents and tools in real time
• Extensible tool system (register new tools by asking Copilot)
• During chat, users can see all tool calls with their arguments and responses for debugging purposes
• Chart rendering and data visualization
• Coding AI Canvas implementation, allowing users to create designs and interactive visualizations by providing a natural language description (like Gemini Canvas). ‘f.e. a user could say “visualize inserting sorting algorithm” and the system would generate and show a interactive visual representation of the algorithm.’
• Google authentication integration
• Hot reload and fast development with Vite

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm

Environment Setup

1. Copy .env.template to .env:

   cp .env.template .env
   

2. Set your GEMINI_API_KEY in the .env file to enable Gemini LLM features.
3. (Optional) Set GOOGLE_CLIENT_ID in .env to enable Google authentication for the chat UI.

Install Dependencies

# In project root
npm install
cd client
npm install

# or

npm run install_all

Run Development Server

# In project root
npm run dev
open http://localhost:5173/

Start Production Build

# In project root
npm run start
open http://localhost:3000/

Inspect MCP Server

# In project root
npm run inspect

Registering New MCP Tools

You can add new server-side tools by simply asking Copilot:

register new tool with name my_tool_name, input parameters param1: string, param2: number, output fields result: string

Copilot will generate the file and code for you. See .github/copilot-instructions.md for full details.

Registering External MCP Servers

You can add new external MCP servers by editing the mcp.json file in the project root. List your server configuration in this file to make them available for selection in the chat UI.

Example mcp.json

{
  "mcpServers": {
    "playwright": {
      "description": "Playwright MCP",
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless", "--isolated"]
    },