MCP Chat Studio

🚀 MCP聊天室

MCP服务器的终极测试平台

使用漂亮的glassmorphism UI和强大的工作区模式测试、调试和开发模型上下文协议服务器。\ 记录场景 • 集合+运行报告 • 工作区画布 • 工作流导出（Python+节点） • 模拟服务器 • 文档生成器 • Ollama的零配置

需要帮助？ 使用 工作室助理 （右下角指南针）学习功能、生成工作流程、导入OpenAPI和导航UI——只需提问即可。



🆕 主要更新（2025年1月）： 此版本包括重要的新功能，如OAuth配置UI、LLM设置持久性、E2E测试、会话管理、安全增强等。以前的稳定版本可在 v2 分支 作为备份。

🎬 展示

Main Showcase

📌 本地MCP测试台 -专为发展而设计。不适用于互联网曝光。

______________________________________________________________________

⚡ 60秒内开始

# 1. Clone and install
git clone https://github.com/JoeCastrom/mcp-chat-studio.git && cd mcp-chat-studio && npm install

# 2. Start (works with Ollama out of the box - no API keys needed!)
npm run dev

# 3. Open http://localhost:3082 and start testing! 🎉

就是这样！ 现在，您有一个完整的MCP测试平台在本地运行。 切换 经典/工作区 在标题中选择您的工作流。 使用 模特徽章 在报头中切换LLM提供者；这 ⚙️ 设置 按钮处理模型/身份验证调优。

______________________________________________________________________

🆚 为什么不直接使用Claude Desktop或ChatGPT？

______________________________________________________________________

🧭 两种布局：经典+工作区

经典模式 保留熟悉的侧边栏+标签，以便集中精力工作。\ 工作区模式 将每个工具变成无限画布上的可拖动面板：

• 径向菜单 添加面板（右键单击）
• 快速访问栏 用于快速面板聚焦
• 缩放、平移、迷你地图、适合所有人
• 命令选项板 （Ctrl+K/Ctrl+Shift+P）
• 工作区会话 + 出口/进口 捆绑包

______________________________________________________________________

🎨 亮点：高级测试与调试套件

🐛 工作流调试器

使用专业调试工具调试复杂的工作流程：

• 断点调试 -在任何节点暂停执行
• 步进模式 -一次执行一个节点
• 计量检验 -查看输入、输出和上下文
• 会话管理 -暂停、恢复、步进或中止

✨ AI工作流生成器

从自然语言目标生成工作流：

• 工具感知提示 -使用连接的MCP工具作为上下文
• 一键生成 -创建可编辑和运行的工作流
• 适用于工作区和经典模式
• 飞行前验证 -执行前捕获丢失的工具参数和无效的JSON

📦 工作流导出

将可视化流转换为可运行的脚本：

• Python（mcp SDK） 和 Node.js（mcp SDK）
• 工具调用+变量替换 融入
• 可共享的 CI或文档的自动化

🔍 高级检查员

三种强大的新测试工具：

• 📊 时间线 -所有JSON-RPC消息的时序日志
• 🧪 总体试验 -使用多个输入（并行/顺序）执行工具
• 🔥 批量测试热图 -可视化跨输入的延迟分布+使用热图数据导出JSON
• 🎬 模糊失败→ 场景 -将失败案例保存为可回放的场景
• 📚 故障数据集 -将批量测试失败存储为数据运行的数据集行
• 🔀 差异 -与相似性评分并排比较
• 🌐 跨服务器快照 -跨服务器和差异输出运行一个工具
• 🧭 矩阵向导 -在运行差异之前选择服务器+常用工具过滤器
• 🌐 一键矩阵 -从检查器响应跨服务器运行工具
• 🕘 历史→ 矩阵 -直接从过去的运行中启动跨服务器比较
• 🧪 模式模糊 -从工具模式生成边缘案例输入
• 🔍 已解决的预览 -执行前查看变量替换
• 🔐 按请求授权覆盖 -用于OpenAPI代理工具的承载器/基本/API密钥+头/查询重写
• 🔐 OAuth设置UI -在不接触config.yaml或.env的情况下配置OAuth提供程序（包括测试OAuth按钮）

📋 合约测试

MCP服务器的消费者驱动合同测试：

• 定义合同 -指定预期的工具行为
• 多个断言 -模式、包含、等于、响应时间、自定义
• 自动生成 -从工具模式生成合同
• 版本跟踪 -跟踪合同随时间的变化
• 架构监视 -实时漂移检测，可选背景检查
• 模式CI门 -一键基线导出+CI更改命令失败

📊 工具浏览器和分析

实时使用统计和性能指标：

• 使用跟踪 -呼叫、成功率、每个工具的延迟
• 性能指标 -p50/p95/p99潜伏期跟踪
• 错误监控 -每个工具最近的错误
• 服务器健康徽章 -已连接/失败/未连接详细信息+重试
• 排行榜 -跨服务器使用最多的工具
• 健康仪表盘 -全系统健康概览
• 襟翼雷达 -突出显示故障或延迟抖动增加的工具
• 襟翼警报 -工具可靠性的基线+回归检查

📚 文档生成器

在几秒钟内发布MCP服务器文档：

• Markdown/HTML/JSON
• 工具+模式+示例
• 可共享文档包

⏱️ 监视器和性能

关注质量和延迟：

