React SDK reference

@mihe-dev/react is ES modules with TypeScript types, for React 18 and later. Its entry is marked "use client", so in a Next.js App Router app you can import it from a server component's file and render the provider in your layout.

npm install @mihe-dev/react

Not using React? The JavaScript SDK is the same integration as function calls, and lists its methods.

AssistantProviderCopy Anchor Link

Connects to the runtime and makes the assistant available to everything inside it. Render it once, near the root, around the parts of your app the assistant should know about.

<AssistantProvider
  url="wss://runtime.mihe.dev/v1/ws"
  publicKey={process.env.NEXT_PUBLIC_MIHE_PUBLIC_KEY!}
  getUserToken={() => fetch("/api/mihe/token").then((r) => r.text())}
  navigate={(route) => router.push(route)}
  onActionComplete={() => queryClient.invalidateQueries()}
>
  {children}
  <AssistantWidget />
</AssistantProvider>

AssistantWidgetCopy Anchor Link

The assistant's interface: by default an orb that opens a menu of chat and voice. Render it inside the provider. Most of its look is set in the dashboard, so it changes without a deploy; a prop here overrides the setting. See the widget.

AssistantPanelCopy Anchor Link

The conversation panel on its own, for embedding in your layout, such as a sidebar. It takes title, placeholder, showClose (off by default here), showVoice and style, as AssistantWidget does. See your panel too.

MiheMarkCopy Anchor Link

The Mihe logo as a React component, for a launcher of your own.

HooksCopy Anchor Link

Every hook works anywhere inside the provider, and does nothing outside one, so shared components can call them whether or not a page has the assistant.

useAssistantScreen(screen)Copy Anchor Link

Declares the screen the user is on. Call it once per page or view. See screens and components.

useAssistantComponent(componentKey, meta)Copy Anchor Link

Declares something the assistant can talk about or point at, and returns the props that make it findable. Spread them onto a real DOM element; without them it can be described but not highlighted.

const props = useAssistantComponent("orders.newButton", {
  type: "button",
  label: "New order",
  description: "Opens the form to create an order",
});
return <button {...props}>New order</button>;

Returns { "data-mihe-component": string }.

useAssistantAction(action)Copy Anchor Link

Supplies the code for a frontend action the assistant may run in the browser. The action's risk, permissions and confirmation are set in your registry, not here. See actions.

useAssistantTabs(tabs)Copy Anchor Link

Lets the assistant see which tab is open and switch to another.

useAssistantTable(table)Copy Anchor Link

Lets the assistant read a table. Rows aren't sent with the screen: the assistant reads them when a question needs them, and only the columns you declare ever leave the browser.

query lets the assistant search your data the way your page would:

A search only reads; it changes what's shown, never what's stored.

useAssistantChart(chart)Copy Anchor Link

Lets the assistant explain a chart. Each series is summarised in the browser (start, end, high, low, total and the largest steps), and exact points are read only when asked for. A picture of the chart is never sent.

useAssistantValues(key, values)Copy Anchor Link

Adds figures a component shows to the screen's visibleData, under key: for values that live below the page that calls useAssistantScreen, like the stat cards inside a tab. They're dropped when the component unmounts.

useAssistantTrigger()Copy Anchor Link

Makes any element open the assistant, with the keyboard and screen-reader props a real button has. Returns null when there's no assistant, so you can render nothing rather than a dead control.

const trigger = useAssistantTrigger();
return trigger ? <div {...trigger}>Ask the assistant</div> : null;

useAssistantPrompt(text)Copy Anchor Link

A one-tap "ask this", for suggestion chips and help links. Returns a click handler that sends text and opens the assistant, or null when there's no assistant.

const ask = useAssistantPrompt("How do I add a product?");
return ask ? <button onClick={ask}>How do I add a product?</button> : null;

useAssistant()Copy Anchor Link

Everything the assistant's own interface uses, for building your own. Throws outside the provider.

A proposal is everything its card shows, taken from your registry and never from the model: proposalId, actionName, label, description, risk, the input it would run with and its inputSchema, expiresAt, and uiConfirmationRequired, which is true when only a tap may approve it. Always render the card from these fields.

voice controls the voice session:

Lower levelCopy Anchor Link

For an interface further from the widget than useAssistant goes:

Constants: SDK_VERSION, PROTOCOL_VERSION, VOICE_SAMPLE_RATE (24000), ASSISTANT_PANEL_ID, and COMPONENT_ATTRIBUTE (data-mihe-component).

Types: AssistantProviderProps, AssistantContextValue, ChatMessage, VoiceControls, VoiceState, VoiceEvent, VoiceSessionOptions, AssistantWidgetProps, AssistantPanelProps, OrbCorner, OrbVoiceMode, AssistantTabs, AssistantTable, AssistantTableColumn, AssistantTableQuery, AssistantQueryParam, AssistantChart, AssistantTriggerProps and ContextReport.