@mushi-mushi/react
v1.2.0
Published
React bindings for Mushi Mushi — Provider, hooks, and ErrorBoundary integration
Maintainers
kensaurusReadme
@mushi-mushi/react
React / Next.js SDK for Mushi Mushi — the closed-loop bug intelligence layer that turns every user-felt friction point into institutional memory.
One-command setup:
npx mushi-mushiauto-detects React / Next.js and installs this package with the right env vars and prefix (NEXT_PUBLIC_,VITE_, etc.).Other frameworks:
@mushi-mushi/vue·@mushi-mushi/svelte·@mushi-mushi/angular·@mushi-mushi/react-native·@mushi-mushi/capacitor·@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 for the full before/after and pros/cons.
Quick start
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:
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:
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
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.0react-dom^18.0.0 || ^19.0.0
License
MIT