frontman-ai/frontman

何を解決するか

Frontman は、非技術者（プロダクトマネージャーやデザイナーなど）が IDE を開くことなく、ブラウザ上で直接フロントエンドの修正を行うことができる AI コーディングエージェントです。ユーザーが要素をクリックし、英語で変更内容を説明するだけで、実際のソースコードを更新できます。デザインの品質保証（QA）や開発者への引き渡しの煩わしさを解消します。

動作方法

Frontman は、ローカル開発サーバー（Next.js、Astro、Vite をサポート）と統合し、MCP サーバーに変換します。これにより、AI エージェントはライブブラウザコンテキスト（DOMツリー、計算済みCSS、コンポーネントツリー、ソースマップなど）およびサーバーサイドコンテキスト（ルート、ログなど）にアクセスできます。ユーザーが変更を説明すると、Frontman は正しいソースファイルを特定し、編集内容を生成してホットリロードをトリガーし、結果を即座に表示します。

対象ユーザー

• デベロッパーを待たずに、コピー、余白、色、レイアウトなどの問題を修正したいプロダクトマネージャーやデザイナー。
• 伝統的な IDE ベースのツールよりも、より豊かな視覚的コンテキスト（レンダリング済み出力）を持つ AI ツールを求めるフロントエンド開発者。
• フロントエンドの引き渡しコストと仕上げの手間を削減したいチーム。

特徴

• 視覚的編集: 実行中のアプリ内の任意の要素をクリックして編集対象にします。
• フレームワーク対応: Next.js（App と Pages Router）、Astro、Vite（React、Vue、Svelte）に対応。
• 広範な LLM 対応: OpenAI、Anthropic、OpenRouter、Fireworks AI、NVIDIA、Google、xAI など、独自のキー（BYOK）を導入可能。
• オープンソース: スプリットライセンス（Apache 2.0 および AGPL-3.0）で提供。
• MCP 統合: ブラウザとソースコードを橋渡しする Model Context Protocol（MCP）を使用。