KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

remediate

★ 10 Open GitHub ↗

Feedback widget for your apps / websites

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# remediate

feedback widget for react. screenshots, screen recordings, voice notes, element annotations. one component on the client, one helper on the server. no accounts, no saas, no storage.

## install

```bash
npm install remediate
```

## add the component

```tsx
import { Remediate } from "remediate";

export default function App() {
  return (
    <>
      <YourApp />
      <Remediate endpoint="/api/feedback" />
    </>
  );
}
```

> **next.js app router:** `Remediate` is a client component. wrap it in a `"use client"` file or place it inside a component that already has one.

a floating button appears in the corner. click it, capture, submit. styles inject themselves.

## add the server route

```ts
import { parseFeedback } from "remediate/server";

export async function POST(req: Request) {
  const { submission, files } = await parseFeedback(req);

// submission.items is the actual content
  const body = submission.items
    .map((item) => {
      if (item.type === "textNote") return item.text;
      if (item.type === "annotation") return item.note;
      return item.additionalText;
    })
    .filter(Boolean)
    .join("\n");

// files is a Map<string, ParsedFile>, not an array
  for (const [, file] of files) {
    console.log(file.filename, file.category, file.blob.size);
  }

return Response.json({ ok: true, id: submission.id });
}
```

`submission.items` is the content — a mixed array of text notes, annotations, photos, videos, and voice notes. `files` is a `Map<string, ParsedFile>` keyed by field name.

works anywhere you have a web `Request`: next.js, remix, hono, bun, deno, cloudflare workers.

## try it without a backend

```tsx
<Remediate onSubmit={(payload) => console.log(payload)} />
```

open devtools, capture something, watch the payload.

## props

| prop | type | description |
|---|---|---|
| `endpoint` | `string` | url to POST feedback as FormData |
| `onSubmit` | `(payload: FeedbackSubmission) => void` | called on submit with the full payload |
| `metadata` | `Record<string, unknown>` | extra data merged into the submission |
| `headers` | `Record<string, string> \| () => Record<string, string>` | custom headers on the POST (e.g. auth tokens) |
| `onError` | `(error: Error) => void` | called if the POST fails |
| `captureTypes` | `CaptureType[]` | which capture modes to expose (defaults to all) |
| `open` | `boolean` | controlled open state. pair with `onOpenChange` |
| `onOpenChange` | `(open: boolean) => void` | called when the user opens or closes the widget |
| `debug` | `boolean` | log lifecycle events to the console |
| `messages` | `Partial<WidgetMessages>` | override any user-visible string |

## claude code

```bash
npx skills add fvckprth/remediate
```

then run `/remediate` in any react project. detects your framework, picks a backend, installs the package, scaffolds the server route, and wires the component into your layout.

after setup, the skill also handles the full lifecycle — just ask:

- **add integration** — add or replace a backend (fan-out to multiple destinations)
- **wire auth** — detect clerk/nextauth/supabase and wire `metadata` + `headers`
- **test endpoint** — send a synthetic submission to verify the route works
- **upgrade** — check npm for latest and handle breaking changes
- **scaffold dashboard** — generate an admin page to view submitted feedback
- **capture gating** — configure `captureTypes` (static or conditional by role)
- **remove** — clean uninstall, preserving captured data

works for any agent that reads agent skills — claude code, codex, cursor, opencode, and the rest.

## what gets captured

- **photo** — screenshot of a selected region, rendered from the dom. no permission prompt.
- **video** — screen recording via getDisplayMedia. desktop only. requires https.
- **voiceNote** — microphone audio via getUserMedia. requires https.
- **annotation** — pin on a dom element. captures css selector, dom path, computed styles, bounding rect, nearby text.
- **textNote** — whatever the user types.
- **environment** — browser, os, viewport, screen, language, timezone, color scheme (auto-captured).

cross-origin images and iframes render blank in screenshots. video recording is not available on mobile safari.

## docs

[www.remediate.ski/docs](https://www.remediate.ski/docs)

- [getting started](https://www.remediate.ski/docs/install)
- [recipes](https://www.remediate.ski/docs/recipes): slack, discord, github issues, linear, email, postgres, vercel blob
- [payload](https://www.remediate.ski/docs/payload): what's in the json
- [privacy](https://www.remediate.ski/docs/privacy): what gets captured, masking, server-side handling
- [reference](https://www.remediate.ski/docs/reference): every prop, runtime support, cors, csp, bundle size
- [faq](https://www.remediate.ski/docs/faq)

## license

mit

remediate

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README