Bug report widget for vanilla JavaScript

This quickstart adds the Mushi Mushi bug-report widget to a site with no framework, or to any framework you’d rather drive imperatively. Without a bundler, use the script tag.

Try it live

Get your project ID and API key

The SDK needs two values from a Mushi Mushi project.

• Fastest: run npx mushi-mushi in your app’s folder. It signs you in through the browser, creates or picks a project, installs the SDK and writes both values to .env.local.
• By hand: create a free account  (no card) and create a project. The panel that opens shows the project ID and an API key that starts with mushi_. Copy the key now: it is shown once. You can mint another under Set up → Test it → Generate API key.
• Self-hosting? Your own console gives you the same two values. See Self-hosting.

Put them in .env.local as VITE_MUSHI_PROJECT_ID and VITE_MUSHI_API_KEY. With the script tag, they go in data-project and data-key instead.

1. Install

pnpm add @mushi-mushi/web

2. Initialize

import { Mushi } from '@mushi-mushi/web'
 
export const mushi = Mushi.init({
  projectId: import.meta.env.VITE_MUSHI_PROJECT_ID,
  apiKey: import.meta.env.VITE_MUSHI_API_KEY,
})

3. Submit

import { mushi } from './mushi'
 
document.querySelector('#report-bug')?.addEventListener('click', async () => {
  await mushi.captureEvent({
    description: 'Login button does nothing on mobile Safari.',
    severity: 'medium',
  })
})

captureEvent files the report without opening any UI. To open the widget instead, call mushi.report().

The widget launcher mounts automatically on Mushi.init. Set widget: { trigger: 'hidden' } to keep it out of sight and open it only from your own buttons.

No bundler: script tag

On a site with no build step (plain HTML, Rails or Django templates, WordPress, Webflow), paste one tag into <head> instead of installing the package:

<script async
  src="https://cdn.jsdelivr.net/npm/@mushi-mushi/web@1/dist/mushi.loader.global.js"
  data-project="YOUR_PROJECT_ID"
  data-key="YOUR_API_KEY"
></script>

The file is the loader that @mushi-mushi/web publishes to npm, served by jsDelivr and pinned to major version 1, so minor and patch releases reach you without editing the tag. It reads its settings from its own data-* attributes and calls Mushi.init once; including the tag twice does not start a second copy. With no data-project and data-key it does nothing.

Anything else (capture options, beforeSend, captureEvent from your own code) needs the npm package above. The console’s Script tag install tab prints this tag with your project ID and key filled in.