# Feedbacker - LLM Setup Instructions
Feedbacker provides visual feedback capture with two products:
- **React widget** (`feedbacker-react`) — embed in your React app
- **Chrome extension** — works on any website, no code needed
## React Widget Installation
```bash
npm install feedbacker-react @zumer/snapdom
```
### Setup
```jsx
import { FeedbackProvider } from 'feedbacker-react';
function App() {
return (
{
console.log('Feedback received:', feedback);
}}
>
);
}
```
### Configuration Options
- `position`: "top-left" | "top-right" | "bottom-left" | "bottom-right"
- `primaryColor`: Any CSS color value
- `captureLibrary`: "snapdom" (recommended) or "html2canvas"
- `enabled`: boolean (default: true)
- `autoCopy`: boolean — copy feedback to clipboard
- `autoDownload`: false | true | "markdown" | "zip"
- `onFeedbackSubmit`: Callback for handling submitted feedback
### Framework Examples
**Next.js App Router:**
```jsx
// app/layout.tsx
import { FeedbackProvider } from 'feedbacker-react';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**Vite / CRA:**
```jsx
import { FeedbackProvider } from 'feedbacker-react';
ReactDOM.createRoot(document.getElementById('root')).render(
);
```
### Programmatic API
```jsx
import { useFeedback, useFeedbackEvent } from 'feedbacker-react';
function MyComponent() {
const { feedbacks, exportFeedback } = useFeedback();
const { emit } = useFeedbackEvent();
const startFeedback = () => emit('selection:start', {});
const handleExport = () => exportFeedback({ format: 'zip' });
}
```
## Chrome Extension
Download from GitHub Releases. No code needed — works on any website.
Keyboard shortcut: Alt+Shift+F. Configurable position and color via popup.
## Feedback Data Structure
```typescript
{
id: string;
componentName: string;
componentPath: string[];
comment: string;
screenshot?: string;
url: string;
timestamp: string;
browserInfo: {
userAgent: string;
viewport: { width: number; height: number };
platform?: string;
};
}
```
## Notes
- @zumer/snapdom recommended for 2x faster screenshots
- Feedback stored locally (localStorage for widget, chrome.storage for extension)
- Zero performance impact when inactive
- React 18+ required for widget
- Extension works on Chrome/Chromium