Faster Fixes

/fasterfixes

雑多なクライアントからのフィードバックを、エージェントがすぐに対応できるバグレポートに変換します。

ウェブサイト  •  ドキュメント  •  Twitter

概要

ウェブプロジェクトのレビュー段階では、クライアントからWhatsAppのメッセージや、ばらばらのスクリーンショット、ページへのリンクがない曖昧な説明でフィードバックが届きます。開発者は、何を意味しているのかを解読し、該当ページを探し、実行可能な内容にまとめるために時間を費やします。

Faster Fixesは、そのワークフローを置き換えます。クライアントは軽量なウィジェットを通じて、ウェブサイト上で直接フィードバックを残します。システムはスクリーンショット、ページURL、DOMセレクター、ブラウザーのメタデータ、利用可能な場合はReactコンポーネントツリーなど、完全なコンテキストを自動的に取得します。開発者はダッシュボード、またはMCP経由でAIコーディングエージェントから直接フィードバックを確認できます。

目指すのは、クライアントのコメントから修正完了までの短い道のりです。

クライアントからのフィードバック → 構造化されたコンテキスト → AI エージェントが修正

仕組み

1. ウィジェットでフィードバックを収集する

WordPress、Webflow、静的HTML、または任意のフレームワークで構築されたアプリなど、どのウェブサイトにもウィジェットを追加できます。Project IDを自分のものに置き換えて、タグを1つ貼り付けます。

<script
  src="https://cdn.jsdelivr.net/npm/@fasterfixes/widget@1/dist/widget.iife.js"
  data-project-id="proj_your_project_id"
  defer
></script>

Reactアプリケーションでは、代わりにReact埋め込みを使用します。同じウィジェットをマウントできます。

import { FeedbackProvider } from "@fasterfixes/react";

function App() {
  return (
    <FeedbackProvider projectId="proj_your_project_id">
      <YourApp />
    </FeedbackProvider>
  );
}

VueまたはNuxtアプリケーションでは、Vue埋め込みを使用します。

import { createFasterFixes } from "@fasterfixes/vue";

createApp(App)
  .use(createFasterFixes({ projectId: "proj_your_project_id" }))
  .mount("#app");

AngularまたはAnalogアプリケーションでは、Angular埋め込みを使用します。

import { provideFasterFixes } from "@fasterfixes/angular";

export const appConfig: ApplicationConfig = {
  providers: [provideFasterFixes({ projectId: "proj_your_project_id" })],
};

SvelteまたはSvelteKitアプリケーションでは、ルートコンポーネントまたはレイアウトでSvelte埋め込みを使用します。

<script lang="ts">
  import { initFasterFixes } from "@fasterfixes/svelte";

  initFasterFixes({ projectId: "proj_your_project_id" });
</script>

クライアントはページ上の任意の場所をクリックしてフィードバックを残せます。クライアント側で設定する必要はなく、ウィジェットがスクリーンショット、要素セレクター、ブラウザー情報を自動的に取得し、ReactサイトではReactコンポーネントツリーも取得します。詳しくは、スクリプト埋め込み、React、Vue、Angular、Svelteのドキュメントをご覧ください。

2. ダッシュボードでフィードバックを確認する

Faster Fixes ダッシュボードを開くと、プロジェクトとページごとに整理されたすべてのフィードバック項目を確認できます。各項目には、クライアントのコメントとキャプチャされたコンテキストが含まれます。項目を構造化された Markdown レポートとしてコピーすれば、AI コーディングエージェントにそのまま貼り付けられます。

3. MCP 経由でエージェントに処理させる

Faster Fixes MCP サーバーをエディターに接続します。AI コーディングエージェントは、フィードバックの取得、コンテキスト全体の確認、関連コードの特定、問題の修正、解決済みへの更新を、ターミナルを離れることなく行えます。

claude mcp add faster-fixes -s project \
  --env FASTER_FIXES_TOKEN=ff_agent_xxx \
  --env FASTER_FIXES_PROJECT=proj_xxx \
  -- npx -y @fasterfixes/mcp

