Pixel Bridge MCP

PixelBridge MCP

PixelBridge MCP是一个本地TypeScript MCP服务器和Chrome扩展包，它从用户的真实浏览器选项卡协调ChatGPT映像生成，并在 artifacts/generated-images/chatgpt/，并返回MCP友好的结构化结果。

许可证： MIT。参见 许可证.

对于产品化，预期的安装目标现在是本地npm安装的CLI。可执行文件名为 pixelbridge-mcp.

快速安装

安装已发布的CLI：

npm install -g pixelbridge-mcp

然后启动服务器：

pixelbridge-mcp

您还需要从已安装的软件包中加载打包的Chrome扩展程序 extension/ 目录。有关完整安装路径，请参阅 安装CLI.

最终用户安装文档：

• 安装CLI
• MCP客户端配置
• 客户端配置代码段
• 清洁安装检查表
• 常见问题解答
• 发布检查表
• 支持
• Chrome网上商店提交
• 隐私政策草案

MCP客户端指南包括以下具体设置示例：

• VS代码/VS代码中的GitHub副本
• 光标
• 帆板运动
• JetBrains 集成开发环境
• OpenAI Codex命令行界面
• OpenAI Codex IDE/应用程序界面
• 克劳德代码
• 通用的 stdio MCP客户端

其他面向用户的文档现在包括：

• 清洁机器安装验证
• Windows/macOS/Linux配置片段
• 常见故障模式和答案

公共链接

当前公共项目/支持URL:

• 项目主页： https://github.com/DouglasOttoDavila/image-generation-mcp-server
• 问题跟踪器： https://github.com/DouglasOttoDavila/image-generation-mcp-server/issues
• 支持页面： https://github.com/DouglasOttoDavila/image-generation-mcp-server/blob/main/docs/support.md

当前公共隐私政策草案URL:

• https://github.com/DouglasOttoDavila/image-generation-mcp-server/blob/main/docs/privacy-policy.md

如果您稍后发布此仓库的GitHub Pages，请将上面的隐私政策URL替换为最终的Pages URL，并在Chrome Web Store列表中重用相同的链接。

它做什么

• 公开MCP工具，用于活动选项卡图像生成、新聊天图像生成、现有GPT图像生成、浏览器会话验证和选项卡诊断。
• 承载一个本地主机扩展桥，以便ChatGPT内容脚本可以注册已打开的选项卡。
• 将生成的图像和元数据sidecar持久化 artifacts/generated-images/chatgpt//.

重要限制

此服务器依赖于将Chrome扩展程序加载到真实登录中 chatgpt.com 选项卡加上ChatGPT的实时DOM与当前选择器保持兼容。这意味着端到端行为依赖于环境，应该被视为浏览器自动化，而不是稳定的API集成。

当前迁移状态：

• validate_browser_session(), list_connected_chatgpt_tabs(), select_chatgpt_tab(), generate_image_active_tab(...), generate_image_new_chat(...)，以及 generate_image_with_gpt(...) 现在使用扩展桥。
• generate_image_with_gpt(...) 无法在MVP中导航GPT目录。它验证所选选项卡是否已在请求的GPT页面上。
• list_matching_gpts(...) 仍然使用传统的浏览器自动化路径。

设置

本节是开发人员/源代码仓库设置路径。如果要安装打包的CLI，请使用 安装CLI 相反。

1. 安装依赖项：

npm install

1. 设置环境变量：

$env:PIXELBRIDGE_EXTENSION_BRIDGE_HOST="127.0.0.1"
$env:PIXELBRIDGE_EXTENSION_BRIDGE_PORT="47821"

您还可以将相同的值放置在本地 .env 文件。服务器自动加载 .env 启动时，接受标准的dotenv行或PowerShell样式 $env: 线。

安全启动文件包含在 .env.示例.

可选变量：

