frontman-ai/frontman

这是什么？

核心功能

• 01在运行中的应用里点选任意元素并描述修改需求。
• 02直接编辑渲染界面背后的源文件，并触发热更新。
• 03利用实时 DOM、计算样式、组件树和 source map 获取上下文。
• 04支持 Next.js（App 与 Pages Router）、Astro，以及 Vite 下的 React、Vue、Svelte。
• 05将开发服务器暴露为 MCP 服务器，供 AI 代理调用。
• 06支持自带密钥接入多个大模型服务商。

适用场景

• 让设计师或产品经理无需打开 IDE 即可修改文案和间距。
• 点选某个内部页面上有问题的元素，直接修复对应界面。
• 跨页面统一修改文案或布局，并在合并前审查 diff。
• 为 AI 助手提供源码之外的前端运行时上下文。

快速上手

1. 1

   在 Next.js 项目中安装 Frontman

   npx @frontman-ai/nextjs install
2. 2

   如果项目使用 src/ 目录，将 proxy.ts 移入 src/

   mv proxy.ts src/proxy.ts
3. 3

   启动开发服务器

   npm run dev
4. 4

   在浏览器中打开 http://localhost:3000/frontman

使用前须知

• !使用 AI 编辑功能需要来自 LLM 服务商的付费或自备 API 密钥。
• !官方托管和自托管打包方式仍在演进中。
• !目前仅支持特定框架，Remix、Nuxt、SolidStart、Qwik 和 Phoenix LiveView 尚不支持。
• !采用拆分许可证（库为 Apache 2.0，服务器为 AGPL-3.0），服务器部分存在 Copyleft 义务。

标签

常见问题

frontman 是什么？

一款运行在浏览器中的开源 AI 编程代理，点选页面元素即可直接修改对应源码。 Frontman 是一款 AI 编程代理，它基于正在运行的页面工作，而不只是读取源码文件。你在本地应用中点选某个元素，用自然语言描述修改需求，它会找到对应的源文件进行编辑并热更新。它读取实时 DOM、组件树、计算后的 CSS、路由、source map 和服务端日志，以定位负责该界面的组件。

frontman 可以免费使用吗？用的什么许可证？

frontman 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。

frontman 还在维护吗？

活跃维护中。frontman 最近一次提交是在 2026年10月20日。

frontman 适合用来做什么？

让设计师或产品经理无需打开 IDE 即可修改文案和间距。 点选某个内部页面上有问题的元素，直接修复对应界面。 跨页面统一修改文案或布局，并在合并前审查 diff。 为 AI 助手提供源码之外的前端运行时上下文。

frontman 怎么安装和运行？

在 Next.js 项目中安装 Frontman: npx @frontman-ai/nextjs install 如果项目使用 src/ 目录，将 proxy.ts 移入 src/: mv proxy.ts src/proxy.ts 启动开发服务器: npm run dev 在浏览器中打开 http://localhost:3000/frontman

在哪里获取 frontman？

源代码和安装说明在 GitHub 上：https://github.com/frontman-ai/frontman