AI Integration Prompt
Copy the prompt below and paste it into your AI coding assistant (Claude, Cursor, Copilot, Windsurf, or any other). It contains everything the AI needs to integrate DemoAgent into your project — for any framework.
Replace the API key first. The prompt below uses a placeholder key. Get your real key from the dashboard — or use the integration page which auto-fills your key.
The Prompt
Supports: React, Next.js (App & Pages Router), Vue, Nuxt, Svelte, SvelteKit, Angular, Astro, Remix, Gatsby, WordPress, Webflow, Shopify, and plain HTML.
Integrate DemoAgent (by iraa.ai) into this project. DemoAgent is an AI-powered live product demo widget — it adds a floating chat button to the website that connects visitors to an AI agent which can give live, interactive product demos.
CRITICAL — WHERE TO INTEGRATE:
- DemoAgent goes on your PRODUCT website or web app (the actual product that end-users/customers use)
- It is NOT for landing pages, marketing sites, or documentation sites
- The widget lets visitors experience a live, interactive demo of your product right on your product's website
- If this project is a landing page, marketing site, or docs site — DO NOT integrate here. Ask the user which project contains their actual product/app and integrate there instead.
API KEY: pk_live_YOUR_KEY_HERE
IMPORTANT: Detect the framework used in this project and use the matching integration below. The script MUST be placed in the root layout/template so it loads on every page of the product.
CRITICAL — SCRIPT MUST BE IN STATIC HTML, NOT IN A COMPONENT LIFECYCLE HOOK:
- The widget reads `?iraa-demo=<token>` from `location.search` the moment it boots. This token is what activates the demo agent UI — without it, the widget renders nothing.
- Most client-side routers (React Router, Vue Router, TanStack Router) strip unknown query parameters during hydration. If the widget script is injected from a `useEffect`, `onMounted`, or any other component lifecycle hook, the router will have already wiped `?iraa-demo=` from the URL before the widget script runs — and the demo agent will never appear, even though the script "loads correctly".
- ALWAYS place the script tag in the static HTML entry file (`index.html` for Vite, `public/index.html` for CRA / Vue CLI). NEVER inject it via a component-side script element.
- For SSR frameworks (Next.js, Nuxt, SvelteKit, Remix, Astro, Gatsby) use the framework's documented script-in-head/layout pattern below — those render the script server-side, so query params survive.
---
## INTEGRATION BY FRAMEWORK
### HTML / Static Site / WordPress / Webflow / Shopify
Add before the closing </body> tag in your main HTML template:
```html
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async>
</script>
```
### React (Vite + React)
Add the script to `index.html` (NOT inside a component / useEffect — the router will strip the demo token before the widget can read it):
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Your App</title>
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```
### React (Create React App)
Add the script to `public/index.html` before `</body>`:
```html
<!-- public/index.html -->
<body>
<div id="root"></div>
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async></script>
</body>
```
### Next.js (App Router)
Add to your root `app/layout.tsx`:
```tsx
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
strategy="lazyOnload"
/>
</body>
</html>
);
}
```
### Next.js (Pages Router)
Add to `pages/_app.tsx`:
```tsx
import Script from 'next/script';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
strategy="lazyOnload"
/>
</>
);
}
```
### Vue 3 (Vite + Vue)
Add the script to `index.html` (NOT inside `onMounted` — Vue Router will strip the demo token before the hook fires):
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Your App</title>
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
```
### Vue CLI
Add the script to `public/index.html` before `</body>`:
```html
<!-- public/index.html -->
<body>
<div id="app"></div>
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async></script>
</body>
```
### Nuxt 3
Add to `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://cdn.iraa.ai/widget.js',
'data-api-key': 'pk_live_YOUR_KEY_HERE',
async: true,
},
],
},
},
});
```
### SvelteKit
Add to `src/app.html` before closing `</body>`:
```html
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async>
</script>
```
### Svelte (Vite + Svelte)
In your root `App.svelte`:
```svelte
<svelte:head>
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async>
</script>
</svelte:head>
```
### Angular
Add to `src/index.html` before closing `</body>`:
```html
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async>
</script>
```
### Astro
Add to your base layout (e.g., `src/layouts/Layout.astro`) before closing `</body>`:
```astro
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
is:inline
async>
</script>
```
### Remix
Add to `app/root.tsx` inside the `<body>`:
```tsx
export default function App() {
return (
<html lang="en">
<head><Meta /><Links /></head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<script
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async
/>
</body>
</html>
);
}
```
### Gatsby
Add to `gatsby-ssr.js` (or `.tsx`):
```js
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="demoagent"
src="https://cdn.iraa.ai/widget.js"
data-api-key="pk_live_YOUR_KEY_HERE"
async
/>,
]);
};
```
---
## ADVANCED: PROGRAMMATIC INITIALIZATION
For more control, load the script without data-api-key and call init() manually:
```js
// Load the script first, then:
window.addEventListener('DemoAgentReady', function() {
DemoAgent.init({
apiKey: 'pk_live_YOUR_KEY_HERE',
theme: 'auto', // 'light' | 'dark' | 'auto' (default: 'auto')
position: 'bottom-right' // 'bottom-right' | 'bottom-left' (default: 'bottom-right')
});
});
```
## CONFIGURATION OPTIONS
| Option | Type | Default | Description |
|------------|---------------------------------------|---------------------|------------------------------------------|
| apiKey | string | (required) | Public API key (pk_live_... or pk_test_...) |
| apiUrl | string | https://api.iraa.ai | API base URL (override for self-hosted) |
| wsUrl | string | derived from apiUrl | WebSocket URL |
| theme | 'light' | 'dark' | 'auto' | 'auto' | Widget color theme |
| position | 'bottom-right' | 'bottom-left' | 'bottom-right' | Widget position on page |
## PLACEMENT RULES
1. ONLY integrate into the PRODUCT website/app (the actual SaaS product, not a landing page or marketing site)
2. The script MUST be in the root layout/template so it loads on every page of the product
3. The script loads asynchronously — it will NOT block page rendering
4. The widget appears as a floating chat button (bottom-right by default)
5. It uses Shadow DOM — zero CSS conflicts with the host site
6. Do NOT add the script to individual pages — only the root layout
## VERIFY YOUR INTEGRATION
After adding the code, verify:
- [ ] The script tag is in the static HTML entry file (`index.html` for Vite, `public/index.html` for CRA / Vue CLI), or the SSR framework's root layout — NOT inside a useEffect, onMounted, or any other component lifecycle hook
- [ ] The script tag is in the root layout/template (not a sub-page)
- [ ] The data-api-key attribute contains the real API key
- [ ] The script src is exactly: https://cdn.iraa.ai/widget.js
- [ ] The script has the async attribute
- [ ] No duplicate script tags exist
- [ ] When you open the demo link `https://YOUR-PRODUCT.com/?iraa-demo=demo_xxx` and check the Network tab, the request to `api.iraa.ai/api/v1/session/status` includes `&demoToken=demo_xxx` in the URL — if it doesn't, your router is stripping the query param and the script is being injected too late
## REFERENCE LINKS (for deeper integration needs)
- Full documentation: https://iraa.ai/docs
- Complete API reference (machine-readable): https://iraa.ai/llms-full.txt
- Widget integration details: https://iraa.ai/docs/widget
- REST API reference: https://iraa.ai/docs/api
- PDP Schema (product config YAML): https://iraa.ai/docs/pdp
- WebSocket real-time API: https://iraa.ai/docs/websocketHow to Use
- Copy the prompt above (replace
pk_live_YOUR_KEY_HEREwith your real API key) - Open your AI coding assistant (Claude, Cursor, Copilot, etc.)
- Paste the prompt — the AI will detect your framework and add the right code
- Review the changes and verify the widget loads on your site
Auto-filled Version
The dashboard integration page provides the same prompt with your API key already filled in and a one-click copy button.