• 计划监视器 有通过/失败历史记录
• 性能选项卡 p50/p95/p99及其发展趋势
• 健康检查仪表板

🧭 工作区模式

使用浮动面板构建自己的测试驾驶舱：

• 快速添加面板 -径向菜单+快速访问栏
• 画布控件 -缩放、平移、迷你地图、适合所有人
• 命令选项板 -Ctrl+K/Ctrl+Shift+P
• 会话+捆绑包 -保存/恢复布局，导出/导入JSON
• 模板 -保存和重用工作区预设

______________________________________________________________________

🎨 可视化MCP服务器生成器

无需编写样板代码即可创建生产就绪的MCP服务器！

• 🎨 可视化工具设计器 带参数和类型
• 🧾 OpenAPI导入 （JSON+YAML）从API规范中自动创建工具（路径+webhook）
• 🛰️ OpenAPI代理模式 -生成调用真实API的可运行MCP服务器
• 📦 项目捆绑导出 -从生成器下载准备运行的MCP服务器文件夹
• 🗜️ ZIP导出 -一键运行的项目存档
• 🧪 在工作室测试 -复制config+打开Add Server以快速连接生成的MCP
• ✅ 引导式测试流程 -分步运行命令+所需工作目录
• 🚀 运行和连接（自动） -Studio编写一个临时项目文件夹并为您连接它（Python自动运行需要 mcp 已安装）

- 如果设计器中还没有工具，则提示导入选定的OpenAPI端点 - 自动为服务器名称添加后缀，以避免破坏现有配置（例如。 my-mcp-server-auto-7f3a)

• 📂 保存到文件夹 -将项目文件直接写入本地文件夹（支持的浏览器）
• 🔐 身份验证映射 -OpenAPI安全方案流入MCP工具元数据
• 🌐 HTTP提示 -导入的端点通过工具注释携带只读/破坏性提示
• 🧭 服务器URL+标签 -从规范服务器\[\]中选择基本URL，并按标签批量选择端点
• ⭐ OpenAPI加载器示例 -单击Petstore探索工作流程
• 🐍 Python（mcp SDK） 和📦 Node.js（TypeScript） 代码生成
• ⚡ 复制到剪贴板或立即下载
• 🔧 非常适合原型制作和MCP教学

______________________________________________________________________

🎯 完美适合

• 🔧 MCP服务器开发人员 -无需手动点击即可测试您的工具
• 🤖 AI应用构建者 -比较GPT-4、Claude和Llama在相同任务上的表现
• 🏢 企业团队 -共享测试场景和环境
• 🐛 调试 -发生故障时查看原始MCP协议消息
• 📚 学习MCP -可视化工具设计器教授协议结构

______________________________________________________________________

✨ 为什么选择MCP聊天室？

• 🎯 专为MCP开发而设计 -无需编写代码即可测试和调试MCP服务器
• 🔧 9个法学硕士提供者+定制 -Ollama、OpenAI、Claude、Gemini、Azure、Groq、Together AI、OpenRouter+Custom
• 🧠 Ollama模型拣选机 -本地安装型号的UI下拉列表（自动检测）
• 🔄 提供商切换器 -从模型徽章中交换LLM，并在一个地方管理可见的提供者
• 🧭 工作室助理 -浮动帮助聊天，了解您当前的面板/布局，具有停靠+弹出模式、快速操作、常见问题回退和拖放OpenAPI导入

- 命令列表+最近的命令芯片+安全确认+工作区构建器（添加/关闭/调整大小/排列面板、会话、导出/导入） - 粘贴OpenAPI URL/JSON或上传规范以自动导入生成器 - 自动操作按钮 生成+测试 进口后立即 - 可调整大小的面板，带有停靠、弹出和尺寸切换

• 💬 智能聊天导入 -在主聊天中粘贴OpenAPI URL/JSON可以导入Generator
• 🧪 测试场景 -记录、回放和验证工具执行
• 🎬 历史→ 场景 -将真实的工具调用转化为可回放的测试流
• 🔁 重新运行+差异 -执行任何过去的工具调用并立即比较输出
• 🌐 矩阵运行 -在具有基线差异的多个服务器上执行相同的场景
• 📊 数据运行 -针对JSON数据集回放场景
• 📚 数据集库 -为场景保存可重用的数据表
• 🔐 用户界面中的OAuth -从应用程序配置身份验证提供程序和基于会话的服务器
• 🎬 模糊失败→ 场景 -将批量测试失败转化为可回放的场景
• 🌐 跨服务器快照 -比较服务器间的实时工具输出
• ⚡ 襟翼雷达 -使用实时故障+抖动信号发现片状工具
• 🚨 襟翼警报 -根据保存的可靠性基线检测回归
• 📚 收集和运行报告 -批处理场景、运行迭代、导出JSON/JUnit+CI门
• ⭐ 黄金基线 -标记值得信赖的跑步记录，并与他们进行比较
• 📸 运行快照 -确定性回放+对集合的漂移检查（导出/导入）
• 🚦 漂流门 -导出CI的通过/失败门摘要
• 🧭 工作区模式 -浮动面板、缩放、迷你地图和命令调色板
• 📊 响应困难 -语义JSON与颜色编码变化的比较
• 📋 模式验证 -使用自动推断模式进行合约测试
• 🔔 架构监视 -检测连接服务器之间的实时架构漂移
• 📦 工作流导出 -从工作流生成Python或Node.js脚本
• 📚 文档生成器 -一键发布MCP文档
• 📦 项目捆绑 -导出/导入完整的测试设置（集合、模拟、envs）
• 🔍 自定义断言 -14个支持JSONPath的运算符
• 🔍 低级调试 -用于原始MCP协议检查的检查器选项卡
• 🐳 生产就绪 -Docker支持、CI/CD、安全强化
• 💡 零配置启动 -与Ollama开箱即用，不需要API密钥
• 🎨 漂亮的UI -具有暗/亮主题的现代玻璃造型设计

