Skip to main content
The fastest way to render the widget is to wrap part of your tree in MindWidgetProvider and drop a MindWidgetHost where the floating widget should mount.
1

Wrap your app in the provider

MindWidgetProvider creates a single widget instance from your config and exposes it to descendants.
2

Add the host

MindWidgetHost mounts the widget UI into the DOM. It renders a <div> that the widget controls; the widget itself floats in the bottom-right of the viewport.
App.tsx
import {MindWidgetHost, MindWidgetProvider} from '@ulesson-education/mind-sdk/react';

export function App() {
  return (
    <MindWidgetProvider
      config={{
        authCookieKey: 'session',
        debug: true,
      }}
    >
      <YourApp />

      {/* The floating widget mounts here */}
      <MindWidgetHost />
    </MindWidgetProvider>
  );
}
That is all you need for a working widget. Everything else in these docs is about driving and customizing it.
authCookieKey names the cookie the SDK reads to obtain its Bearer auth token. The host app is responsible for setting, refreshing, and clearing the cookie — the SDK only reads it. See Configuration.

​
Next steps

Configuration

Theme, hooks, permissions, and more.

Widget states

The state machine and valid transitions.

Learning context

Tell the widget what the student is doing.

React API

Provider, host, and hooks.