36 个可安装 Blocks
Blocks 画廊将组件组合成可安装的体验块，每个都运行真实模型。包括 Chat、RAG Chat、Object Detector、Voice Notes、Image Search、PII Redactor 等。
价格MIT 许可，免费使用
平台Web
归类AI 智能体
收录2025-01-01
复核2025-01-01
编辑评分
4.4 / 5
★★★★☆
LocalMode UI编辑总结
LocalMode UI 是一套 shadcn 风格的 AI 界面组件注册表，提供 100+ 个可复制的 React 组件和 36 个可安装的 Blocks，覆盖 Chat、Knowledge & RAG、Vision、Audio、Photo、Agents 和 Privacy 等场景。组件在浏览器内本地运行，无需服务器和 API key，数据不出设备。采用 MIT 许可，免费使用。安装需配置 @localmode 命名空间后通过 shadcn CLI 添加。
LocalMode UI是什么？
LocalMode UI 是一个 shadcn 风格的注册表，提供可复制、可组合的浏览器端 AI 界面原语。它是 @localmode/core 和 @localmode/react 钩子之上的 UI 层，用于构建聊天界面、模型下载进度、设备能力门控等本地优先的交互表面。
所有组件完全在浏览器中运行，推理在设备端完成，无需服务器和 API key，数据不离开用户设备。组件是纯展示型的，只渲染普通 props，不拥有编排状态，因此可以零依赖安装，并与任意后端配合使用。组件使用 shadcn/ui CSS 变量进行样式设计，可自动继承现有 shadcn 项目的主题。
安装方式与 shadcn/ui 类似，不是 npm 包，而是通过 shadcn CLI 将代码复制到项目中。在 components.json 中配置 @localmode 命名空间后，可安装单个组件、整个组件族或全部目录。开发者可以将其与 LocalMode 钩子配对使用，也可以接入 Vercel AI SDK 或自己的数据源。
LocalMode UI核心功能
本地优先设计
所有组件完全在浏览器中运行，推理在设备端完成。无需服务器和 API key，数据不离开用户设备。
云兼容契约
组件是纯展示型的，只渲染普通 props，不拥有编排状态。可零依赖安装，与任意后端配合，也可接入 Vercel AI SDK 或自有数据。
shadcn 风格安装
不是 npm 包，通过 shadcn CLI 复制代码。
LocalMode UI值不值得用？
LocalMode UI 适合需要在浏览器内快速搭建本地 AI 界面的前端开发者。它提供 100+ 组件和 36 个可安装 Blocks，全部本地运行，无需服务器和 API key，MIT 许可免费。对于希望数据不出设备、强调隐私的 AI 应用，它是少有的现成 UI 方案。但注意：它只是 UI 层，不包含模型编排逻辑，需要配合 @localmode/core 或 @localmode/react 使用。
建议选它的情况
- 需要本地优先、隐私优先的 AI 界面组件的前端开发者
- 已经使用 shadcn/ui 并希望快速添加 AI 交互界面的项目
- 希望复制代码而非安装 npm 包的团队
不建议选它的情况
- 需要开箱即用的完整 AI 应用，而非 UI 组件的用户
- 不熟悉 React 或 shadcn 生态的开发者
- 需要服务端渲染或非浏览器环境的项目
LocalMode UI使用建议
入门先把路子走对
- 配置命名空间在项目的 components.json 中配置 @localmode 命名空间，然后使用 npx shadcn@latest add @localmode/ui/<name> 安装组件。
- 从 Blocks 开始先浏览 Blocks 画廊，选择一个接近需求的体验块安装，再按需替换或修改其中的组件。
- 检查浏览器能力访问 /capabilities 页面查看当前浏览器对 WebGPU、设备内存等特性的支持情况，确保能运行目标模型。
进阶省时间也省钱
- 安装整个家族使用 @localmode/ui/<family> 安装整个组件族，如 @localmode/ui/conversation，减少逐个安装的重复操作。
- 接入自有后端组件是纯展示型的，可以脱离 LocalMode 钩子，直接接入 Vercel AI SDK 或自有数据源。
LocalMode UI适合谁用？
前端开发者
推荐熟悉 React 和 shadcn/ui，需要快速为项目添加 AI 交互界面，LocalMode UI 提供 100+ 可复制组件。
隐私敏感型应用团队
推荐要求数据不出设备、无需服务器和 API key，LocalMode UI 的本地优先设计满足此需求。
shadcn 现有用户
推荐已使用 shadcn/ui 的项目可直接安装组件并继承主题，无需额外样式适配。
非技术产品经理
不推荐LocalMode UI 是代码组件库，需要编写 React 代码才能使用，不适合无编程背景的用户。
LocalMode UI优点和缺点
优点
- 100+ 组件和 36 个 Blocks，覆盖 Chat、RAG、Vision 等七大类场景
- 完全在浏览器运行，无需服务器和 API key，数据不出设备
- MIT 许可，免费使用，可自由复制和修改代码
- 复制自有代码模式，与 shadcn/ui 主题无缝集成
- 组件纯展示型，可独立于 LocalMode 钩子接入任意后端
缺点
- 只是 UI 层，不包含模型编排逻辑，需额外集成核心库
- 依赖 shadcn CLI 和 React 技术栈，非此生态需额外适配
- 官网未公开具体组件列表和详细 API 文档，需安装后查阅
- 主要面向现代浏览器，老旧浏览器可能仅支持 WASM 回退
LocalMode UI常见问题
LocalMode UI 是免费的吗？＋
是的。LocalMode UI 采用 MIT 许可证，免费使用。官网明确说明是 MIT-licensed 且 free to use。
需要 API key 或服务器吗？＋
不需要。Blocks 通过 WebGPU 或 WebAssembly 在设备端运行真实模型，没有服务器也没有 API key，安装仅限客户端。
支持哪些浏览器？＋
支持 WebGPU 的浏览器（Chrome 和 Edge 113+、Safari 26+）可获得 GPU 加速推理；其他现代浏览器回退到 WebAssembly。
如何安装组件？＋
在 components.json 中配置 @localmode 命名空间，然后运行 npx shadcn@latest add @localmode/ui/<name>。组件是复制自有的，并继承你的 shadcn/ui 主题。
可以离线使用吗？＋
可以。初始模型下载后，推理完全在浏览器中运行，无网络请求，数据不离开设备。网站本身也是可安装的 PWA，外壳可离线工作。