______________________________________________________________________

📸 截图

Click to view more screenshots

浅色模式

Light Mode

添加MCP服务器

Add Server

工具检查器（低级调试）

Inspector

工具测试

Test All Tools

键盘快捷键

Shortcuts

______________________________________________________________________

🚀 特性

💬 多提供商LLM聊天

• 奥拉玛 -本地法学硕士（llama3、mistral、qwen等）
• 开放人工智能 -GPT-4o、GPT-4、GPT-3.5
• 人类 -克劳德3.5，克劳德3
• 谷歌双子座 -Gemini Pro，Gemini Flash
• Azure OpenAI -企业Azure部署
• 格罗克 -超快速推理（Mixtral，LLaMA）
• 一起AI -开源模型
• 自定义LLM -具有可选OAuth令牌获取的OpenAI兼容端点
• 实时流媒体 具有打字效果

🔧 MCP工具管理

• 动态服务器管理 -在运行时添加/删除服务器
• STDIO和SSE运输 支持
• 环境变量 -配置API密钥，每个服务器的URL
• 导入YAML/JSON -从文档中粘贴配置
• 配置预览 -添加前查看生成的配置

🧪 工具测试

• 测试所有工具 -烟雾测试所有连接的工具
• 响应预览 -查看每个工具返回的内容
• 时机 -测量工具响应时间
• 安全模式 -跳过有风险的工具（单击、键入、启动）
• 错误检测 -使用MCP isError 领域

🔧 检查器选项卡（低级调试）

• 手动工具执行 -使用自定义参数调用任何工具
• 自动生成的表单 -JSON模式中的输入字段
• 协议日志 -查看原始MCP请求/响应JSON
• SSE事件查看器 -SSE传输的实时服务器事件
• 资源/提示API -完全支持MCP协议
• 时间线 -带过滤功能的JSON-RPC消息日志
• 批量测试 -使用输入数组执行工具
• Diff工具 -并列结果比较，相似度%

🐛 工作流调试器

• 断点调试 -在任何工作流节点上设置断点
• 逐步执行 -一次执行一个节点的工作流
• 计量检验 -查看所有上下文、输入和输出
• 暂停/恢复/中止 -完全执行控制
• 调试会话 -多个并发调试会话
• 执行日志 -节点执行的完整历史记录
• 11 API终点 -用于调试的完整REST API

📋 合同测试套件

• 定义合同 -基于JSON的合约定义
• 模式断言 -验证响应结构
• 响应时间限制 -性能SLA
• 自定义断言 -带运算符的基于路径的查询
• 自动生成 -从工具模式创建合约
• 架构监视 -实时漂移检测，可按需或自动检查
• 版本跟踪 -合同版本控制和更新
• CRUD API公司 -完整的合同生命周期管理
• 测试报告 -详细的通过/失败错误消息

📊 工具浏览器和分析

• 使用统计 -总通话次数、成功/失败率
• 性能指标 -p50/p95/p99潜伏期百分位数
• 错误追踪 -每个工具最后10个错误
• 排行榜 -跨服务器使用最多的工具
• 健康仪表盘 -全系统健康概览
• 趋势分析 -随时间变化的使用模式
• 自动跟踪 -零配置使用记录
• 导出统计数据 -用于报告的CSV/JSON导出

📤 配置导出/导入

• 出口 -将配置下载为YAML
• 导入 -从YAML/JSON文件加载配置
• 团队共享 -跨机器共享配置

🧪 测试场景（记录/回放）

• 录制 -点击“🔴 开始录制”以捕获工具执行
• 步骤捕捉 -记录工具名称、参数、响应、计时、模式
• 保存场景 -命名并另存为JSON到本地存储
• 历史→ 场景 -一键将最近的工具历史记录转换为场景
• 矩阵运行 -在所有连接的服务器上运行一个场景
• 延迟热图 -一目了然地可视化跨服务器的步骤时间
• 矩阵导出 -将跨服务器结果下载为JSON以供CI或共享
• 数据运行 -提供JSON数据集以回放带有变量的场景
• 数据集库 -保存可重复使用的数据表以便快速回放
• 回放 -运行所有步骤✅/❌/🔶 通过/失败状态
• 出口 -将场景下载为JSON以进行Git/CI集成

📊 响应困难

• 语义对比 -不是原始文本差异，但支持JSON
• 颜色编码 - 🔴 失踪，🟢 补充，🟡 改变，🟠 类型更改
• 并排视图 -模态显示基线与当前
• 突变检测 -标记结构变化
• 历史重新运行 -与过去的任何工具调用进行新的运行比较

📋 模式验证

