Codex 如何操作无限画布？体验 Infinite Canvas Codex Plugin

大家好，这里是代码简单说，欢迎大家关注同名公众号，不定时更新更多实用有趣的教程，也欢迎大家在评论区一起讨论交流！~

最近在体验 Codex 的插件生态时，发现了一个比较有意思的开源项目 Infinite Canvas Codex Plugin。

它的作用不是新增一个聊天能力，而是通过 MCP（Model Context Protocol） 将 Codex 与本地运行的 Infinite Canvas 连接起来，让模型可以读取当前画布中的节点信息，并根据上下文完成内容生成、节点分析等操作。

本文简单介绍它的工作方式以及基本使用流程。

---

一、项目简介

Infinite Canvas 是一个面向 AI 创作的开源无限画布项目。

除了常见的节点编辑能力之外，还集成了：

• 多画布管理
• Prompt 管理
• AI 图片创作
• 图像编辑
• 本地 Canvas Agent
• MCP 接入能力

项目提供了对应的 Codex Plugin，因此 Codex 可以通过 MCP 与画布进行交互。

整个过程采用本地 Agent 通信，不需要额外开发接口。

---

项目资料

项目	地址
Infinite Canvas	https://github.com/basketikun/infinite-canvas
Codex 客户端	https://codexdown.cn/

二、Codex 如何与画布通信？

插件的整体流程比较简单。

Codex
      │
      ▼
Infinite Canvas Plugin
      │
      ▼
Canvas Agent（MCP）
      │
      ▼
Infinite Canvas

插件主要负责：

• 检测本地画布是否运行
• 启动 Canvas Agent
• 建立 MCP 通信
• 获取画布节点
• 将 Codex 的操作同步到画布

因此 Codex 可以直接理解当前画布中的内容，而不是仅依赖聊天上下文。

---

三、可以完成哪些操作？

建立连接后，可以直接使用自然语言完成一些画布操作，例如：

打开 Infinite Canvas

或者：

读取当前画布并总结节点结构

也可以：

根据当前节点生成图片提示词

这些操作本质上都是通过 Canvas Agent 调用本地画布能力完成。

---

四、插件安装方式

项目提供了自动安装和手动安装两种方式。

自动安装时，可以让 Codex 根据仓库中的插件配置完成安装流程。

手动安装时，则需要：

1. Clone 项目仓库
2. 添加 Personal Marketplace
3. 安装插件
4. 新建 Codex 对话加载插件

整个安装流程都已经在项目文档中进行了说明。

---

五、Canvas Agent 的作用

整个插件真正的核心其实是 Canvas Agent。

默认启动命令为：

npx -y @basketikun/canvas-agent mcp

Agent 启动后主要完成几项工作：

• 提供 MCP 服务
• 获取画布信息
• 接收 Codex 指令
• 更新画布内容

因此 Codex 实际并不是直接控制浏览器，而是通过 Agent 与 Infinite Canvas 进行交互。

---

六、Infinite Canvas 的特点

除了插件之外，Infinite Canvas 本身也具有不少特点，例如：

• 无限画布编辑
• 节点连线
• 多项目管理
• AI 图片生成
• 图像编辑
• Prompt 管理
• 对话助手
• MCP 扩展能力

整个项目基于现代前端技术栈开发，包括 Next.js、React、TypeScript 等。

---

七、总结

Infinite Canvas Codex Plugin 展示了一种比较典型的 MCP 应用方式。

相比传统聊天模式，它让模型能够直接获取画布上下文，并在同一个工作流中完成分析、生成和内容更新。

如果对 MCP、Agent 或 AI 工作流感兴趣，可以阅读项目源码了解其实现方式，对于理解本地 Agent 与模型之间的协作流程也有一定参考价值。

---