Getting Started
Quickstart
Go from zero to collecting your first feedback in under 5 minutes.
1. Install the widget
npm install @fasterfixes/react2. Add the provider
Wrap your app with FeedbackProvider:
import { FeedbackProvider } from "@fasterfixes/react";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<FeedbackProvider apiKey="your-api-key">{children}</FeedbackProvider>
</body>
</html>
);
}3. Get your API key
Go to faster-fixes.com, create a project, and copy the API key. Paste it into the apiKey prop above.
4. Collect your first feedback
To test the widget yourself:
- In your project dashboard, go to Reviewers and create a reviewer (e.g. "Client - John"). Copy the review link.
- Open your site using that link. A floating button appears — click it, then click any element on the page to annotate it. Write a comment and submit.
- Go back to your project's Inbox. The feedback appears with the screenshot, page URL, browser info, and DOM selector.
In practice, share the review link with your actual clients so they can leave feedback directly. See Reviewer Tokens for more on managing reviewers and access.
5. Connect your AI coding agent
Create an agent token in Integrations. Then add .mcp.json to your project root:
{
"mcpServers": {
"faster-fixes": {
"command": "npx",
"args": ["-y", "@fasterfixes/mcp"],
"env": {
"FASTER_FIXES_TOKEN": "ff_agent_xxx",
"FASTER_FIXES_PROJECT": "proj_xxx"
}
}
}
}See the MCP setup guide for other editors (Cursor, VS Code, Windsurf, Codex, Zed).
🎉 That's it! You can now ask your AI agent to fetch client feedback, locate the relevant code, and fix issues automatically.