如何使用远程 MCP
远程 MCP 已升级
本文档描述的是新版远程 MCP。服务能力与工具范围已升级，配置方式见下方说明。
兼容说明： 若你仍使用旧版连接配置，在完成 OAuth 授权 后，仍可正常连上新版远程 MCP。
建议优先按本文档中的新版方式接入（ OAuth 2.1 授权），以便获得完整能力与后续更新支持。工具范围变化请同时参阅 工具与指令。
远程 MCP 运行在 Pixso 云端服务器上，无需打开 Pixso 网页端即可使用。支持通过 OAuth 2.1（推荐） 或访问令牌进行身份验证，即可在各类 Agent 工具中接入 Pixso 远程 MCP 服务。
Pixso 远程 MCP 服务器地址为： https://pixso.cn/mcp
适用范围
本文档中的远程 MCP 地址仅支持 公网用户 使用。
私有化用户 配置时请以实际环境的 内网域名 作为远程服务器地址，不要直接使用上方公网地址。
第一步：配置
远程 MCP 支持两种配置方式。推荐优先使用方式一：OAuth 2.1；也可按需使用访问令牌。
兼容说明
只要 IDE / Agent 支持 Streamable HTTP，即可接入 Pixso 远程 MCP，不限于下方列出的产品。
方式一：OAuth 2.1（推荐）
仅填写服务器地址，客户端会引导完成授权登录，无需手动填写令牌：
{
"mcpServers": {
"pixso-oauth-mcp": {
"url": "https://pixso.cn/mcp"
}
}
}方式二：访问令牌
先获取个人访问令牌：
- 在 Pixso 工作台界面，点击右侧用户头像，选择 "用户中心"，找到 "个人访问令牌"
- 点击 "生成令牌"，并将生成的令牌复制一次，妥善保存
再在配置中填写服务器地址和个人访问令牌：
{
"mcpServers": {
"pixso-oauth-mcp": {
"url": "https://pixso.cn/mcp",
"token": "xxxx"
}
}
}注意
访问令牌是您访问 Pixso 远程 MCP 的凭证，请妥善保管。如果令牌泄露，请及时重新生成。
令牌仅在首次生成时可以复制完整内容，如果忘记，需要重新生成。
Claude Code (CLI)
在终端中执行以下命令快速配置：
OAuth 2.1 方式（推荐）：
claude mcp add --transport http pixso-oauth-mcp https://pixso.cn/mcp访问令牌方式：
claude mcp add --transport http pixso-oauth-mcp https://pixso.cn/mcp --header "Token:个人访问令牌"Codex / ChatGPT
手动配置
OAuth 2.1 授权登录（推荐）
- 打开 Codex 左下角账号菜单，进入 设置：
- 在 集成 → 插件 中切换到 MCP，点击 + 添加服务器：
- 选择类型为 流式 HTTP，填写名称，并将 URL 设置为
https://pixso.cn/mcp后保存：
- 保存后，MCP 服务器显示需要认证，点击连接 / 认证后，客户端会引导完成授权登录，确认授权后即可使用 Pixso 远程 MCP
Cursor
打开 Cursor -> Settings -> MCP Tools。
点击 New MCP Server。
名称可自定义（如
pixso-oauth-mcp）。编辑
mcp.json文件，按需添加以下配置之一：OAuth 2.1 方式（推荐）：
json{ "mcpServers": { "pixso-oauth-mcp": { "url": "https://pixso.cn/mcp" } } }访问令牌方式：
json{ "mcpServers": { "pixso-oauth-mcp": { "url": "https://pixso.cn/mcp", "token": "用户个人访问令牌" } } }保存后，当
pixso-oauth-mcp状态为绿色，表示连接成功；红色表示故障，不可用。若使用 OAuth 2.1，首次连接时请按客户端提示完成授权。
VS Code
VS Code 原生 MCP 的配置结构与其他 IDE 不同，使用 servers 字段而非 mcpServers。远程 MCP 支持两种配置方式，任选其一即可。
手动配置
方式一：OAuth 2.1 授权登录（推荐）
- 打开 VS Code -> 管理 -> 配置文件 -> 双击 MCP 服务器
- 添加如下内容并保存：
{
"servers": {
"pixso-oauth-mcp": {
"url": "https://pixso.cn/mcp"
}
}
}方式二：访问令牌连接
- 在 Pixso 工作台界面，点击右侧用户头像，选择 用户中心，找到 个人访问令牌
- 点击 生成令牌，并将生成的令牌复制一次，妥善保存
- 打开 VS Code -> 管理 -> 配置文件 -> 双击 MCP 服务器
- 添加如下内容并保存：
{
"servers": {
"pixso-oauth-mcp": {
"url": "https://pixso.cn/mcp",
"token": "访问令牌"
}
}
}保存后启动 MCP。若使用 OAuth 2.1，客户端会引导完成授权登录，确认授权后即可使用 Pixso 远程 MCP。
Trae IDE
Trae v1.3.0 及以上版本原生支持 MCP。
- 打开 trae -> Settings -> MCP-> 手动添加。
在配置文件中按需添加以下配置之一：
OAuth 2.1 方式（推荐）：
json{ "mcpServers": { "pixso-oauth-mcp": { "url": "https://pixso.cn/mcp" } } }访问令牌方式：
json{ "mcpServers": { "pixso-oauth-mcp": { "url": "https://pixso.cn/mcp", "token": "用户个人访问令牌" } } }保存文件，连接成功后即可在 Trae 对话中使用。
Kiro
Kiro 也支持通过 MCP 连接外部工具：
- 打开kiro，打开一个文件夹（任意文件夹、空文件夹也可以）
- 点击设置，搜索
MCP - 点击
Open User MCP Config (JSON)
将以下配置之一粘贴进去，保存。
OAuth 2.1 方式（推荐）：
json{ "mcpServers": { "pixso-oauth-mcp": { "url": "https://pixso.cn/mcp" } } }访问令牌方式：
json{ "mcpServers": { "pixso-oauth-mcp": { "url": "https://pixso.cn/mcp", "token": "用户个人访问令牌" } } }（可选）如果您不希望频繁被询问是否允许调用 Pixso 工具，可以在配置中加入
"autoApprove": ["getCode", "getNodeDSL"]等参数。保存并重新加载 Kiro 即可。
Windsurf
打开
Windsurf Settings，进入MCP Servers面板，点击Manage MCPs。点击
View raw config打开mcp_config.json。按需添加以下配置之一并保存：
OAuth 2.1 方式（推荐）：
json{ "mcpServers": { "pixso-oauth-mcp": { "serverUrl": "https://pixso.cn/mcp" } } }访问令牌方式：
json{ "mcpServers": { "pixso-oauth-mcp": { "serverUrl": "https://pixso.cn/mcp", "token": "用户个人访问令牌" } } }返回配置页点击刷新，显示绿色状态即连接成功。若使用 OAuth 2.1，首次连接时请按客户端提示完成授权。
第二步：在 Agent 客户端中对话
与 Pixso 远程 MCP 服务器成功连接后，即可在网页端通过图层链接获取 Pixso 设计稿数据，使用大模型进行对话。
复制文件链接
- 在 Pixso 工作台中打开设计文件
- 右键复制容器图层的链接
注意事项
图层的链接通过右键图层，选择“复制链接”获取
图层的链接不是文件的分享链接，也不是页面的链接
链接上的 "item-id" 用于帮助 Agent 找到你想要的图层
提示
远程 MCP 无需保持 Pixso 网页端开启，只需确保身份验证（OAuth 授权或访问令牌）和图层链接有效即可使用 推荐使用先进的大模型（如 Claude-4.6-sonnet 等）
- 在客户端 IDE（如 Cursor）中打开对话模式，在对话中粘贴容器链接，并给出相关指令，如：获取设计稿 dsl 数据
