frontman-ai/frontman

これは何？

主な機能

• 01実行中のアプリで任意の要素をクリックして選択し、変更内容を伝えられます。
• 02描画されたUIに対応するソースファイルを編集し、ホットリロードを実行します。
• 03ライブDOM、計算済みCSS、コンポーネントツリー、ソースマップをコンテキストとして利用します。
• 04Next.js（App Router、Pages Router）、Astro、Vite（React、Vue、Svelte）に対応します。
• 05開発サーバーをAIエージェント向けのMCPサーバーとして公開します。
• 06複数のLLMプロバイダーでBYOKに対応します。

ユースケース

• IDEを開かずに、デザイナーやプロダクトマネージャーがコピーや余白を修正できます。
• 問題のある要素をクリックして、特定の社内ページのUIバグを修正できます。
• アプリ全体にまたがるテキストやレイアウトの変更を行い、マージ前に差分をレビューできます。
• AIアシスタントに、ソースファイル以外のフロントエンド固有のコンテキストを提供できます。

クイックスタート

1. 1

   Frontman を Next.js プロジェクトにインストールします

   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 キーまたは BYOK API キーが必要です。
• !公式ホスティングとセルフホスティングのパッケージングは、現在も整備中です。
• !対応フレームワークは限定されています。Remix、Nuxt、SolidStart、Qwik、Phoenix LiveView はまだサポートされていません。
• !ライセンスは分割されており（ライブラリは Apache 2.0、サーバーは AGPL-3.0）、サーバーにはコピーレフトの義務が伴います。

トピック

よくある質問

frontman とは？

ブラウザ上で動作するオープンソースのAIコーディングエージェント。アプリ内の要素をクリックすると、そのソースコードを編集できます。 Frontmanは、ソースファイルだけでなく、実行中のページを起点に動作するAIコーディングエージェントです。ローカルアプリで要素をクリックし、変更内容を自然な英語で伝えると、該当するソースファイルを編集してホットリロードします。ライブDOM、コンポーネントツリー、計算済みCSS、ルート、ソースマップ、サーバーログを参照し、UIを担当するコンポーネントを特定します。

frontman は無料で使えますか？ライセンスは？

frontman は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

frontman は今もメンテナンスされていますか？

活発にメンテナンス中。frontman の最終コミットは 2026年10月20日 です。

frontman は何に使えますか？

IDEを開かずに、デザイナーやプロダクトマネージャーがコピーや余白を修正できます。 問題のある要素をクリックして、特定の社内ページのUIバグを修正できます。 アプリ全体にまたがるテキストやレイアウトの変更を行い、マージ前に差分をレビューできます。 AIアシスタントに、ソースファイル以外のフロントエンド固有のコンテキストを提供できます。

frontman のインストール方法は？

Frontman を Next.js プロジェクトにインストールします: 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