• 自动推理 -从第一个“良好”响应生成模式
• 合约测试 -根据保存的架构验证响应
• 内联结果 -显示“📋 模式正常“或”📋 N问题”
• 违规详情 -缺少字段、类型不匹配、额外字段
• 架构监视 -在现场测试期间保持基线和表面漂移

🔒 灵活的身份验证

• 钥匙锁 -带PKCE的完整OIDC
• GitHub -OAuth2预设
• 谷歌 -OAuth2预设
• 自定义 -任何具有自定义URL的OAuth2提供程序

🎨 现代用户界面

• 玻璃形态设计 -磨砂玻璃美学
• 黑暗/光明主题 -切换至🌙/☀️
• 工具模式查看器 -查看内联参数详细信息
• 响应布局 -适用于所有屏幕尺寸

⌨️ 键盘快捷键

📊 令牌使用情况显示

• 实时追踪 -每个会话的输入/输出令牌
• 成本估算 -支持8个LLM提供商
• 标题徽章 -点击查看详细明细
• 重置选项 -随时重新开始

🧠 大脑视图

• 执行时间表 -按顺序查看用户/助手/工具事件
• 代币细分 -系统/用户/助手/工具一览
• 清除重置状态 -通过聊天重置时间线和统计数据

🎭 系统提示库

• 5个预设 -默认值，严格编码，JSON验证器，创意作家，工具测试仪
• 自定义提示 -创建并保存您自己的角色
• 快速切换 -聊天面板中的下拉菜单
• 快速经理 -编辑/删除已保存的提示

📦 测试套件

• 组场景 -结合相关测试
• 批量执行 -一次运行整个套件
• 汇总结果 -通过/失败摘要
• 上次跑步追踪 -时间戳和统计信息

🔍 自定义断言

• 14名操作员 -等于、包含、匹配、存在、类型、长度、gt、lt、gte、lte等。
• JSONPath支持 -深度价值获取 $.path.to.value
• 灵活的验证 -超越简单的平等检查

💻 CLI测试运行程序

从命令行运行用于CI/CD集成的集合：

# Run a collection
mcp-test run ./collections/my-collection.json --server http://localhost:3082

# Run with iteration data
mcp-test run ./collections/my-collection.json --data ./datasets/users.json

# JUnit output for CI
mcp-test run ./collections/my-collection.json --reporters junit --export ./reports/junit.xml

# Authenticated run (OAuth/session-based)
mcp-test run ./collections/my-collection.json --session 

🧬 模式回归CI

在CI中捕获工具模式和闸门更改：

# Snapshot current tool schemas
mcp-test schema snapshot --out ./schema-baseline.json

# Compare snapshots and fail on change
mcp-test schema diff ./schema-baseline.json ./schema-current.json --format junit --out ./schema-diff.xml --gate

在UI中，使用 架构监视 根据合同，在现场测试期间自动检测漂移。

🚦 收集运行门（CI）

出口A 门 从任何收集运行报告中删除文件，并在回归时失败CI：

# From the UI: click 🚦 Export Gate to download collection-run-gate.json
node scripts/collection-gate.js ./collection-run-gate.json

🎙️ 模拟录音机（实时捕捉）

记录实时工具调用，并立即将其旋转到模拟服务器中：

• 捕捉 来自检查器的工具调用
• 创建模拟 只需单击一下
• 保持上下文 具有真实的工具模式和输出

🌿 会话分支

• 分叉对话 -分支在任何消息
• 保存快照 -保留对话状态
• 加载分支 -从任何已保存的点继续
• 分行经理 -查看、加载、删除分支

🌍 多环境配置文件

• 开发/分期/生产 -在环境之间切换
• 自动保存配置 -根据环境设置
• 全局+环境变量 -共享和环境范围的变量
• 快速切换 -侧边栏下拉菜单

______________________________________________________________________

📦 安装

先决条件

• Node.js 18+
• npm 或 纱线

快速开始

# Clone the repository
git clone https://github.com/JoeCastrom/mcp-chat-studio.git
cd mcp-chat-studio

# Install dependencies
npm install

# Copy environment template
cp .env.example .env

# Start the server
npm run dev

应用内快速入门

使用 🚀 开始 标题中的按钮打开一个引导清单，该清单将跳转到检查器、场景、集合、合同和生成器。

打开 http://localhost:3082 在您的浏览器中。

______________________________________________________________________

🐳 Docker部署

使用Docker Compose（推荐）

选项1：使用您当地的Olama（默认）

如果您的机器上已经安装了Ollama：

# Start MCP Chat Studio only (uses your local Ollama)
docker-compose up

# Run in background
docker-compose up -d

该应用程序会自动连接到您当地的Ollama，网址为 http://localhost:11434.

选项1b:Lite配置文件（无Python/MCP自动运行）

如果你想要一个没有Generator自动运行的较小容器：

docker-compose --profile lite up mcp-chat-studio-lite

选项2：将Ollama包含在Docker中

如果您没有在本地安装Ollama：

# Start both MCP Chat Studio AND Ollama in Docker
docker-compose --profile with-ollama up

# Run in background
docker-compose --profile with-ollama up -d

服务已启动：

• MCP聊天室：http://localhost:3082
• Ollama（如果使用配置文件）：http://localhost:11434

配置API密钥

# Create .env file or set environment variables
OPENAI_API_KEY=sk-your-key
ANTHROPIC_API_KEY=sk-ant-your-key
GOOGLE_API_KEY=your-google-key

