Claritype Embed

Claritype Embed for React

@claritype/embed-react embeds Claritype’s conversational AI into your React application. Your users get an assistant — typically a collapsible sidebar — that can answer questions about their data, see what they’re currently looking at in your app, and take actions in your UI on their behalf.

The embedded component itself is served by Claritype and rendered inside your layout, so it always runs the latest version without you redeploying anything. This SDK is the bridge: it mounts the component where you want it, keeps it fed with context, and routes its action requests to handlers you write.

New to the SDK? Getting started takes you from install to a working sidebar.

The four building blocks

Everything you can do with the SDK falls under four building blocks, and each has a reference page:

Building block	What it does
Components	<ClaritypeProvider> configures the integration once; <ClaritypeSurface> places an embedded component in your layout.
Passive context	Declare what the user is currently viewing, so the assistant understands questions like “why is this number down?”
Discuss	Bring a specific entity into the conversation from your UI — an “Explain this” button on a chart, a context-menu item on a row.
Actions	Let the assistant do things in your app — navigate, apply filters, fill forms — through handlers you register.

You can adopt them incrementally. A provider and one surface gets you a working assistant; context, discuss, and actions each deepen the integration and none of them requires the others.

Requirements

• React 18 or newer. react and react-dom are peer dependencies.
• A bundler. The package ships ESM and CJS builds with TypeScript types; any modern setup (Vite, Next.js, webpack, …) works.
• Credentials from Claritype. You’ll need three values for your integration: an organization ID, a project ID, and the origin that serves your embedded components. Claritype provides all three.

The SDK is client-only — everything it does happens in the browser. It’s still safe to import in server-rendered apps (the package has a "use client" directive, so Next.js App Router treats it as a client boundary), but the embedded component only appears client-side.

TypeScript is fully supported and used throughout these docs, but the SDK works identically from plain JavaScript — see Using plain JavaScript.

Not using React? This package is a React wrapper around @claritype/embed-core, which any JavaScript app can use directly. These docs cover the React SDK only.