@mmgt-cloud/ai-react

Headless React bindings for @mmgt-cloud/ai-client. The package provides state and lifecycle management without imposing a component library.

pnpm add @mmgt-cloud/ai-client @mmgt-cloud/ai-react

const clientOptions = {
  baseUrl: "https://api.mmgt.cloud/ai",
  appId: import.meta.env.VITE_APP_ID,
  tokenProvider: () => auth.accessToken,
};

root.render(
  <AIProvider clientOptions={clientOptions}>
    <App />
  </AIProvider>,
);

Keep clientOptions referentially stable (for example in module scope or useMemo) so the provider does not replace the client during a render.

Hooks

• useAI() returns the configured AIClient.
• useAIModels() loads the catalog on mount and returns models, loading, error and reload().
• useAIFileUpload() returns the current file plus upload() and remove().
• useAIGenerate() returns generate(), response, generating and error.
• useAIStream() returns start(), cancel(), accumulated normalized events, streaming and error.
• useAIToolRunner({ tools, maxIterations }) returns run() and tool-loop state.

function Assistant() {
  const { events, streaming, start, cancel } = useAIStream();
  const text = events
    .filter((event) => event.type === "output.text.delta")
    .map((event) => event.delta)
    .join("");

  return (
    <>
      <pre>{text}</pre>
      <button
        disabled={streaming}
        onClick={() =>
          start({
            connectionId: selectedModel.connectionId,
            model: selectedModel.id,
            input: [
              { role: "user", content: [{ type: "text", text: "Hello" }] },
            ],
          })
        }
      >
        Generate
      </button>
      <button disabled={!streaming} onClick={cancel}>
        Cancel
      </button>
    </>
  );
}

Hooks avoid state updates after unmount. Provider keys never belong in a React application; browser clients authenticate with an application-bound user access token and can only use models explicitly enabled by an administrator.