让PenEcho的AI直接在画布上跑起交互组件6个Widget创意玩法揭秘【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penechoPenEcho 是一款AI 无限画布的开源工具你可以手写笔记、画草图、写公式它内置的 AI Agent 会直接把想法变成图表、文档以及能真正运行起来的交互式 Widget组件——计算器、股票行情、天气预报都能跑在你的画布旁边。本文带你解锁 6 个开箱即用的 Widget 创意玩法。玩法一天气Widget抬头看画布就知道明天穿什么 ️在画布上写下上海天气画个箭头指向空白处AI 就会在箭头所指的位置生成一个天气 Widget当前温度、湿度、风速外加未来 5 天预报并且每 15 分钟自动刷新。它背后的数据大脑是 weather 插件内置了 Open-Meteo 接口的取数规则你完全不用关心 API 细节。 小技巧Widget 生成后可以直接双击交互、收藏也可以随画布一起分享给朋友。玩法二A股行情Widget60秒刷新一次的分时趋势 写下贵州茅台 日线图AI 会生成一个行情 Widget最新价、涨跌幅是主角配上一张 60 日的 K 线趋势图和成交量每 60 秒自动刷新数据来自腾讯公开行情接口。行情插件的规则在 stocks 插件说明 里它还会诚实标注数据延迟绝不把结果包装成投资建议。玩法三真实照片Widget一键把极光搬上画布 写论文、做汇报缺配图在画布上写给我看看五张极光图片image-search 插件 会从 Wikimedia Commons 搜索真实照片Openverse 兜底在画布上渲染成卡片网格图片是主角标题、作者、授权来源一目了然。玩法四专业图表WidgetK8s架构一张图讲清楚 ️这是 PenEcho 最生产力的玩法之一。手绘一个歪歪扭扭的架构图AI 就能把它变成自动布局的专业图表支持架构图、时序图、流程图、BPMN、UML、数据库 ER 图等本地渲染 Graphviz DOT、Vega-Lite、GeoJSON 等开放格式可导出 SVG / PNG直接放进文档或 PPT更多格式规则见 flowchart 插件配套的 专业图表规范 解释了每张示例图的来龙去脉。玩法五可视化讲解Widget把笔记变成会响应的图解 Visual Explainer 模式适合讲清楚一件事模型架构解读、旅行计划、学习笔记重组……AI 会生成一个响应式可视化组件——宽屏时是 12 栏网格布局窄屏自动折叠为 6 栏再堆叠窗口缩放时实时重排。设计契约在 visual-explainer 文档 中定义一个请求只走一条 Widget 路径渲染前会自动检查溢出、裁切和排版问题宁可降级也不给你一张白图。玩法六外部AI Agent直连画布让Codex/Claude Code替你画 ✍️这是进阶玩法通过MCP 协议你在 Codex、Claude Code、Kimi 等客户端里说一句把我们讨论的架构画到 PenEcho 画布上外部 Agent 就会调用penecho_present_widget工具把带交互的 HTML 组件直接放进你的画布不满意你在旁边手写批注它下一轮就能读懂并修改。三步完成接入打开 PenEcho 的设置 → MCP service开启当前画布点Auto configure或复制生成的配置到你的客户端直接开口Show the architecture we discussed on my PenEcho canvas.完整图文步骤见 MCP 设置指南。Widget 是怎么跑起来的30秒看懂原理 ⚙️每个 Widget 本质上是一段 AI 生成的响应式 HTML由 PenEcho 的沙箱 Widget 运行时托管运行在独立的 iframe 里与主画布隔离安全又稳定只有当前激活的画布才有活的 Widget 帧切走画布时内容保留但不消耗性能数据抓取、定时刷新都由 Widget 自己管理PenEcho 不代理任何数据支持截图、导出 PNG、收藏和分享运行时的完整实现可以看 widget-host.js架构全貌见 architecture 文档。新手上手清单 ✅步骤做什么1️⃣桌面端下载 macOS / Windows 安装包或浏览器打开托管版2️⃣设置 → AI connections 里配置模型官方模型、自有 API Key 或 Codex / Claude Code / Kimi CLI 三选一3️⃣在画布上写需求 箭头指向空白处AI 会自动在指向位置生成 Widget4️⃣用外部 Agent按上面玩法六打开 MCP一句话即可跨工具协作写在画布上、跑在 AI 手里——PenEcho 的 Widget 让画出来的东西第一次真的能动。挑一个玩法今天就开始试试吧【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penecho创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/4 20:30:02 · 阅读 1.2k 让PenEcho的AI直接在画布上跑起交互组件：6个Widget创意玩法揭秘
让PenEcho的AI直接在画布上跑起交互组件6个Widget创意玩法揭秘【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penechoPenEcho 是一款AI 无限画布的开源工具你可以手写笔记、画草图、写公式它内置的 AI Agent 会直接把想法变成图表、文档以及能真正运行起来的交互式 Widget组件——计算器、股票行情、天气预报都能跑在你的画布旁边。本文带你解锁 6 个开箱即用的 Widget 创意玩法。玩法一天气Widget抬头看画布就知道明天穿什么 ️在画布上写下上海天气画个箭头指向空白处AI 就会在箭头所指的位置生成一个天气 Widget当前温度、湿度、风速外加未来 5 天预报并且每 15 分钟自动刷新。它背后的数据大脑是 weather 插件内置了 Open-Meteo 接口的取数规则你完全不用关心 API 细节。 小技巧Widget 生成后可以直接双击交互、收藏也可以随画布一起分享给朋友。玩法二A股行情Widget60秒刷新一次的分时趋势 写下贵州茅台 日线图AI 会生成一个行情 Widget最新价、涨跌幅是主角配上一张 60 日的 K 线趋势图和成交量每 60 秒自动刷新数据来自腾讯公开行情接口。行情插件的规则在 stocks 插件说明 里它还会诚实标注数据延迟绝不把结果包装成投资建议。玩法三真实照片Widget一键把极光搬上画布 写论文、做汇报缺配图在画布上写给我看看五张极光图片image-search 插件 会从 Wikimedia Commons 搜索真实照片Openverse 兜底在画布上渲染成卡片网格图片是主角标题、作者、授权来源一目了然。玩法四专业图表WidgetK8s架构一张图讲清楚 ️这是 PenEcho 最生产力的玩法之一。手绘一个歪歪扭扭的架构图AI 就能把它变成自动布局的专业图表支持架构图、时序图、流程图、BPMN、UML、数据库 ER 图等本地渲染 Graphviz DOT、Vega-Lite、GeoJSON 等开放格式可导出 SVG / PNG直接放进文档或 PPT更多格式规则见 flowchart 插件配套的 专业图表规范 解释了每张示例图的来龙去脉。玩法五可视化讲解Widget把笔记变成会响应的图解 Visual Explainer 模式适合讲清楚一件事模型架构解读、旅行计划、学习笔记重组……AI 会生成一个响应式可视化组件——宽屏时是 12 栏网格布局窄屏自动折叠为 6 栏再堆叠窗口缩放时实时重排。设计契约在 visual-explainer 文档 中定义一个请求只走一条 Widget 路径渲染前会自动检查溢出、裁切和排版问题宁可降级也不给你一张白图。玩法六外部AI Agent直连画布让Codex/Claude Code替你画 ✍️这是进阶玩法通过MCP 协议你在 Codex、Claude Code、Kimi 等客户端里说一句把我们讨论的架构画到 PenEcho 画布上外部 Agent 就会调用penecho_present_widget工具把带交互的 HTML 组件直接放进你的画布不满意你在旁边手写批注它下一轮就能读懂并修改。三步完成接入打开 PenEcho 的设置 → MCP service开启当前画布点Auto configure或复制生成的配置到你的客户端直接开口Show the architecture we discussed on my PenEcho canvas.完整图文步骤见 MCP 设置指南。Widget 是怎么跑起来的30秒看懂原理 ⚙️每个 Widget 本质上是一段 AI 生成的响应式 HTML由 PenEcho 的沙箱 Widget 运行时托管运行在独立的 iframe 里与主画布隔离安全又稳定只有当前激活的画布才有活的 Widget 帧切走画布时内容保留但不消耗性能数据抓取、定时刷新都由 Widget 自己管理PenEcho 不代理任何数据支持截图、导出 PNG、收藏和分享运行时的完整实现可以看 widget-host.js架构全貌见 architecture 文档。新手上手清单 ✅步骤做什么1️⃣桌面端下载 macOS / Windows 安装包或浏览器打开托管版2️⃣设置 → AI connections 里配置模型官方模型、自有 API Key 或 Codex / Claude Code / Kimi CLI 三选一3️⃣在画布上写需求 箭头指向空白处AI 会自动在指向位置生成 Widget4️⃣用外部 Agent按上面玩法六打开 MCP一句话即可跨工具协作写在画布上、跑在 AI 手里——PenEcho 的 Widget 让画出来的东西第一次真的能动。挑一个玩法今天就开始试试吧【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penecho创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考