MUS

Explainability and feedback, embedded exactly where AI output is served.

When AI outputs need to be questioned, explained, or challenged, that should happen right there on the screen. Not in a form. Not in a meeting. MUS makes that possible for any AI product that has a web face.

What it looks like

Wrap any output with <FeedbackTarget>. Users hover. A toolbar appears exactly where the output lives.

import { MusProvider, FeedbackTarget } from '@datachef/mus'
import '@datachef/mus/styles.css'

function App() {
  return (
    <MusProvider config={{
      projectName: 'My App',
      slack: {
        proxyUrl: '/api/slack-proxy',
        supportTeamEmails: ['[email protected]'],
        feedbackChannelId: 'C0XXXXXXXXX',
      },
    }}>
      <FeedbackTarget sectionId="ai-summary" sectionName="AI Summary">
        <AISummaryOutput />
      </FeedbackTarget>
    </MusProvider>
  )
}

One hover. No forms. No context switching. The reaction lands in your Slack, attached to the exact section.

What the toolbar does

| Action | What happens | |--------|--------------| | 💬 Support | Opens a dedicated Slack channel between the user and your team. One click, full context already attached | | 🎤 Voice | Records a voice clip (up to 3 min), converted to MP3 and posted to Slack with the section name | | 👍 / 👎 Thumbs | Fire-and-forget: instant signal, zero friction | | ▶ Video | Plays an explainer video attached to that section. Context that stays, not a one-time tour |

Installation

npm install @datachef/mus

For voice feedback, also install the optional audio converter:

npm install ffmpeg-static   # optional; falls back to system ffmpeg

Server setup

The package ships ready-made server handlers. Keep SLACK_BOT_TOKEN on the server and never in the browser.

Next.js (App Router)

// app/api/mus/voice-upload/route.ts
export { POST } from '@datachef/mus/server'

// app/api/mus/standalone-upload/route.ts
export { POSTStandalone as POST } from '@datachef/mus/server'

// app/api/mus/support-channel/route.ts
export { POSTSupportChannel as POST } from '@datachef/mus/server'

# .env.local
SLACK_BOT_TOKEN=xoxb-your-bot-token

Adapter pattern (Slack, Discord, Teams, or custom)

import { createMusHandlers } from '@datachef/mus/server'
import { slackAdapter } from '@datachef/mus/adapters/slack'
import { discordAdapter } from '@datachef/mus/adapters/discord'

export const { POST, POSTStandalone, POSTSupportChannel } = createMusHandlers({
  adapter: [
    slackAdapter({ token: process.env.SLACK_BOT_TOKEN! }),
    discordAdapter({ webhookUrl: process.env.DISCORD_WEBHOOK_URL! }),
  ],
})

Vite SPA (no backend)

// vite.config.ts
import { musVitePlugins } from '@datachef/mus/vite'

export default defineConfig({
  plugins: [react(), ...musVitePlugins()],
})

Production: run the pre-built mus-server Docker image alongside your app. No Node.js server to maintain:

services:
  mus-server:
    image: ghcr.io/datachefhq/mus-server:latest
    environment:
      - SLACK_BOT_TOKEN=${SLACK_BOT_TOKEN}

User identity

MUS auto-fills name and email from your auth system via pluggable resolvers:

import { clerkResolver } from '@datachef/mus/resolvers/clerk'

<MusProvider config={{
  ...
  userResolver: clerkResolver(),
}}>

Built-in resolvers: stytchResolver, clerkResolver, auth0Resolver, nextAuthResolver. Or write your own: a resolver is just a React hook that returns { name, email }.

Full docs

mus.datachef.co: configuration reference, adapters, resolvers, and server setup guides for Next.js / Express / Hono / Vite.

Non-React backends

The component library is React (18 and 19). The server handlers and mus-server Docker image are framework-agnostic, so your backend can be anything.

Contributing

Read CONTRIBUTING.md and open a PR. Issues and feature requests welcome.

License

MIT © DataChef HQ