原生 JavaScript + Canvas 2D 的机械蜘蛛可视化 UI。普通演示零依赖；可选 MCP 接入自己的 Agent，实时展示任务，支持三套布局、主题定制、JSON 回放与独立项目导出。
一个用 原生 JavaScript + Canvas 2D 实现的动态提示词可视化界面：机械蜘蛛沿文字游走、伸出触手抓取词语，词条沿弧线飞入蛛网，再分流到 code、model 和 you 三条分支。
黑底、粉色扫描、高密度蛛丝、跳动核心，配合可拖动的时间轴和侧边控制抽屉。普通演示无需安装依赖、无需 API Key；连接自己的 Agent 后，也能用同一套效果实时展示任务，定制主题并导出个人项目。
浏览器打开 http://127.0.0.1:4317 终端出现本地地址后即可访问，按 Ctrl+C 停止服务。Windows 用户也可以双击 启动.cmd。
普通 UI 没有第三方运行依赖，跳过 npm install 即可。MCP 接入需要单独安装子包依赖，见下文。推荐使用较新的 Chrome、Edge 或 Firefox；手机尺寸也有适配。服务默认只监听本机 127.0.0.1。
- 看完整动画：逐词扫描、弧形抓取、接触驻留、收臂、词条飞行、蛛网分流和双拍心跳。 - 控制播放：暂停、重播、0.5× / 1× / 2× / 4× 速度、循环播放，以及拖动时间轴跳到任意时刻。 - 查看词条：点击画布中的词条或决策流，自动展开右侧控制栏，查看问题、示意分数和分支。 - 试自己的提示词：展开右侧「控制」，选择「自己的提示词」，输入中文或英文，点击「扫描提示词」。 - 调整分流：拖动阈值，观察本地规则如何改变分支；点击 code、model、you 筛选。 - 导出结果：点击「导出本次分流 JSON」，保存当前时间点的演示状态。 - 专注画面：放大画布或切换沉浸模式；控制抽屉覆盖在画布上，默认收起。
快捷键 功能 --- --- Space 播放 / 暂停 R 从头重播 F 切换沉浸模式 Esc 退出沉浸模式或收起控制栏 ← / → 后退 / 前进 0.5 秒
输入框聚焦时不会触发播放快捷键。系统开启「减少动态效果」时，页面默认暂停，并减少部分动态效果。
参考演示保留预设的布局、轨迹和统计时间线，时长约 20.92 秒。拖动时间轴能够重复得到同一时刻的状态。末段显示 175 次分流：137 code / 27 model / 11 you。
自己的提示词使用本地关键词和规则生成示意分数。达到阈值的词进入 code，低于阈值进入 model；命中发布、购买、删除等批准相关规则的词优先进入 you。拖动分流阈值会切换为该模式。
以上两种本地模式是 UI 与动画演示：分数未经概率校准，model 和 you 是可视化分支，不会调用模型或执行批准。code 分支也不会执行生成的代码。这些演示的 JSON 导出保留 modelCalls: 0 和 executedActions: 0 等字段。画面中的模型名称是视觉标签。
MCP 让支持本地 stdio 的 Agent 调用这个 UI：创建会话 → 打开预览 → 上报任务步骤 → 调整外观 → 保存回放或导出项目。例如展示代码检查、资料整理或需要人工确认的工作流。Agent 自己负责实际任务，UI 展示它主动上报的信息，不会自动读取聊天、捕获隐藏推理或执行三条分支里的操作。
Agent 会话使用单独的实时界面和记录，不套用原参考演示的固定计数。当前上报接口支持步骤、分支、状态和可选分数，没有模型调用次数上报字段，因此调用次数显示为未提供。
MCP 使用官方 SDK 和 Zod，锁文件固定依赖版本。它本身不需要 API Key；你的 Agent 使用何种模型及凭据，由 Agent 自己配置。
From the project README.
Add the radar badge to your README — it shows your project was picked up by MCP Radar and links to this page:
[](https://mcp.liqiwa.com/s/Kirito14IT--prompt-spider-ui.html)
The programmable era of ads. Video made in code for experts and their AI agents: a film is render(t). Determinism checks, H.264/ProRes rendering, review and per-placement delivery, with an MCP server
sher1096/klinepic-agent-api-examplesTested MCP server, MCPB, Docker, and OpenAPI for annotated post-trade candlestick charts from broker or exchange fills.
anhe2021212-spec/StringhandStringhand gives AI agents a pair of hands for the guitar.
nirholas/3D-AR-StudioDrop a full augmented-reality studio into any web page. Place any number of 3D models in your real room through the camera, generate new ones from a text prompt, arrange them, then share the scene as
hacimertgokhan/geomotionHand-drawn morphing line animations from simple shapes. Zero-dependency JS engine + live studio, CLI, MCP server & Claude skill. Export animated SVG, Lottie, HTML or a shareable link.
Nothingsssss/maimai-restaurant-huiyan麦麦餐厅-慧眼识人 | 麦当劳 2026 年 1024 程序员创意开发大赛参赛项目：基于麦当劳 MCP 真实餐品数据的出餐配餐与优惠推荐练习游戏（单文件 HTML，双击即玩）
The top new MCP servers of the week, every Monday. No spam, unsubscribe anytime.