Get Started

Install via AI editor

The fastest install path. Paste a prompt into Cursor, Claude Code, Codex, or Windsurf — your editor wires it up while you watch.

Why this exists

Most install guides assume you'll read 12 paragraphs and copy snippets into 4 places. DuggAI ships its own install prompt instead — your AI editor reads your code, figures out where the snippet should go, and writes the diff.

Supported editors

  • Cursor
  • Claude Code (CLI and web)
  • Windsurf
  • OpenAI Codex
  • GitHub Copilot Chat

Steps

  1. Open the install page
    From the dashboard, click Install widget. Pick your editor and your stack (Next.js, React, Vue, plain HTML, etc).
  2. Copy the prompt
    The page generates a prompt with your API key and project URL pre-baked. Click Copy.
  3. Paste into your editor
    Open your project in your AI editor and paste. The prompt asks the editor to add the widget script in the correct place for your framework — for example, in your app/layout.tsx for Next.js App Router, or index.html for plain HTML.
  4. Approve the diff
    Your editor will propose changes. Approve them. Run your dev server.
  5. Verify
    Reload your local site. The widget bubble should appear in the bottom right. See Verify the bubble for what to check.

What the prompt looks like

The generated prompt is roughly:

prompt
Add the DuggAI widget to this Next.js (App Router) project.

Project URL: https://duggai.com/support/projects/abc123
Widget key: duggai_pk_XXXXXXXXXXXX

1. Add the script tag inside src/app/layout.tsx <body>, after children.
2. Use Next.js's <Script strategy="afterInteractive" /> so the bubble loads
   after the page is interactive.
3. Don't put the key in any client-only env file — it's a public key, but
   keep it in a constant for clarity.
4. Identify the user when one is signed in by calling
   window.DuggAI.identify({ id, email, traits: { name } }) in a client
   useEffect inside the user-aware layout.

If you find an existing chat or support widget, leave it in place but
add a TODO comment noting it should be removed.
Why a prompt instead of an SDK call
Copy-paste install guides assume frameworks don't change. They do. A prompt-based install adapts to whatever your codebase looks like today, including weird custom layouts.

Editor-specific tips

Cursor

Use Cmd+Lto open the chat panel and paste. Cursor's context is automatic — no need to tag files.

Claude Code

Paste at the start of your session. Claude Code is good at multi-file edits, so larger re-organizations (e.g. moving the script tag to a new layout) work cleanly.

Windsurf / Codex / Copilot

Open the project, paste in chat. If the editor asks for permission to edit your files, approve.