Faster Fixes

/fasterfixes

将杂乱的客户反馈转化为可供 Agent 处理的错误报告。

网站  •  文档  •  Twitter

关于

在 Web 项目的审核阶段，客户会通过 WhatsApp 消息、零散的截图以及没有页面链接的模糊描述来发送反馈。开发者随后要花时间弄清客户的意思、找到正确的页面，并将反馈转化为可执行的事项。

Faster Fixes 取代了这种工作流程。客户通过轻量级工具直接在网站上留下反馈。系统会自动捕获完整上下文——截图、页面 URL、DOM 选择器、浏览器元数据，以及可用时的 React 组件树。开发者可以从控制面板获取这些反馈，也可以直接通过 MCP 从 AI 编码 Agent 获取。

目标是缩短从客户评论到问题修复的路径：

客户反馈 → 结构化上下文 → AI Agent 修复问题

工作原理

1. 使用工具收集反馈

将工具添加到任何网站：WordPress、Webflow、静态 HTML，或使用任意框架构建的应用。粘贴一个标签，并将 Project ID 替换为你自己的：

<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 编码 Agent 中。

3. 或者让 Agent 通过 MCP 处理

将 Faster Fixes MCP 服务连接到编辑器。你的 AI 编码 Agent 可以获取新反馈、读取完整上下文、定位相关代码、修复问题并将其标记为已解决——无需离开终端。

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 Agent 使用
• MCP 服务 — AI 编码 Agent 以编程方式获取并解决反馈
• Agent 技能 — 安装为技能，实现自主的反馈到修复工作流
• GitHub 集成 — 根据反馈条目自动创建 issue
• 团队协作 — 组织、项目和基于角色的访问控制
• 评审链接 — 分享链接给客户，让他们无需账号即可留下反馈

软件包

此 monorepo 发布七个 npm 软件包：

MCP 设置

MCP 服务提供两个工具：list_feedbacks 和 update_feedback_status。它使用组织专属的 Agent 令牌连接到 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"
      }
    }
  }
}

你可以在仪表板的组织设置中找到 Agent 令牌和项目 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 许可证，可在你的应用中不受限制地使用。