仅使用Docker

# Build image
docker build -t mcp-chat-studio .

# Run with Ollama (default)
docker run -p 3082:3082 mcp-chat-studio

# Run with OpenAI
docker run -p 3082:3082 \
  -e OPENAI_API_KEY=sk-your-key \
  mcp-chat-studio

# Run with custom config
docker run -p 3082:3082 \
  -v $(pwd)/config.yaml:/app/config.yaml:ro \
  mcp-chat-studio

精简版Docker镜像（较小）

如果你不需要 发电机自动运行，使用lite图像：

# Build lite image
docker build -f Dockerfile.lite -t mcp-chat-studio:lite .

# Run lite image
docker run -p 3082:3082 mcp-chat-studio:lite

注意：Lite映像省略了Python/MCP，因此“运行和连接（自动）”被禁用。

持久化工作室数据（推荐）

通过挂载来持久化会话、模拟、监视器、OAuth令牌和日志 data/:

docker run -p 3082:3082 \
  -v $(pwd)/data:/app/data \
  mcp-chat-studio

如果你使用 发电机→ 运行和连接（自动） 在Docker中，也挂载temp项目文件夹：

docker run -p 3082:3082 \
  -v $(pwd)/data:/app/data \
  -v $(pwd)/.mcp-generator:/app/.mcp-generator \
  mcp-chat-studio

注意：Docker镜像包含自动运行所需的MCP Python包。

健康检查

curl http://localhost:3082/api/health

答复：

{
  "status": "ok",
  "mcpServers": {
    "server-name": "connected"
  }
}

______________________________________________________________________

⚙️ 配置

LLM提供商

MCP聊天室支持 9个法学硕士提供者+定制.在中配置 config.yaml 或从UI(⚙️):

UI更改保存在本地 data/llm-config.json （包括可选的身份验证设置）。 API键可以直接在UI中输入（它们保存在同一个文件中）。 .env 仍然支持无头/CI设置。

提供者可见性（可选）

在UI中隐藏每个用户的提供程序，或强制执行服务器允许列表：

# Only show/allow these providers in the UI
LLM_ALLOWED_PROVIDERS=ollama,openai,custom

Ollama（本地-默认）

llm:
  provider: ollama
  model: llama3.2

不需要API密钥。跑 ollama serve.

开放人工智能

llm:
  provider: openai
  model: gpt-4o

# .env
OPENAI_API_KEY=sk-your-key

安thropic克劳德

llm:
  provider: anthropic
  model: claude-3-5-sonnet-20241022

# .env
ANTHROPIC_API_KEY=sk-ant-your-key

谷歌双子座

llm:
  provider: gemini
  model: gemini-1.5-flash

# .env
GOOGLE_API_KEY=your-google-ai-key

Azure OpenAI

llm:
  provider: azure
  model: gpt-4o

# .env
AZURE_OPENAI_API_KEY=your-key
AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com
AZURE_OPENAI_DEPLOYMENT=your-deployment-name

Groq（超快）

llm:
  provider: groq
  model: llama-3.3-70b-versatile

# .env
GROQ_API_KEY=gsk_your-key

一起AI

llm:
  provider: together
  model: meta-llama/Llama-3.3-70B-Instruct-Turbo

# .env
TOGETHER_API_KEY=your-key

自定义（兼容OpenAI）

llm:
  provider: custom
  model: your-model
  base_url: 'https://your-llm.example.com/v1'
  auth:
    type: client_credentials
    auth_url: 'https://your-idp.example.com/oauth/token'
    client_id: '${LLM_CLIENT_ID}'
    client_secret: '${LLM_CLIENT_SECRET}'
    scope: 'scope1 scope2'

自定义端点也适用于承载令牌（set auth.type: bearer 并提供 api_key).\ 在UI中，我们将自动添加前缀 Bearer 如果你粘贴一个原始令牌。 如果您的网关需要额外的标头，请将其设置为 ⚙️ LLM设置→ 额外的身份验证标头.

OpenRouter（100+型号）

通过单个API访问Claude、GPT-4、Gemini、Llama和100多种型号：

llm:
  provider: openrouter
  model: anthropic/claude-3.5-sonnet # or openai/gpt-4o, google/gemini-pro-1.5

# .env
OPENROUTER_API_KEY=your-key
# Get your key at https://openrouter.ai/keys

MCP服务器(config.yaml)

mcpServers:
  my-mcp-server:
    type: stdio
    command: python
    args:
      - -m
      - my_mcp_server
    cwd: /path/to/project
    env:
      API_KEY: '${API_KEY}' # From .env
    description: 'My custom MCP server'
    startup: true # Auto-connect on startup

______________________________________________________________________

🛠️ 添加MCP服务器

通过用户界面（推荐）

1. 点击 +添加 在侧边栏中
2. 填写服务器详细信息：

- 名称：唯一标识符 - 运输：STDIO或SSE - 命令/URL：如何启动/连接 - 参数：命令行参数 - 环境变量：API密钥、URL

1. 预览生成的配置
2. 点击 添加服务器

通过导入

1. 点击 📋 导入YAML/JSON
2. 粘贴您的配置：

command: python
args:
  - -m
  - my_server
env:
  API_KEY: sk-xxx

1. 点击 导入 → 表单自动填充
2. 审查与 添加服务器

