46a-mcp

Name: 46a-mcp
Author: johnroy

远程服务

github.com/johnroy开发工具11 周前更新

代码仓库

关于 46a-mcp

46a-mcp 将浏览器中打开的 46a 项目实时连接到 MCP 客户端，供需要读取应用状态并执行编辑操作的用户使用。它可列出活动连接，并通过连接调用 46a 工具或在浏览器会话中注入代码。

主要功能

01列出活动浏览器连接
02读取页面、项目和对象状态
03执行编辑器操作
04批量添加项目对象
05在浏览器会话中执行代码
06通过 OAuth 或基本认证连接

适用场景

01检查当前打开项目的页面和对象
02在编辑器中选择对象或切换页面
03批量向项目添加对象
04在浏览器会话中运行异步代码

MCP 相关

MCP 服务向客户端提供连接发现、工具调用和代码注入能力。支持远程 Streamable HTTP 连接，也可通过本地 stdio 进程接入。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://46a.co/mcp

一键复制安装命令

Claude CodeTerminalclaude mcp add --transport http johnroy-46a https://46a.co/mcp

Cursor.cursor/mcp.json{"mcpServers":{"johnroy-46a":{"type":"http","url":"https://46a.co/mcp"}}}在 Cursor 中打开

VS Code.vscode/mcp.json{"servers":{"johnroy-46a":{"type":"http","url":"https://46a.co/mcp"}}}在 VS Code 中打开

Claude Desktopclaude_desktop_config.json{"mcpServers":{"johnroy-46a":{"type":"http","url":"https://46a.co/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"johnroy-46a":{"serverUrl":"https://46a.co/mcp"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

全部服务地址

Streamable HTTPhttps://46a.co/mcp需要授权

工具

详细介绍

46a MCP 服务

通过 MCP 实时控制用户浏览器中打开的 46a 项目。允许 MCP 客户端读取实时应用/DOM 状态，并实时执行编辑器操作。

安装

作为 HTTP（在 mcpServers 外部配置）

如何使用 MCP 连接器，如需提示，请询问 Claude“claude: show me where to configure mcpServers?”

将服务 URL 添加为自定义连接器（claude.ai：Settings → Connectors → Add custom connector；Claude Code：claude mcp add --transport http 46a-mcp https://46a.co/mcp）。

使用 OAuth 配置条目

本地 claude MCP 配置使用 oauth（默认）

{
  "mcpServers": {
    "46a-mcp-http-oauth": {
      "type": "streamable-http",
      "url": "https://46a.co/mcp"
    }
  }
}

使用基本身份验证配置条目

本地 claude MCP 配置使用基本身份验证，而非 oauth。

{
  "mcpServers": {
    "46a-mcp-http-basic-auth": {
      "type": "streamable-http",
      "url": "https://46a.co/mcp",
      "headers": {
        "Authorization": "Basic <user:pass>"
      }
    }
  }
}

配置 stdio 进程（你可能用不到）

{
  "mcpServers": {
    "46a-mcp-stdio": {
      "command": "node",
      "args": ["src/stdio.js"],
      "cwd": "/Users/jroy/src/46a/mcp",
      "env": {
        "REMOTE_URL": "https://46a.co/mcp",
        "EMAIL_OR_USERNAME": "<user>",
        "PASSWORD": "<pass>"
      }
    }
  }
}

运行（或使用这个）

node src/http.js

连接客户端

A. 配置自定义连接器，或 B. 将条目（如上所示）添加到 .mcp.json 或其他 Claude 配置位置，使用基本身份验证或 OAuth（默认），或 C. 配置 stdio 进程的本地条目（见上文）

工作流

listConnections → 选择一个实时的 connectionId。
对该 connectionId 使用 callTools 和/或 inject。

connectionId 是临时的，页面重新加载后会失效——不确定时请重新列出连接。

工具

客户端通过 tools/list 发现工具。

listConnections — 列出实时浏览器连接。可选的 emailOrUsername 筛选条件。返回 connectionId -> { user, project }。
callTools — 对某个连接运行 46a 工具调用： { connectionId, request: { v: 't', calls: [...] } }。
inject — 在连接的浏览器会话中运行代码： { connectionId, request: { v: 'j', code } }。code 必须是一个求值结果为 Promise 的单一表达式。
hello_world — 连通性测试工具。

callTools 调用接口

request.calls

add_object — 添加单个对象（Circle、Square、_basic.text、_basic.plainText、 _basic.html、SVG）。
add_objects — 批量执行 add_object，适合一次创建多个对象。
make_object_from_html — 从原始 HTML 片段添加对象。
getSelectorData — 读取应用状态（页面、工作区、项目、用户、对象、日志）。
doAction — 执行编辑器操作（撤销/重做、打开编辑器、选择对象、缩放、更改页面、修补对象字段、项目/页面生命周期等）。
createImage — 通过 DALL-E 生成图像并添加到项目中。
delegateAI — 将任务委派给另一个助手。
uiInteraction — 在聊天线程或 UI 中创建 UI 小部件/交互。