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.

---

## 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 (Create React App, Vite + React)
Create a component and add it to your root App component:

```tsx
import { useEffect } from 'react';

export function DemoAgentWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.iraa.ai/widget.js';
    script.async = true;
    script.dataset.apiKey = 'pk_live_YOUR_KEY_HERE';
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, []);
  return null;
}
```

Then in your root App:
```tsx
import { DemoAgentWidget } from './DemoAgentWidget';

function App() {
  return (
    <>
      {/* your existing app */}
      <DemoAgentWidget />
    </>
  );
}
```

### 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, Vue CLI)
In your root `App.vue`:

```vue
<script setup>
import { onMounted, onUnmounted } from 'vue';

let script = null;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://cdn.iraa.ai/widget.js';
  script.async = true;
  script.dataset.apiKey = 'pk_live_YOUR_KEY_HERE';
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

<template>
  <!-- your existing template -->
</template>
```

### 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 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

## 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/websocket

How to Use

  1. Copy the prompt above (replace pk_live_YOUR_KEY_HERE with your real API key)
  2. Open your AI coding assistant (Claude, Cursor, Copilot, etc.)
  3. Paste the prompt — the AI will detect your framework and add the right code
  4. 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.