______________________________________________________________________

官方MCP服务器

• @模型上下文协议/服务器postgres -PostgreSQL数据库访问
• @模型上下文协议/服务器sqlite -SQLite数据库操作
• @模型上下文协议/服务器松弛 -Slack集成
• @模型上下文协议/服务器谷歌地图 -谷歌地图API

查找更多： MCP服务器目录

______________________________________________________________________

🧪 测试工具

测试所有工具

1. 连接到MCP服务器
2. 点击 🧪 测试所有工具
3. 查看结果：

- ✅ 工具只需最小的输入即可工作 - ⚠️ 工具已响应，但输入验证失败 - ❌ 工具完全失败

危险工具

有些工具有副作用 默认情况下跳过:

• Click-Tool -屏幕点击次数
• Type-Tool -键入文本
• Launch-Tool -打开应用程序
• Drag-Tool, Key-Tool, Shortcut-Tool, Scroll-Tool

检查 ⚠️ 包括危险工具 来测试他们。

响应数据

• 每个测试都显示了 预览 回应
• 点击 📋 复制 复制完整的JSON
• 持续时间 显示响应时间（毫秒）

______________________________________________________________________

🧪 测试场景（高级测试）

测试场景让你 记录、回放和验证 用于回归测试的工具执行。

工作流程

1. RECORD → Execute tools normally, they're saved as baseline
2. REPLAY → Re-run all steps, compare responses
3. ANALYZE → See diffs and schema violations

录制场景

1. 首选 🧪 场景 标签
2. 点击 🔴 开始录制
3. 切换到 🔧 检查员 标签
4. 执行你的工具（每个工具都成为一个步骤）
5. 返回 🧪 场景 标签
6. 点击 ⏹️ 停止录制
7. 名称和 💾 保存 你的场景

每一步都捕捉到：

• 工具名称和服务器
• 使用的参数
• 响应（作为基线）
• 响应哈希（用于快速比较）
• 推断模式（用于合同测试）
• 执行时间

重播场景

1. 在以下位置查找您的场景 已保存的场景
2. 点击 ▶️ 回放
3. 观看结果显示：

- ✅ 通过 -响应与基线匹配 - 🔶 差异 -响应不同（单击“查看差异”） - ❌ 失败 -执行错误 - 📋 模式 -验证结果

响应困难

当显示一个步骤时🔶, 点击 查看差异 查看：

模式验证

每个步骤的响应模式为 自动推断 在录制过程中。重播时：

• 类型检查 -预期 string，得到 number
• 必填字段 -菲尔德当时在场，现在不见了
• 额外字段 -意外的新字段（警告）

结果显示为 📋 架构正常 或 📋 N个问题.

导出场景

• 单身：单击 📦 出口 在一个场景中
• 全部：单击 📦 导出全部
• 格式：JSON（Git版本可控）

📚 集合+运行报告

将多个场景分组，并像Postman集合一样运行它们。

• 添加场景 一键进入收藏
• 迭代运行 +环境变量+重试次数
• CSV/JSON迭代数据 用于数据驱动测试
• 运行历史 只需单击一下即可重新运行
• 运行报告 显示通过/失败+计时
• 回归增量 与之前的运行相比（新故障+恢复）
• 黄金基线 运行以进行可信比较
• 运行快照 用于确定性重放+漂移检查
• 漂移门 导出以进行CI友好的通过/失败检查
• 出口 JSON、JUnit、HTML或完整的运行包
• 从奔跑中模仿 生成离线测试服务器

🧩 前置/后置脚本

• 预请求挂钩 -执行前修改输入
• 发布请求挂钩 -验证或转换输出
• 可重用脚本 -创建、启用/禁用和测试脚本

💬 使用聊天

基本聊天

1. 键入信息并按Enter键
2. LLM响应（如果启用，则使用流媒体）

使用MCP工具

1. 启用 使用MCP工具 复选框
2. LLM可以调用任何连接的工具
3. 工具结果出现在聊天中

流媒体

• 启用 ⚡ 流 用于实时打字效果
• 启用工具时，流媒体功能被禁用（工具需要完全响应）

强制工具模式

1. 点击侧边栏中的工具
2. 点击 力 要求法学硕士使用它
3. 徽章显示哪个工具被强制使用

______________________________________________________________________

🔧 检查器选项卡

检查员提供 低级MCP调试 而不使用LLM。

如何使用

1. 点击 🔧 检查员 标签
2. 选择一个 服务器 从下拉列表中
3. 选择一个 工具 从下拉列表中
4. 填写 参数 （根据架构自动生成）
5. 点击 ▶️ 执行
6. 查看 原始JSON响应

输入类型

身份验证覆盖（OpenAPI代理工具）

对于在 发电机.

1. 切换 🔐 授权覆盖 在检查员
2. 选择 持票人, 基本，或 API密钥
3. 可选择添加 标题JSON / 查询JSON
4. 执行该工具——覆盖信息以如下方式发送 __headers / __query

笔记：

• 身份验证覆盖仅适用于 OpenAPI代理工具 （使用OpenAPI生成器生成）。
• 如果工具不支持替代，检查器将显示警告并忽略替代。
• 重新生成旧的OpenAPI服务器以获得 __headers/__query 支持。

何时使用

