How long does it take to embed an AI assistant in a SaaS product?

With a managed widget like Command+K, a working end-to-end embed is one afternoon: a script tag in your app shell, a short-lived JWT endpoint on your backend, and one knowledge source pointed at your docs. Polishing tools and prompts takes another week.

Should the assistant be an overlay or an inline panel?

Overlay (CMD+K palette) for power users and fast tasks; inline panel (sidebar that pushes body content) for collaborative workflows and longer reasoning. Production apps usually support both and let the user pick.

How do I authenticate the assistant as the logged-in user?

Mint a short-lived JWT on your backend, signed with a shared secret, containing the user ID, workspace ID, and scopes. Pass it to the widget via a data attribute or postMessage. The widget never sees your provider API keys.

Can I customize the look without forking the widget?

Yes. A good widget exposes CSS variables (brand color, radius, font) and theme presets. You should not need to fork — branding is a config, not a build.

What's the right first action for the assistant to take?

The highest-frequency repetitive task in your product. Not the flashiest one. If users create issues 50x a day and configure settings 2x a year, the first MCP tool is create_issue.

How to embed an AI assistant in your SaaS product

Embedding a useful AI assistant in a SaaS product is three pieces — an embeddable widget themed via CSS variables, a backend endpoint that mints a 5–15 minute JWT per end-user, and a knowledge source pointed at your docs. The integration is one afternoon; the difference between a help-center chatbot and a retention-moving assistant is whether it runs as the logged-in user, calls real tools, and cites its sources.

Why an embedded assistant, not a standalone page

A standalone chat page doesn't move retention. An assistant that lives inside the product — sees the route the user is on, runs as the logged-in user, calls real tools — moves retention. The integration shape is small: a script tag, a short-lived JWT, and a knowledge source.

The three pieces

Widget — embeddable JS, themed via CSS variables, overlay or inline.
Token endpoint — your backend mints a 5–15 minute JWT per end-user.
Knowledge source — public docs URL or sitemap; the assistant cites.

A minimal integration

Drop the script in your app shell:

<script
  src="https://cdn.commandplusk.com/widget.js"
  data-token={userToken}
  data-display="overlay"
></script>

Mint the token server-side when a user loads the app:

export const issueWidgetToken = createServerFn({ method: "POST" })
  .middleware([requireSupabaseAuth])
  .handler(async ({ context }) => {
    return signJwt({
      sub: context.userId,
      workspaceId: context.claims.workspace_id,
      scopes: ["read", "write"],
    }, process.env.CMDK_SECRET!, { expiresIn: "10m" });
  });

Overlay vs inline panel

Overlay (CMD+K palette) — fast, modal, great for power users and short tasks.
Inline panel — pushes body content (Grafana / Intercom pattern), better for long reasoning and collaborative workflows.

Ship both. Let the user pick. Command+K supports both via data-cmdk-display="overlay|inline".

Pick the first tools carefully

Don't try to expose your whole API on day one. Start with two reads and one write — the ones the highest-frequency users hit the most. Measure tool-call success rate per tool; promote the ones that work, retire the ones that don't.

The 80/20 of action conversion

One well-tuned write tool beats ten under-described ones. Tool descriptions and JSON schemas are prompts — write them like prompts.

Ground answers in your docs

Unstructured "knowledge" sources turn LLMs into hallucination machines. Index your actual docs (sitemap or URL), require citations on every answer, and surface the cited URL in the UI. Citations make answers auditable, which is the bar B2B buyers apply.

Theming without forking

Set brand color, radius, and font via CSS variables on the widget root. Whitelabel mode hides the platform brand entirely. Branding is a config, not a build.

Measure what matters

Assistant DAU / Product DAU — adoption.
Sessions that complete a tool call — action conversion.
% of answers that cite — grounding rate.
p95 first-token latency — feel.
Per-user tokens / spend — for metering and caps.

See CMD+K Widget for the full integration.

FAQ

How long does it take to embed an AI assistant in a SaaS product?: With a managed widget like Command+K, a working end-to-end embed is one afternoon: a script tag in your app shell, a short-lived JWT endpoint on your backend, and one knowledge source pointed at your docs. Polishing tools and prompts takes another week.
Should the assistant be an overlay or an inline panel?: Overlay (CMD+K palette) for power users and fast tasks; inline panel (sidebar that pushes body content) for collaborative workflows and longer reasoning. Production apps usually support both and let the user pick.
How do I authenticate the assistant as the logged-in user?: Mint a short-lived JWT on your backend, signed with a shared secret, containing the user ID, workspace ID, and scopes. Pass it to the widget via a data attribute or postMessage. The widget never sees your provider API keys.
Can I customize the look without forking the widget?: Yes. A good widget exposes CSS variables (brand color, radius, font) and theme presets. You should not need to fork — branding is a config, not a build.
What's the right first action for the assistant to take?: The highest-frequency repetitive task in your product. Not the flashiest one. If users create issues 50x a day and configure settings 2x a year, the first MCP tool is create_issue.