Skip to Content
v1.33.8 · shipped One-screen report · Looks like your app Read the changelog →
QuickstartChoose your stack

Quickstart

Built with Lovable or Bolt? No terminal needed. Skip this page and use Mushi Mushi in Lovable or Bolt: you paste one prompt, and it takes about five minutes. Building a phone app with Expo, React Native or Capacitor? Go to your phone app.

New here? Three steps: install, send a first report, get your first fix.
Walkthrough · 0:35What your users will seeWhat the person using your app sees: one button, one sentence, and the screen goes with it.

Want the whole loop first? How it works, on video.

Install

Run this in your app’s folder. It finds your framework, signs you in through your browser, installs the SDK and writes your settings to .env.local.

npx mushi-mushi
You’ll see: a report button in your app, and a new project in the console .

Send your first report

Tap the report button in your app and write one sentence. Or say yes when the wizard offers to send a test report.

You’ll see: the report in the console with a title, severity and likely cause, in about 10 seconds.

A test report is one made-up sentence, so its diagnosis has little to say. The console’s Send test report button goes one step further and shows a pre-written sample diagnosis, so you can see the shape of one. For a real diagnosis of your own code, see Already have Sentry issues? below.

Add your keys where your site is hosted

The wizard writes your settings to .env.local. That file stays on your computer: it never reaches Vercel, Netlify or any other host, so without this step the report button does not appear on your live site.

Add the same two settings where your site is built, then redeploy:

Your appSetting names
Next.jsNEXT_PUBLIC_MUSHI_PROJECT_ID and NEXT_PUBLIC_MUSHI_API_KEY
Vite (React, Vue, Svelte, Angular, Capacitor)VITE_MUSHI_PROJECT_ID and VITE_MUSHI_API_KEY
NuxtNUXT_PUBLIC_MUSHI_PROJECT_ID and NUXT_PUBLIC_MUSHI_API_KEY
AstroPUBLIC_MUSHI_PROJECT_ID and PUBLIC_MUSHI_API_KEY
Create React AppREACT_APP_MUSHI_PROJECT_ID and REACT_APP_MUSHI_API_KEY
  • Vercel: Project → Settings → Environment Variables (Production), then redeploy.
  • Netlify: Project configuration → Environment variables, then redeploy.

Copy the values from .env.local. These settings are read when the site is built, so a change only shows after the next deploy. The wizard prints the exact names for your app when it finishes.

You’ll see: the report button on your live site after the redeploy.

Get your first fix

Connect your AI editor. One click on the Connect page , or:

npx mushi-mushi setup --ide cursor

Then ask your editor: “Get the latest Mushi Mushi report and fix it.”

You’ll see: a fix brief in your editor: the cause, the files to change and how to check it. You review the change before it ships.

Already have Sentry issues? Bring them in

The fastest way to a real diagnosis of your own code is a bug you already know about.

# Import your newest unresolved Sentry issues as reports (up to 10 at a time) npx mushi-mushi sentry import --limit 5 # Or write one up yourself npx mushi-mushi reports file --title "Checkout button does nothing on mobile" --description "Tapping Pay on iPhone Safari does nothing. No error is shown."
  • sentry import needs Sentry connected first: in the console, open Integrations → Sentry and add your organization slug, project slug and an auth token that can read events and projects.
  • Both commands need a key that can write (mcp:write). If the CLI says your key cannot, run npx mushi-mushi login --upgrade-scope.
  • Connect GitHub for a diagnosis that knows your code. Without it, Mushi Mushi still explains the bug from the error and the report, but it cannot name your files. Connect your repository on the console’s Connect page.

Pick your framework

The wizard detects your framework for you. Pick yours to see what it installs and the one line it adds to your code.

Or install by hand
npm install @mushi-mushi/react

Then in your code: Wrap your app in <MushiProvider> (a client component in Next.js).

Full React / Next.js guide →

What you need first

  • An app you are building, for the web or for phones.
  • A Mushi Mushi account. The free plan is enough, and the wizard signs you in through your browser.
  • Optional: an AI code editor such as Cursor or Claude Code.

npx runs a tool from npm (the public library of JavaScript packages) without installing it for good. Here it runs the Mushi Mushi setup wizard.

Where to start

Pick the card that matches what you are doing right now. Each one links to the right next step. A first diagnosis usually arrives in about 10 seconds. Pick a starting point:

Keys and settings

The wizard makes two keys (passwords your tools use to talk to Mushi Mushi): an SDK key that can only send reports, which goes in your app, and a CLI key that can also read them, which stays on your computer and also works for the MCP tools in your editor.

Setting it up yourself? See Project ID & API keys for the setting names each framework expects.

The SDK needs only two settings: your project ID and API key, named with the prefix your framework expects (see examples/sdk.env.example). The repo’s root .env.example is only for running the Mushi Mushi server yourself. You do not need Supabase or an AI (LLM) key to use the SDK.

Troubleshooting

Not seeing what you expected?

Last updated on