• 调试 -没有LLM解释的测试工具
• 发展 -快速迭代工具参数
• 验证 -检查MCP的确切响应

______________________________________________________________________

📁 项目结构

mcp-chat-studio/
├── public/
│   └── index.html        # Single-page UI (HTML + CSS + JS)
├── server/
│   ├── index.js          # Express server entry
│   ├── routes/
│   │   ├── chat.js       # Chat & LLM endpoints
│   │   ├── llm.js        # LLM settings endpoints
│   │   ├── mcp.js        # MCP management endpoints
│   │   └── oauth.js      # OAuth endpoints
│   └── services/
│       ├── LLMClient.js  # Multi-provider LLM client
│       └── MCPManager.js # MCP server manager
├── config.yaml           # MCP server configs
├── .env                  # Environment variables
└── package.json

______________________________________________________________________

🔌 API终点

聊天

主控程序

LLM

______________________________________________________________________

🎨 支持主题

在以下选项之间切换 黑暗 和 光 模式使用🌙/☀️ 标题中的按钮。

主题被保存到本地存储，并在会话之间持续存在。

______________________________________________________________________

🔒 身份验证（可选）

MCP聊天室支持多个OAuth2提供商：

提供商预设

oauth:
  provider: keycloak # or github, google
  client_id: '${OAUTH_CLIENT_ID}'
  client_secret: '${OAUTH_CLIENT_SECRET}'
  redirect_uri: 'http://localhost:3082/api/oauth/callback'

  # Keycloak-specific
  keycloak_url: 'https://your-keycloak/auth'
  keycloak_realm: 'your-realm'

自定义OAuth2提供程序

oauth:
  authorize_url: 'https://provider.com/oauth/authorize'
  token_url: 'https://provider.com/oauth/token'
  userinfo_url: 'https://provider.com/api/userinfo'
  client_id: '${OAUTH_CLIENT_ID}'
  client_secret: '${OAUTH_CLIENT_SECRET}'
  scopes: ['openid', 'profile', 'email']
  use_pkce: true # false for legacy providers

环境变量

OAUTH_CLIENT_ID=your-client-id
OAUTH_CLIENT_SECRET=your-secret
OAUTH_AUTHORIZE_URL=https://...  # For custom providers
OAUTH_TOKEN_URL=https://...
OAUTH_DISABLE_SSL_VERIFY=true    # Dev only (self-signed/internal PKI)
MCP_SANDBOX_ENGINE=vm2           # Optional: set to isolated-vm if installed

点击 登录 以进行身份验证。

______________________________________________________________________

🔐 安全最佳实践

安全环境变量

脚本执行

脚本执行（请求前/请求后脚本、JavaScript工作流节点）是 默认情况下禁用 为了安全。要启用：

ENABLE_SCRIPTS=true npm run dev

网络绑定

默认情况下，服务器绑定到 127.0.0.1 （仅限本地主机）。要暴露于所有网络接口：

HOST=0.0.0.0 ALLOW_REMOTE=true npm run dev

如果发生以下情况，服务器将拒绝启动 HOST=0.0.0.0 没有 ALLOW_REMOTE=true 以防止意外暴露。

重要安全注意事项

• ⚠️ 永不承诺 .env 文件 -包含API密钥和机密
• ⚠️ 使用环境变量 -所有的秘密都应该在 .env 或环境
• ⚠️ SSL验证已启用 -仅对dev/自签名证书禁用（UI切换或 OAUTH_DISABLE_SSL_VERIFY=true)
• 🔐 OAuth令牌存储 -设置 OAUTH_TOKEN_KEY 将加密的令牌持久化 data/oauth-tokens.json （仅在未设置时使用内存）。使用Redis/DB进行多用户生产。
• ⚠️ 沙盒发动机 -默认为 isolated-vm 安装后（回退到vm2）。集 MCP_SANDBOX_ENGINE 以覆盖。
• 🔑 LLM API密钥（UI） -已在服务器端保存 data/llm-config.json 当输入时⚙️ LLM设置（非本地存储）。对于自定义承载身份验证，UI自动前缀 Bearer 如果你粘贴一个原始令牌。使用 .env 无头/CI。
• 🔒 CSRF保护 -浏览器请求需要 X-CSRF-Token （UI会自动添加）。CLI请求没有 Origin 标题是允许的。
• 📝 审核日志记录 -安全相关事件被写入 data/audit.log.
• 💾 服务器端会话 -聊天会话/工具历史记录同步到 data/sessions.json （绑在 sessionId 饼干）。
• 🧼 HTML净化 -DOMPurify在安装时使用（回退allowlist消毒剂）。
• 🔗 会话共享链接 -通过设置共享当前会话→ “共享”（导入会话快照的一次性链接）。

为了发展

# .env (local development)
OPENAI_API_KEY=sk-your-key
ANTHROPIC_API_KEY=sk-ant-your-key

# Disable SSL verify only for internal/self-signed certs
OAUTH_DISABLE_SSL_VERIFY=true

用于生产

# Use secure environment variables
export OPENAI_API_KEY="sk-your-key"
export ANTHROPIC_API_KEY="sk-ant-your-key"

# Never disable SSL verification in production
# OAUTH_DISABLE_SSL_VERIFY should NOT be set

# Use Redis for OAuth tokens (multi-instance deployments)
# Modify server/services/OAuthManager.js to use Redis instead of Map

