# @mushi-mushi/react

> React and Next.js bug report widget and hooks. The bug mediator for AI-built apps: plain-English diagnosis + a ready fix, in your editor.

Latest version **1.21.0** (published 2026-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mushi-mushi/react
pnpm add @mushi-mushi/react
yarn add @mushi-mushi/react
bun add @mushi-mushi/react
```

## Health

**Score 50/100 (C)** — status: active.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.21.0 |
| Published | 2026-06-23 |
| First published | 2026-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Kenji Sakuramoto |
| Maintainers | kensaurus |
| Keywords | mushi-mushi, bug-report-widget, bug-translation, vibe-coding, ai-debugging, ai-triage, auto-fix, mcp, cursor, claude-code, react, next.js, nextjs, provider, hooks, error-boundary, session-replay, screenshot, sentry-companion, ai-agent, sdk |

## Links

- npm: https://www.npmjs.com/package/@mushi-mushi/react
- Repository: https://github.com/kensaurus/mushi-mushi
- Homepage: https://kensaur.us/mushi-mushi
- Issues: https://github.com/kensaurus/mushi-mushi/issues
- npm.io page: https://npm.io/package/@mushi-mushi/react

## Alternatives

- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads

## Recent versions

- 1.21.0 (latest) — 2026-06-23
- 1.10.0 — 2026-06-13
- 1.6.0 — 2026-05-27
- 1.2.0 — 2026-05-20
- 1.1.0 — 2026-05-20
- 1.0.0 — 2026-05-09
- 0.9.0 — 2026-05-05
- 0.8.0 — 2026-04-28
- 0.7.0 — 2026-04-27
- 0.5.0 — 2026-04-24
- 0.4.1 — 2026-04-23
- 0.4.0 — 2026-04-23
- 0.3.1 — 2026-04-22
- 0.3.0 — 2026-04-22
- 0.2.1 — 2026-04-20
- … 2 more at https://npm.io/package/@mushi-mushi/react/versions

## README

# @mushi-mushi/react

> **Your AI wrote it. Mushi tells you why it broke.**

React / Next.js SDK for [Mushi Mushi](https://www.npmjs.com/package/mushi-mushi) — the closed-loop bug intelligence layer that turns every user-felt friction point into institutional memory.

> **One-command setup:** `npx mushi-mushi` auto-detects React / Next.js and installs this package with the right env vars and prefix (`NEXT_PUBLIC_`, `VITE_`, etc.).
>
> **Other frameworks:** [`@mushi-mushi/vue`](https://npmjs.com/package/@mushi-mushi/vue) · [`@mushi-mushi/svelte`](https://npmjs.com/package/@mushi-mushi/svelte) · [`@mushi-mushi/angular`](https://npmjs.com/package/@mushi-mushi/angular) · [`@mushi-mushi/react-native`](https://npmjs.com/package/@mushi-mushi/react-native) · [`@mushi-mushi/capacitor`](https://npmjs.com/package/@mushi-mushi/capacitor) · [`@mushi-mushi/web`](https://npmjs.com/package/@mushi-mushi/web)

## What this does

Adds a floating 🐛 button (or your own button via `MushiTrigger`) to your React app. Users click it, scribble a note, and Mushi captures: a screenshot, the current route, the user's description, and the last few seconds of console and network activity. An AI classifies the report (severity, category, component) within seconds. Duplicate reports across users collapse to one row. Stable clusters are promoted to named learning rules that feed into your next PR review and your next AI agent run.

See the [main README](https://www.npmjs.com/package/mushi-mushi) for the full before/after and pros/cons.

## Install

```bash
npm install @mushi-mushi/react
# or: npx mushi-mushi
```

## Quick start

```tsx
import { MushiProvider } from '@mushi-mushi/react';

function App() {
  return (
    <MushiProvider config={{
      projectId: process.env.REACT_APP_MUSHI_PROJECT_ID!,  // UUID from Admin → Projects
      apiKey: process.env.REACT_APP_MUSHI_API_KEY!,        // from Admin → Settings → API Keys
    }}>
      <YourApp />
    </MushiProvider>
  );
}
```

**Next.js App Router** — put the provider in `app/layout.tsx`:

```tsx
import { MushiProvider } from '@mushi-mushi/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <MushiProvider config={{
          projectId: process.env.NEXT_PUBLIC_MUSHI_PROJECT_ID!,
          apiKey: process.env.NEXT_PUBLIC_MUSHI_API_KEY!,
        }}>
          {children}
        </MushiProvider>
      </body>
    </html>
  );
}
```

## Headless integration

Attach the reporter to any element in your existing design system:

```tsx
import { MushiTrigger, MushiAttach } from '@mushi-mushi/react'

// Polymorphic wrapper — any element or component
<MushiTrigger as="button" category="bug" className="my-feedback-btn">
  Report a bug
</MushiTrigger>

// With Radix / shadcn
<MushiTrigger as={Button} variant="ghost" size="sm">Feedback</MushiTrigger>

// Attach to an element you can't wrap
<MushiAttach selector="#help-button" category="bug" />
```

## API

```tsx
import { MushiProvider, useMushi, useMushiReport, useMushiReady, MushiErrorBoundary } from '@mushi-mushi/react'
```

| Export | Purpose |
|---|---|
| `<MushiProvider>` | Context wrapper — initialize once at your app root |
| `useMushi()` | SDK instance: `open()`, `close()`, `setUser()`, `setContext()` |
| `useMushiReport()` | `submitReport({ description, category })` convenience hook |
| `useMushiReady()` | `boolean` — true once the SDK has finished initializing |
| `<MushiErrorBoundary>` | Catches React render errors and pre-fills a report with the stack |
| `<MushiTrigger>` | Polymorphic headless trigger — wraps any element |
| `<MushiAttach>` | Attaches reporter to a CSS selector without wrapping |

## Bundle size

~819 B brotli. Requires `@mushi-mushi/core` and `@mushi-mushi/web` (installed automatically — not bundled inline).

## Peer dependencies

- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0

## License

MIT


<!-- mushi-readme-stats-footer -->
---

<sub>Monorepo scale (June 2026): 47 edge functions · 256 SQL migrations · 13 outbound plugins · 11 inbound adapters · 18 pipeline agents. Canonical counts: <a href="https://github.com/kensaurus/mushi-mushi/blob/master/docs/stats.md">docs/stats.md</a> · <code>pnpm docs-stats</code></sub>

---
_Source: https://npm.io/package/@mushi-mushi/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._