Infinite Monitor 是一款 AI 驱动的仪表盘构建工具：用自然语言描述你想要的 Widget，AI Agent 就会实时写好 React 代码、安装依赖并构建部署，最终渲染成可拖拽、可缩放的实时数据看板。本文将带你了解它的 5 大核心使用场景，并附一份从零到可用的完整上手教程，帮你看板类需求少写 90% 的前端代码。

Infinite Monitor 是什么？

一句话概括：Monitor anything in real time（实时监测一切）。

它的工作流程只有 4 步：

几个关键特性：

• 🧩每个 Widget 都是完整 React 应用：自带依赖、API 调用、图表、地图和交互 UI，互不干扰
• 🖱️无限画布：平移、缩放、网格吸附，随意拖拽调整 Widget 布局（缩放范围 0.1x–3x，见 src/components/infinite-canvas.tsx）
• 🤖仪表盘感知：同一看板上的 AI Agent 能"看到"其他 Widget 并读取其源码，避免重复造轮子
• 🔍实时联网搜索：构建过程中 Agent 会主动搜索 API 文档与数据源（实现见 src/lib/web-search.ts）
• 🔐安全本地优先：API Key 只存在浏览器 localStorage，服务端不落盘；外部链接经过 Brin 威胁扫描

主界面由 src/app/page.tsx 组装：顶部工具栏 + 无限画布 + 右侧 AI 聊天侧边栏，聊天面板源码在 src/components/chat-sidebar.tsx。

场景一：实时加密货币交易看板

加密货币交易者最典型的需求：多币种行情、K 线走势、市场情绪，一个屏幕全掌握。

Infinite Monitor 内置了Crypto Trader仪表盘模板（src/templates/crypto-trader.json），开箱即有 6 个 Widget：

• 多币种价格 Ticker：市值 Top 20 实时报价，带 LIVE 状态与 24h 涨跌幅
• 比特币 24h 价格图：Recharts 面积图，5 分钟自动刷新
• 恐惧贪婪指数仪表盘：SVG 指针式仪表盘 + 30 天趋势柱状图
• 涨跌幅排行：涨幅/跌幅 Top N 并排对比
• 交易所成交量对比：横向条形图 + 信任度评分
• ETH Gas 追踪器：四档 Gas 价格卡片，多 API 源自动降级，全部失败时切换模拟数据兜底

你也可以直接用一句话让 AI 生成自己的版本，例如："做一个 BTC/ETH 实时价格卡片，每 30 秒刷新，跌破 $60,000 时显示红色警告。"

场景二：国际冲突 OSINT 情报监控

开源情报（OSINT）分析员需要同时盯新闻、地图、社交媒体多个信息源。

内置的World Conflicts OSINT模板（src/templates/world-conflicts.json）包含 9 个 Widget：全球冲突地图（MapLibre GL）、军事新闻流（带分类过滤）、YouTube OSINT 信息源、人口迁移数据、空域监控等。

这类看板的妙处在于对话式迭代：先让 AI 建一个新闻流 Widget，看到不满意的部分再追加一句"把分类改成标签页切换，加上 10 秒自动轮询"，Agent 会读取现有代码（它甚至能读同看板其他 Widget 的源码）精准修改，而不是推倒重来。

场景三：预测市场实时追踪

对 Polymarket / Kalshi 等预测市场感兴趣？内置Prediction Markets模板（src/templates/prediction-markets.json）提供 8 个 Widget：热门市场排行、头部交易者榜、套利机会扫描器、新闻聚合流等。

这类"多数据源 + 实时刷新 + 图表"的看板，正是手写前端最耗时的部分——而在这里只需一句"帮我做一个 Kalshi 热门市场排行榜，按交易量排序，每 5 分钟刷新"。

场景四：从零搭建任意领域的个人数据看板

以上模板之外，任何你能用语言描述的领域都可以：

• 🌤️ 天气/空气质量实时看板
• 📦 服务器、CI 状态聚合监控
• 📰 行业 RSS 聚合器
• 🗺️ 航班追踪地图

新建入口很简单：点击顶部Add按钮选择Widget（逻辑在 src/components/add-menu.tsx），在聊天框描述需求即可。Widget 的沙箱构建与运行由 src/lib/widget-runner.ts 负责——每个 Widget 独享一个 NodeRuntime（V8 isolate），文件读写、网络请求都在隔离环境中完成，互不污染。

💡小技巧：描述时把"数据源 + 刷新频率 + 展示形式 + 交互需求"四要素说全，一次生成的质量会显著提高。

场景五：一键分享实时协作看板

做给团队看的看板，怎么分享？点击顶部Share按钮（src/components/share-dashboard-button.tsx），系统会先同步看板状态到服务端，生成一个稳定分享链接并自动打开。

分享页采用 durable-stream 优先架构（分享逻辑见 src/lib/share.ts 与 src/lib/share-recorder.ts），接收方看到的是实时更新的活看板，数据持续推送而非静态快照——开会投屏、跨团队同步场景非常实用。

最快上手步骤：从零到第一个 Widget

环境准备

只需两个前置条件：

1. Node.js 22+（Secure Exec 的isolated-vm原生依赖需要）
2. 任选一家 AI 服务商的 API Key（Anthropic、OpenAI、Google、xAI、Mistral 等，共支持 15 家、35+ 模型）

一键安装步骤

git clone https://gitcode.com/gh_mirrors/in/infinite-monitor cd infinite-monitor

创建.env.local，至少配置一个提供商的 Key：

ANTHROPIC_API_KEY=sk-ant-... # 或 OPENAI_API_KEY=sk-... # 或 GOOGLE_GENERATIVE_AI_API_KEY=...

npm install npm run dev

打开http://localhost:3000，即可看到无限画布 + 聊天侧边栏的主界面。

📌 也支持在聊天侧边栏 UI 中直接粘贴 API Key（BYOK 模式），完全不需要服务端环境变量。注意：运行中修改.env.local需重启 dev server 才生效（见 AGENTS.md）。

创建第一个 Widget

1. 点击顶部Add → Widget
2. 在聊天框输入，例如："Build a live Bitcoin price chart that refreshes every 5 minutes"
3. 等待几秒——Agent 会规划、写代码、装依赖、沙箱构建
4. Widget 出现在画布上，拖标题栏移动、拖角落手柄缩放
5. 不满意？继续对话："把背景改成浅色，加一个 24h 高低价统计"

常用命令速查：

进阶：让看板更高效

• 模板起步：通过 Add 菜单的模板入口，一键载入 Crypto Trader / World Conflicts / Prediction Markets 三个预置看板（模板接口见 src/app/api/templates/route.ts）
• 多仪表盘管理：不同领域分开建看板，顶部 DashboardPicker 秒切
• 按需换模型：每次对话都能切换模型；还支持自定义 OpenAI 兼容 API（base URL + key）
• 桌面应用：社区维护了 Electron 桌面版，macOS / Windows / Linux 均可安装
• 部署上线：仓库自带railway.toml（railway.toml），配合 GitHub Actions 可一键部署到 Railway

总结：适合谁用 Infinite Monitor？

Infinite Monitor 把"描述 → 可运行看板"的距离压缩到一次对话的长度。模板不够用？项目也欢迎社区贡献更多领域模板与 Widget 市场功能（见 README.md）。现在就去试试用一句话生成你的第一个实时 Widget 吧！