MCP服务器安全

• 文件系统服务器： 仅授予对特定目录的访问权限
• 数据库服务器： 尽可能使用只读凭据
• API密钥： 存储于 .env，从来没有 config.yaml
• 网络服务器（SSE）： 使用HTTPS和身份验证

什么是安全的承诺

✅ 安全：

• config.yaml.example
• .env.example
• 源代码
• 文档

❌ 切勿承诺：

• .env （实际凭证）
• config.yaml （可能包含秘密）
• API密钥或令牌
• 证书或私钥

______________________________________________________________________

❓ 常见问题

通用

Q： 我可以同时使用多个MCP服务器吗？ A： 是的！添加任意数量。工具被自动命名（例如。， github__get_issue, filesystem__read_file)以防止冲突。

Q： 我需要API密钥才能启动吗？ A： 不！在当地使用Ollama（免费，无需钥匙）。API密钥仅适用于OpenAI、Anthropic等云LLM提供商。

Q： 我可以使用自己的MCP服务器吗？ A： 当然！通过UI添加或编辑 config.yaml支持STDIO和SSE传输。

Q： 这在Windows上有效吗？ A： 是的！适用于Windows、macOS和Linux。对于Windows，使用PowerShell或Git Bash命令。

用法

Q： 如何在没有聊天的情况下测试工具？ A： 使用 检查员 选项卡直接调用工具，而不涉及LLM。非常适合调试和测试。

Q： 为什么我不能使用流媒体工具？ A： LLM需要完整的响应来决定调用哪些工具。启用工具时，流媒体会自动禁用。

Q： 什么是“风险工具”？ A： 有副作用的工具（点击、打字、启动应用程序）。默认情况下，在“测试所有工具”中跳过它们，以防止不必要的操作。

Q： 如何切换LLM提供商？ A： 点击 ⚙️ 设置 → 更改供应商和型号→ Save.更改立即生效。

MCP服务器

Q： STDIO和SSE有什么区别？ A. 工作室 作为子进程在本地运行。 上海证券交易所 通过HTTP连接到远程服务器。本地工具使用STDIO，网络服务使用SSE。

Q： MCP服务器可以看到我的API密钥吗？ A： 只有当你通过环境变量显式传递它们时。每台服务器只能看到您为其配置的环境变量。

Q： 我的MCP服务器无法连接。发生了什么？ A： 检查：

1. 命令/路径正确
2. 已安装必需的依赖项(npm install -g ...)
3. 环境变量集
4. 服务器登录浏览器控制台（F12）

Q： 我可以使用具有不同配置的同一MCP服务器吗？ A： 是的！使用不同的名称和配置多次添加它。例如， github-personal 和 github-work 使用不同的代币。

发展

Q： 如何添加新的LLM提供者？ A： 编辑 server/services/LLMClient.js。参见 贡献.md 了解详情。

Q： 我可以贡献新功能吗？ A： 是的！我们欢迎捐款。看 贡献.md 作为指导方针。

Q： 是否有用于自动化的API？ A： 是的！请参阅 API终点 部分。所有功能都可以通过REST API访问。

______________________________________________________________________

🐛 故障排除

MCP服务器无法连接

1. 检查命令/路径是否正确
2. 验证环境变量
3. 在控制台中检查服务器日志
4. 尝试手动运行该命令

LLM没有回应

1. 检查中的提供程序设置⚙️ 设置
2. 确认Ollama正在运行(ollama serve)
3. 检查OpenAI的API密钥

工具显示⚠️ 警告

这意味着工具 回应 但是我们的虚拟测试输入无效。这个工具正在工作——它只需要适当的论据。

______________________________________________________________________

📜 许可证

MIT许可证-可以自由使用和修改。

______________________________________________________________________

🤝 贡献

我们欢迎社区的贡献！无论是bug修复、新功能、文档改进还是示例，所有贡献都将受到赞赏。

如何做出贡献

1. 叉子 存储库
2. 克隆 你的叉子： git clone https://github.com/YOUR_USERNAME/mcp-chat-studio.git
3. 创建分支: git checkout -b feature/amazing-feature
4. 进行更改 并进行彻底测试
5. 格式代码: npm run format
6. Lint 代码: npm run lint
7. 提交: git commit -m 'feat: add amazing feature'
8. 推: git push origin feature/amazing-feature
9. 打开拉取请求

贡献指南

请阅读 贡献.md 用于：

• 代码风格指南
• 提交消息约定
• 测试要求
• 拉取请求流程

发现Bug了吗？

提出问题 与：

• 清晰的描述
• 重现步骤
• 预期行为与实际行为
• 屏幕截图（如适用）
• 环境详细信息（操作系统、节点版本等）

想要功能？

在这里申请 与：

• 用例描述
• 提议的解决方案
• 考虑的替代方案

快速贡献想法

• 🐛 修复来自的错误 问题
• 📚 改进文档
• 🧪 添加测试
• 🎨 改进UI/UX
• 🔌 添加新的LLM提供程序
• 📦 创建示例MCP服务器
• 🌐 添加翻译

______________________________________________________________________

🙏 致谢

• 由...创建 优素福·加齐
• 内置于 模型上下文协议
• 受到MCP社区的启发
• 感谢所有贡献者！

______________________________________________________________________

内置于❤️ 由Youssef Ghazi为MCP开发人员撰写