homanp/infinite-monitor
GitHub: homanp/infinite-monitor
一个 AI 驱动的无限画布仪表板构建器，用自然语言描述即可实时生成、部署和迭代自定义 React 监控小部件。
Stars: 1 | Forks: 0
# 无限 Monitor
[](https://github.com/homanp/infinite-monitor)
[](https://opensource.org/licenses/MIT)
[](https://github.com/homanp/infinite-monitor/actions/workflows/ci.yml)
一个 AI 驱动的仪表板构建器。用通俗的语言描述你想要的小部件，AI Agent 就会实时编写、构建并部署它。
每个小部件都是一个完整的 React 应用程序 —— 拥有独立的依赖项、API 调用、图表、地图和交互式 UI —— 并在隔离的 iframe 中运行。你可以在无限画布上拖动、调整大小并组织它们，适用于任何领域：网络安全、OSINT、交易、预测市场，或任何你能描述的内容。
## 工作原理
1. 点击 **Add Widget** 并描述你想要的内容
2. AI Agent 编写 React 代码，安装依赖项，并在 Docker 容器内构建它
3. 小部件实时渲染在你的仪表板的 iframe 中
4. 通过聊天进行迭代 —— Agent 会在几秒钟内重写并重新构建
Agent 拥有 6 个可用的工具：
| 工具 | 功能 |
|------|-------------|
| `bash` | 在沙盒环境中运行 shell 命令（通过 [bash-tool](https://github.com/vercel-labs/bash-tool)） |
| `writeFile` | 将源文件写入小部件 —— 写入 `src/App.tsx` 会触发构建 |
| `readFile` | 读取现有的小部件源文件 |
| `listDashboardWidgets` | 查看同一仪表板上的同级小部件 |
| `readWidgetCode` | 读取另一个小部件的源代码以匹配模式 |
| `web_search` | 搜索网络以获取 API、文档和数据 |
## 快速开始
### 前置条件
- [Node.js](https://nodejs.org/) 20+
- 本地运行的 [Docker](https://www.docker.com/)
- 来自任何[支持的提供商](#supported-providers)的 API 密钥（Anthropic, OpenAI, Google, xAI, Mistral 等）
- [Make](https://www.gnu.org/software/make/)（macOS/Linux 上预装）
### 设置
```
git clone https://github.com/homanp/infinite-monitor.git
cd infinite-monitor
```
创建 `.env.local` 文件，至少包含一个提供商的密钥：
```
# 选择任意 provider — 或添加多个 provider
ANTHROPIC_API_KEY=sk-ant-...
# OPENAI_API_KEY=sk-...
# GOOGLE_GENERATIVE_AI_API_KEY=...
```
有关支持的环境变量的完整列表，请参阅 [`.env.example`](.env.example)。
引导所有内容（安装依赖 + 构建 Docker 镜像 + 启动开发服务器）：
```
make all
```
或者分步执行：
```
make setup # npm install + build widget-base Docker image
make dev # start Next.js dev server
```
打开 [http://localhost:3000](http://localhost:3000)。
### 可用的 make 目标
| 命令 | 描述 |
|---------|-------------|
| `make setup` | 安装 npm 依赖 + 构建 Docker 镜像（首次运行） |
| `make docker` | 重新构建小部件运行时 Docker 镜像 |
| `make dev` | 启动 Next.js 开发服务器 |
| `make build` | 生产环境构建 |
| `make start` | 启动生产环境服务器 |
| `make test` | 运行测试 |
| `make lint` | 运行代码检查 |
| `make clean` | 移除构建产物、Docker 容器和卷 |
| `make all` | 完整引导：setup + dev |
## 系统架构
```
┌─────────────────────────────────────────────────────────┐
│ Next.js App │
│ ┌──────────────────────┐ ┌─────────────────────────┐ │
│ │ Infinite Canvas │ │ Chat Sidebar │ │
│ │ (pan / zoom / grid) │ │ (AI conversation) │ │
│ │ │ │ │ │
│ │ ┌──────┐ ┌──────┐ │ │ User: "build a chart" │ │
│ │ │iframe│ │iframe│ │ │ Agent: writes code... │ │
│ │ │ w1 │ │ w2 │ │ │ Agent: building... │ │
│ │ └──────┘ └──────┘ │ │ ✓ Widget ready │ │
│ └──────────────────────┘ └─────────────────────────┘ │
└──────────────────┬──────────────────────────────────────┘
│
┌─────────────┼─────────────────┐
│ │ │
▼ ▼ ▼
┌─────────┐ ┌──────────┐ ┌─────────────────┐
│ SQLite │ │ Docker │ │ AI Providers │
│ (state) │ │ (builds) │ │ (BYOK) │
│ │ │ │ │ │
│ widgets │ │ vite │ │ Anthropic │
│ layouts │ │ serve │ │ OpenAI / Google │
│ files │ │ dist/ │ │ xAI / Mistral… │
└─────────┘ └──────────┘ └─────────────────┘
```
**Client** — Next.js 16 + React 19。Zustand store 持久化到 localStorage。小部件作为 iframe 渲染在无限画布上，支持平移、缩放、小地图和网格对齐放置。
**Server** — Next.js API 路由。AI 聊天使用 Vercel AI SDK，支持任何兼容的提供商。小部件文件通过 Drizzle ORM 存储在 SQLite 中。包含用于小部件 API 调用的 CORS 代理。
**Widget Runtime** — 一个运行 `serve` 的独立 Docker 容器。Agent 写入文件，Vite 构建它们，构建输出作为静态 HTML 提供服务。Docker 卷在容器重启间保留构建内容。
**Widget Template** — 每个小部件开箱即用包含 React 18, Tailwind CSS, Recharts, MapLibre GL, Framer Motion, date-fns, Lucide icons 以及所有 shadcn/ui 组件。
## 功能特性
**自带密钥 (BYOK)** — 从 15 个 AI 提供商和 35+ 个模型中选择。在 UI 中输入你的 API 密钥或通过环境变量设置。每个会话可切换模型。
**多仪表板** — 为不同领域创建独立的仪表板。在它们之间即时切换。
**仪表板感知 Agent** — 每个小部件的 AI Agent 可以看到同一仪表板上存在哪些其他小部件，并读取它们的源代码，因此它会构建互补的组件而不是重复工作。
**无限画布** — 在无边界的网格上平移、缩放并将小部件放置在任何位置。通过标题栏拖动小部件，通过角控点调整大小。小部件会对齐到网格单元。小地图显示你在画布上的位置。
**沙盒化 bash** — Agent 拥有一个 `just-bash` 沙盒化 shell，用于数据处理、原型设计和快速计算，而不会触及你的系统。
**实时网络搜索** — Agent 在构建时会搜索网络以获取 API 文档、数据源和实现模式。
**CORS 代理** — 小部件可以通过内置代理 `/api/proxy?url=...` 获取任何外部 API。
**仪表板模板** — 从针对常见领域的预构建模板开始，或从头构建。
**持久化构建** — 小部件构建存储在 Docker 卷上。容器重启不会丢失你构建的小部件。
**陈旧构建恢复** — 如果构建卡住超过 2 分钟，系统会自动重试，而无需重启服务器。
## 支持的提供商
Infinite Monitor 支持 15 个提供商的 BYOK（自带密钥）。在聊天侧边栏输入你的密钥或设置环境变量。
| 提供商 | 环境变量 | 模型 |
|----------|---------------------|--------|
| Anthropic | `ANTHROPIC_API_KEY` | Claude Opus 4.6, Sonnet 4.6, Sonnet 4.5, Haiku 4.5 |
| OpenAI | `OPENAI_API_KEY` | GPT-5.4, GPT-5.4 Pro, GPT-5, GPT-5 Mini, GPT-4.1 |
| Google | `GOOGLE_GENERATIVE_AI_API_KEY` | Gemini 3.1 Pro, Gemini 3 Flash, Gemini 2.5 Pro |
| xAI | `XAI_API_KEY` | Grok 4.20, Grok 4.1, Grok 4, Grok 3 |
| Mistral | `MISTRAL_API_KEY` | Mistral Large, Magistral Medium, Mistral Small |
| DeepSeek | `DEEPSEEK_API_KEY` | DeepSeek Chat, DeepSeek Reasoner |
| Groq | `GROQ_API_KEY` | Llama 4 Scout, Llama 3.3 70B, DeepSeek R1 Distill |
| Perplexity | `PERPLEXITY_API_KEY` | Sonar Pro, Sonar |
| Cohere | `COHERE_API_KEY` | Command A, Command R+ |
| Together AI | `TOGETHER_AI_API_KEY` | Llama 3.3 70B, Qwen 2.5 72B, DeepSeek V3 |
| Fireworks | `FIREWORKS_API_KEY` | Kimi K2, DeepSeek R1, Llama 3.3 70B |
| DeepInfra | `DEEPINFRA_API_KEY` | Llama 4 Maverick, Llama 3.3 70B |
| Cerebras | `CEREBRAS_API_KEY` | Llama 3.3 70B, Qwen 3 32B |
| Moonshot AI | `MOONSHOT_API_KEY` | Kimi K2.5, Kimi K2 Thinking |
| Alibaba | `ALIBABA_API_KEY` | Qwen3 Max, Qwen Plus |
## 技术栈
| 层级 | 技术 |
|-------|-----------|
| 框架 | Next.js 16, React 19, TypeScript |
| AI | Vercel AI SDK, 通过 BYOK 支持 15 个提供商 |
| 样式 | Tailwind CSS 4, shadcn/ui, Geist Mono |
| 状态 | Zustand (持久化到 localStorage) |
| 数据库 | SQLite via Drizzle ORM |
| 容器 | Docker (Vite + serve) |
| 画布 | 自定义无限画布 (平移/缩放/小地图/网格对齐) |
| 图表 | Recharts (在小部件中) |
| 地图 | MapLibre GL (在小部件中) |
## 项目结构
```
src/
├── app/
│ ├── api/
│ │ ├── chat/ # AI agent endpoint (streaming)
│ │ ├── proxy/ # CORS proxy for widget API calls
│ │ ├── sync/ # Client ↔ server state sync
│ │ ├── widget/[id]/ # Widget iframe proxy
│ │ └── widgets/ # Widget CRUD
│ └── page.tsx # Dashboard page
├── components/
│ ├── ai-elements/ # Chat UI (messages, reasoning, code blocks)
│ ├── chat-sidebar.tsx # AI chat panel + model selector
│ ├── dashboard-grid.tsx # Dashboard orchestrator
│ ├── infinite-canvas.tsx # Pan/zoom infinite canvas
│ ├── draggable-widget.tsx # Grid-snapped drag & resize
│ ├── zoom-controls.tsx # Zoom buttons + minimap
│ ├── widget-card.tsx # Widget iframe container
│ └── dashboard-picker.tsx
├── db/ # SQLite schema + queries
├── lib/
│ ├── model-registry.ts # Provider + model definitions
│ ├── create-model.ts # AI SDK model factory
│ ├── widget-runner.ts # Docker build orchestration
│ └── sync-db.ts # Client sync utilities
└── store/
├── widget-store.ts # Zustand widget/canvas state
└── settings-store.ts # API keys + model preferences
docker/
└── widget-base/ # Widget runtime Docker image
├── Dockerfile
└── template/ # Vite + React + Tailwind base
```
## 贡献
欢迎贡献。一些需要改进的领域：
- **模板** — 更多针对不同领域的预构建仪表板模板
- **小部件市场** — 在用户之间分享和导入小部件
- **部署** — 将小部件发布到 Vercel/Cloudflare 以进行永久托管
- **协作** — 实时多用户仪表板编辑
- **移动端** — 响应式布局和触摸手势支持
## 许可证
MIT
标签：AI仪表盘, DLL 劫持, Docker, ESC4, GNU通用公共许可证, iframe隔离, Mutation, Node.js, OSINT, React, Syscalls, 人机交互, 代码生成, 低代码, 可定制仪表盘, 可视化, 大语言模型, 安全防御评估, 无限画布, 沙箱环境, 渗透测试工具, 生成式AI, 索引, 网络安全, 自动化攻击, 自动化运维, 请求拦截, 隐私保护