远程MCP服务器
模型上下文协议（MCP）服务器 融洽 -使像Claude这样的AI代理能够创建和修改视觉画布。
特性
- 🎨 画布操作 -读取和修改SVG画布
- 🔍 元素查询 -使用CSS选择器查找特定元素
- 📝 模板和指南 -获取全面的编辑说明
- 🛡️ 安全验证 -内置XSS和脚本注入防御
- 🔐 OAuth身份验证 -无缝的基于浏览器的登录流程（适用于远程服务器！）
安装
选项1：使用克劳德代码（推荐）
# Install from npm
claude mcp add rapport-mcp
# Or use npx (no install required)
claude mcp add npx rapport-mcp
# Or for local development
claude mcp add npx /path/to/rapport-mcp选项2：全局npm安装
npm install -g rapport-mcp选项3：与npx一起使用（无需安装）
# No installation needed - npx will run it on demand
npx rapport-mcp login快速开始
1.身份验证
rapport-mcp login这将：
- 生成安全会话ID
- 打开浏览器到rapport.dev
- 登录（或使用现有会话）
- 自动检测您何时通过身份验证
- 在本地保存您的身份验证令牌
- 你准备好了！
2.配置您的AI客户端
克劳德代码
如果您使用过，则已完成 claude mcp add！否则：
claude mcp add rapport-mcp适用于克劳德桌面
添加到您的 claude_desktop_config.json:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json Linux: ~/.config/claude/claude_desktop_config.json
选项A：全局安装
{
"mcpServers": {
"rapport": {
"command": "rapport-mcp",
"args": []
}
}
}选项B：使用npx（无需安装）
{
"mcpServers": {
"rapport": {
"command": "npx",
"args": ["-y", "rapport-mcp"]
}
}
}方案C：地方发展
{
"mcpServers": {
"rapport": {
"command": "npx",
"args": ["-y", "/path/to/rapport-mcp"]
}
}
}3.重新启动AI客户端
就是这样！Claude现在可以与您的Rapport画布进行交互。
可用工具
get_svg
获取画布的SVG文档和元数据。
{
"include_metadata": true // optional
}备注：自动使用经过身份验证的用户帐户-不需要项目ID！
get_canvas_template
获取修改画布的全面指南。 先用这个 在做出改变之前！
{}update_svg
用新的SVG内容更新画布。包括自动安全验证。
{
"svg_document": "...",
"skip_validation": false // optional, NOT recommended
}query_elements
使用CSS选择器在画布中查找元素。
{
"selector": "rect[fill='blue']"
}CLI命令
# Authenticate with Rapport
rapport-mcp login
# Check authentication status
rapport-mcp status
# Clear authentication
rapport-mcp logout安全
- ✅ 基于OAuth的自动轮询身份验证（无需手动复制令牌！）
- ✅ 在没有本地主机依赖关系的远程服务器上工作
- ✅ 代币安全存储在
~/.rapport-mcp/config.json - ✅ 基于会话的流，具有自动过期功能
- ✅ 自动XSS和脚本注入预防
- ✅ 行级安全（RLS）强制项目所有权
- ✅ 全面的SVG验证
运作原理
- 用户运行
rapport-mcp login - CLI生成唯一的会话ID
- 浏览器打开到rapport.dev进行身份验证
- 登录后，rapport.dev在服务器端存储链接到会话的令牌
- CLI自动轮询身份验证完成情况
- 完成后，令牌保存到
~/.rapport-mcp/config.json - MCP服务器使用带有Supabase RLS的令牌
- 只有用户自己的项目可以访问
远程服务器友好：不需要localhost回调-通过SSH在远程服务器上完美工作！
Claude使用示例
“获取我的画布，并在中心添加一个蓝色矩形”
克劳德将：
- 使用
get_canvas_template了解结构 - 使用
get_svg获取当前画布 - 修改SVG以添加矩形
- 使用
update_svg保存更改
发展
# Clone the repository
git clone https://github.com/MicahBly/rapport-mcp.git
cd rapport-mcp
# Install dependencies
npm install
# Build
npm run build
# Test locally
node dist/cli.js login故障排除
“未通过身份验证”错误
跑 rapport-mcp login 以进行身份验证。
“未找到项目”
确保您使用拥有该项目的正确帐户登录。
“SVG验证失败”
SVG包含不安全的内容（脚本、事件处理程序）。有关详细信息，请查看错误消息。
OAuth身份验证超时
5分钟后，身份验证流程超时。如果发生这种情况：
- 确保您可以从浏览器访问rapport.dev
- 浏览器打开后立即完成身份验证
- 检查您的互联网连接
- 试着跑步
rapport-mcp login再次
链接
许可证
MIT©即时独角兽
贡献
欢迎投稿！请随时提交拉取请求。