MCP サーバーは Claude Code、Cursor、VS Code、Windsurf、Codex、Zed で動作します。

機能

• ビジュアルフィードバックウィジェット — クライアントは要素をクリックしてフィードバックを残せます。トレーニングは不要です
• コンテキストの自動キャプチャ — スクリーンショット、ページ URL、DOM セレクター、コンポーネントツリー、ブラウザー情報
• 開発者ダッシュボード — プロジェクト全体のフィードバックを整理して表示
• Markdown エクスポート — 任意のフィードバック項目を、AI エージェント向けの構造化されたバグレポートとしてコピー
• MCP サーバー — AI コーディングエージェントがプログラムからフィードバックを取得して解決
• エージェントスキル — スキルとしてインストールし、フィードバックから修正までのワークフローを自律的に実行
• GitHub 連携 — フィードバック項目から Issue を自動作成
• チームコラボレーション — 組織、プロジェクト、ロールベースのアクセス制御
• レビューリンク — クライアントにリンクを共有すれば、アカウントなしでフィードバックを残せます

パッケージ

このモノレポでは、7 つの npm パッケージを公開しています。

MCP のセットアップ

MCP サーバーは、list_feedbacks と update_feedback_status の 2 つのツールを公開します。組織に紐づくエージェントトークンを使用して Faster Fixes API に接続します。

{
  "mcpServers": {
    "faster-fixes": {
      "command": "npx",
      "args": ["-y", "@fasterfixes/mcp"],
      "env": {
        "FASTER_FIXES_TOKEN": "ff_agent_your_token_here",
        "FASTER_FIXES_PROJECT": "proj_your_project_id"
      }
    }
  }
}

{
  "mcpServers": {
    "faster-fixes": {
      "command": "npx",
      "args": ["-y", "@fasterfixes/mcp"],
      "env": {
        "FASTER_FIXES_TOKEN": "ff_agent_your_token_here",
        "FASTER_FIXES_PROJECT": "proj_your_project_id"
      }
    }
  }
}

{
  "servers": {
    "faster-fixes": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@fasterfixes/mcp"],
      "env": {
        "FASTER_FIXES_TOKEN": "ff_agent_your_token_here",
        "FASTER_FIXES_PROJECT": "proj_your_project_id"
      }
    }
  }
}

{
  "mcpServers": {
    "faster-fixes": {
      "command": "npx",
      "args": ["-y", "@fasterfixes/mcp"],
      "env": {
        "FASTER_FIXES_TOKEN": "ff_agent_your_token_here",
        "FASTER_FIXES_PROJECT": "proj_your_project_id"
      }
    }
  }
}

[mcp_servers.faster-fixes]
command = "npx"
args = ["-y", "@fasterfixes/mcp"]

[mcp_servers.faster-fixes.env]
FASTER_FIXES_TOKEN = "ff_agent_your_token_here"
FASTER_FIXES_PROJECT = "proj_your_project_id"

{
  "context_servers": {
    "faster-fixes": {
      "command": "npx",
      "args": ["-y", "@fasterfixes/mcp"],
      "env": {
        "FASTER_FIXES_TOKEN": "ff_agent_your_token_here",
        "FASTER_FIXES_PROJECT": "proj_your_project_id"
      }
    }
  }
}

エージェントトークンとプロジェクト ID は、ダッシュボードの組織設定で確認できます。

使用技術

• Next.js — アプリケーションフレームワーク
• React — UI ライブラリ
• Prisma — データベース ORM
• tRPC — 型安全な API レイヤー
• Tailwind CSS — スタイリング
• Better Auth — 認証
• Stripe — 請求処理
• Inngest — バックグラウンドジョブ
• Turborepo — モノレポ用ツール

ライセンス

このリポジトリは GNU AGPLv3 License のもとでライセンスされています。

ウィジェットパッケージ（@fasterfixes/widget、@fasterfixes/react、@fasterfixes/vue、@fasterfixes/angular、@fasterfixes/svelte、@fasterfixes/core）と MCP サーバー（@fasterfixes/mcp）は、アプリケーションで制限なく使用できるよう、MIT のもとでライセンスされています。