• PIXELBRIDGE_RUNTIME_HOME
• PIXELBRIDGE_EXTENSION_BRIDGE_PORT
• PIXELBRIDGE_EXTENSION_BRIDGE_HOST
• PIXELBRIDGE_ARTIFACT_ROOT
• PIXELBRIDGE_RETURN_MODE 随着 paths 或 base64
• PIXELBRIDGE_DEFAULT_TIMEOUT_MS
• PIXELBRIDGE_MAX_TIMEOUT_MS
• PIXELBRIDGE_RETRY_ATTEMPTS
• PIXELBRIDGE_RETRY_BASE_DELAY_MS

遗产 CHATGPT_* 为了向后兼容，环境变量仍然被接受。

运行时主页

当 PIXELBRIDGE_RUNTIME_HOME 如果未设置，服务器现在默认为操作系统应用程序数据目录，而不是repo文件夹：

• 窗户： %LOCALAPPDATA%\\pixelbridge-mcp
• macOS： ~/Library/Application Support/pixelbridge-mcp
• Linux： ${XDG_DATA_HOME:-~/.local/share}/pixelbridge-mcp

默认工件输出在以下位置创建：

/artifacts/generated-images/chatgpt/

本地网桥令牌和托管浏览器配置文件数据也位于运行时主页下。

包装说明

npm包仅用于发布运行时工件：

• dist/src/*
• 扩展运行时文件 extension/dist/
• extension/manifest.json
• extension/popup.html
• extension/options.html
• 运行时README文件

它不应该提供编译的测试或原始的扩展TypeScript源文件。

当前扩展分布模型：

• 先下载/手动安装
• 装载捆绑好的货物 extension/ 目录作为解包扩展
• Chrome网上商店提交已记录在案，但尚未成为默认分发路径

延伸桥

构建扩展：

npm run build:extension

然后加载 extension/ 作为Chrome中未打包的扩展程序。该扩展使用本地握手端点：

http://127.0.0.1:47821/handshake

看 扩展名/README.md 对于当前的MVP行为。

首次登录

打开 https://chatgpt.com 在正常的Chrome配置文件中，登录一次，并为该选项卡启用未打包的扩展程序。服务器不再需要启动或拥有浏览器配置文件以使用扩展程序支持的工具。

跑步

npm run build
npm run start

对于已安装的CLI，运行：

pixelbridge-mcp

有关通用MCP客户端接线示例，请参阅 MCP客户端配置.

对于当地发展：

npm run dev

MCP工具

• validate_browser_session()
• list_connected_chatgpt_tabs()
• select_chatgpt_tab(tabKey)
• generate_image_active_tab(prompt, returnMode?, timeoutMs?)
• generate_image_new_chat(prompt, returnMode?, timeoutMs?)
• generate_image_with_gpt(gptName, prompt, returnMode?, timeoutMs?)
• list_matching_gpts(query)

工件布局

成功运行后，将文件保存在以下位置：

/artifacts/generated-images/chatgpt/YYYY-MM-DD/

每次运行都会写入：

• 一个或多个图像文件
• 一 .metadata.json 带有提示、GPT输入、已解析GPT、时间戳、后端使用情况和已保存路径的文件

手动验证

1. 装入未包装的扩展件并打开 https://chatgpt.com.
2. 跑 list_connected_chatgpt_tabs() 并确认至少注册了一个ChatGPT标签。
3. 如果通过扩展连接了多个ChatGPT选项卡，请使用 select_chatgpt_tab(tabKey).
4. 跑 validate_browser_session() 并确认其报告 authenticated: true.
5. 跑 generate_image_active_tab("A clean studio product photo of a ceramic mug").
6. 确认图像文件和元数据JSON出现在 artifacts/generated-images/chatgpt//.
7. 跑 generate_image_new_chat("A clean studio product photo of a ceramic mug") 并在生成之前确认它开始新的聊天。
8. 手动打开特定的GPT，然后运行 generate_image_with_gpt("Your GPT Name", "A cinematic concept sketch").
9. 跑 list_matching_gpts("Dall e") 仅当您仍然需要传统的GPT目录查找路径时。

测试

npm test

自动化测试涵盖了配置解析、dotenv加载、模糊GPT匹配、工件持久性、响应格式化、后端路由、运行锁定和验证错误传播。实时聊天GPT自动化仍然是手动的，因为消费者UI很脆弱，并且依赖于环境。