/ 目录 / 演练场 / scira-mcp-chat
● 社区 zaidmukaddam ⚡ 即开即用

scira-mcp-chat

作者 zaidmukaddam · zaidmukaddam/scira-mcp-chat

一个极简开源的 MCP 客户端 web 应用 — 自带 LLM,通过 UI 添加 MCP 服务器,开始聊天。

scira-mcp-chat 是一个 Next.js 网页聊天界面,充当 MCP 客户端。通过 Vercel AI SDK 流式传输响应(支持多个提供商),通过设置面板添加 MCP 服务器(HTTP 或 SSE),获得一个简洁的 shadcn/ui 界面。与 Composio、Zapier 或 Hugging Face 等托管的 MCP 提供商搭配良好。

为什么要用

核心特性

实时演示

实际使用效果

scira-mcp-chat.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "scira-mcp-chat",
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "scira-mcp-chat": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "scira-mcp-chat"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add scira-mcp-chat -- npx -y scira-mcp-chat

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: scira-mcp-chat

为你的团队自托管一个 MCP 聊天 UI

👤 希望拥有类似 ChatGPT 用户体验及工具的小团队 ⏱ ~60 min intermediate

何时使用: 你想要具有 MCP 工具的内部聊天,而无需为 Claude Pro / ChatGPT Team 按座位付费。

前置条件
  • Node 20+ 和 Postgres — Vercel / Docker / 自托管
  • LLM API 密钥 — 至少一个 OpenAI / Anthropic / Google 的密钥
步骤
  1. 克隆和部署
    指引我在 Vercel 上通过 Supabase 自托管 scira-mcp-chat 和 Postgres。✓ 已复制
    → 已部署的 URL + DB 已连接
  2. 添加 MCP 服务器
    在设置 UI 中,添加 Composio 的 Slack + GitHub HTTP 端点。✓ 已复制
    → 工具在聊天中可见
  3. 与团队分享
    我怎样才能在基本身份验证或 SSO 后面放置它?✓ 已复制
    → Next-Auth 或代理配置建议

结果: 一个带有工具的私有聊天 UI,比按座位计费的 SaaS 便宜得多。

注意事项
  • 密钥按用户存储还是全局存储?取决于你的 fork — 在放入真实凭据前,检查认证/设置流程

无需编辑配置文件即可尝试许多 MCP 服务器

👤 MCP 爱好者 / 评审人员 ⏱ ~30 min beginner

何时使用: 你想在这个周末评估 10 个不同的 MCP 服务器,而无需反复修改 Claude Desktop 配置。

步骤
  1. 逐个添加服务器
    在设置 UI 中,粘贴你想尝试的每个 MCP 服务器的 HTTP/SSE URL。✓ 已复制
    → 工具列表实时更新
  2. 逐个测试
    使用工具 X 和输入 Y。报告回来。✓ 已复制
    → 调用和响应可见

结果: 快速的 MCP 评估,无需重启周期。

注意事项
  • 仅限 stdio 的 MCP 无法直接使用 — 通过 stdio-to-HTTP 桥包装它们,或通过托管它们的 Smithery 运行

组合

与其他 MCP 搭配,撬动十倍杠杆

scira-mcp-chat + filesystem + fetch + github

自制 Claude Desktop 替代品

在设置中添加 filesystem(通过 HTTP 包装器)、fetch 和 github MCP。用作日常驱动。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
(web UI) Natural chat 这是聊天 UI 本身 — 不是从另一个客户端调用的 MCP LLM provider cost

成本与限制

运行它的成本

API 配额
你的 LLM 提供商的速率限制
每次调用 Token 数
传递给模型的 token
费用
自托管 = 仅基础设施成本。LLM = 按使用付费。MCP 提供商(Composio 等)有自己的层级。
提示
使用 DeepSeek 或 Gemini Flash 作为团队聊天的默认模型 — 比 GPT-4 便宜 10-100 倍。

安全

权限、密钥、影响范围

凭据存储: API 密钥在环境变量中(自托管)或用户设置中(多用户模式)
数据出站: 你的 LLM 提供商 + 你添加的任何 MCP 服务器
切勿授予: 不要授予未经身份验证的公共部署 — 你的 LLM 密钥会被耗尽

故障排查

常见错误与修复

构建在部署时失败

Next.js 版本不匹配 — 使用 .nvmrc 中的 Node 版本。

验证: node --version
添加了 MCP 服务器,但没有工具出现

传输不匹配。HTTP URL 必须返回 MCP 握手;SSE URL 必须保持流打开。

验证: curl the URL and inspect
DB 连接错误

DATABASE_URL 格式:postgres://user:pass@host:5432/db?sslmode=require

验证: psql $DATABASE_URL

替代方案

scira-mcp-chat 对比其他方案

替代方案何时用它替代权衡
LibreChat你想要一个更成熟、功能更丰富的聊天 UI更重;通过插件支持 MCP
Open WebUI你想要原生 MCP 0.6.31+ 支持和 Ollama 集成更复杂但功能齐全
Claude Desktop / Claude Code你只使用 Anthropic 并且想要零基础设施付费;单用户

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills