Add AI integration

By the end of this page you will know how to embed one of your project’s agents into your generated app, and which integration type fits your use case.

When would you use this?

Once your app is generated, it’s often more than static screens and forms — you may want part of it to think. AI integration lets you embed an existing agent into the app itself, without hand-coding a chat UI yourself. Two shapes are covered here, each suited to a different kind of need:

“I want a help/support assistant available anywhere in my app.” Use Floating Chat — a small chat bubble that follows users around the app (or just the pages you choose). Good for general Q&A, customer support, or an always-available helper.
“I want a focused, dedicated space for deeper conversations.” Use Chat Page — its own route and nav entry with a full-screen chat UI. Good when the conversation is the main point of a page, not a side helper — an internal “Ask Data” analyst page, a dedicated onboarding page, and so on.

ℹ️

This is different from a Copilot app, which is its own standalone app type with a dedicated creation flow. AI integration embeds an agent inside a Web or Mobile app you’re already building.

Prerequisites

An app workspace with an active chat session (The generation flow).
At least one ACTIVE agent in the project (Agentic Workspace overview).

The integration types covered here

Type	What it adds	Agent types allowed
Floating Chat	A chat widget overlay on some or all pages	AI Agent
Chat Page	A dedicated route with a full chat UI	AI Agent

Steps

Open the integration dialog

In the chat panel’s composer, click the more options (⋯) button next to the message box, then click Add agent integration (Bot icon). The Add Agent Integration dialog opens.

Chat composer's more-options menu showing the Add agent integration button

Choose an integration type

Pick Floating Chat (widget overlay) or Chat Page (dedicated route). Floating Chat is selected by default.

Add Agent Integration dialog showing the Floating Chat, Chat Page, and Agent Action type cards

Select an agent

Search and pick from your project’s ACTIVE AI Agents. Multi-agent systems appear tagged with their pattern (e.g. MULTI_AGENT).

Agent picker with search box and a list of active agents

Configure the integration

The fields shown depend on the type you picked. Each one below walks through a full example, using an e-commerce admin app as the scenario.

Floating Chat

Field	What it controls	Example
Pages	`all`, or a comma-separated list of routes the widget appears on	`/dashboard, /orders`
Position	Bottom Right or Bottom Left	Bottom Right
Suggested Prompts	One per line — starter prompts shown in the widget	`What's my best-selling product this week?` `Which orders need attention today?` `Summarize today's sales`

With these values, a chat bubble appears only on the Dashboard and Orders pages, bottom-right, with those three prompts ready to tap — good for a lightweight, always-available helper that doesn’t clutter every screen.

Chat Page

Field	What it controls	Example
Route	The URL path for the new page	`/assistant`
Page Title	The page’s display name	`Store Assistant`
Add to Navigation	Whether it gets a sidebar/nav link (on by default)	On

This adds a full Store Assistant page at /assistant, linked from the app’s navigation — a dedicated space for longer conversations, distinct from a widget that follows users around.

Add the integration

Click Add Integration. This turns your configuration into a chat message describing what you asked for, and qRaptor generates it like any other change — through the same generation flow as a normal follow-up request.

Common issues

No agents show up in the picker — Only ACTIVE AI Agents are listed for Floating Chat and Chat Page.