# Vibe Start

> Steps for vibe coders: let your AI agent set up the widget.

Source: https://docs.useclad.ai/vibe-start

---

Steps for vibe coders: grab your two IDs, then paste the prompt below into your
AI coding agent (Cursor, Claude Code, etc.) and let it add the widget for you.

### Step 1 — Find your Workspace ID and Widget ID

1. Sign in to your Clad dashboard at **[app.useclad.ai](https://app.useclad.ai)**.
2. Open **Settings → Integrations → Web Widget**.
3. Copy your **Workspace ID** (starts with `ws_`) and **Widget ID** (starts with
   `wgt_`). You'll paste these into the prompt in Step 2.

<div class="img-ph">
  <span class="img-ph__badge">📷 Screenshot needed</span>
  <p class="img-ph__title">Where to find your IDs</p>
  <p class="img-ph__desc"><strong>Settings → Integrations → Web Widget</strong> in the Clad dashboard, with the Workspace ID and Widget ID clearly visible. Feel free to blur the real values — this just needs to show <em>where</em> the IDs live and what they look like.</p>
</div>

### Step 2 — Paste this prompt into your agent

Replace `{YOUR_WORKSPACE_ID}` and `{YOUR_WIDGET_ID}` with the IDs from Step 1, then paste the entire
prompt into your coding agent and let it run:

```text
You are adding the Clad Support Chat widget to this web application.

First, read the official documentation (fetch these URLs before writing code):
- Docs index:  https://docs.useclad.ai/llms.txt
- Full docs:   https://docs.useclad.ai/llms-full.txt
- Quickstart:  https://docs.useclad.ai/quickstart.md
Every page is available as Markdown by appending .md to its URL
(for example https://docs.useclad.ai/installation.md).

My credentials:
- Workspace ID: {YOUR_WORKSPACE_ID}
- Widget ID:    {YOUR_WIDGET_ID}

Then implement the integration:
1. Detect this project's framework (plain HTML, React, Next.js, Vue, etc.).
2. Install the widget using the single <script> snippet from the Quickstart.
   Do NOT use npm or any package manager — there is no package. The script
   loads from https://clad-server-staging.up.railway.app/widget/v1/widget.js.
   Add it once in the app shell so it runs
   on every page (e.g. index.html just before </body>, the Next.js root layout
   via next/script, or your framework's equivalent).
3. Set window.SupportChatSettings with my Workspace ID and Widget ID.
4. If this app has logged-in users, also set up identity verification:
   - Add a backend endpoint that returns a short-lived (<= 15 min) HS256 JWT,
     signed with a SUPPORT_CHAT_WIDGET_SECRET environment variable, including
     the claims described on the Identity verification page (sub, email, name,
     workspace_id, widget_id, exp).
   - Wire the SDK's tokenProvider to that endpoint, call identify() on login,
     and shutdown({ clearStorage: true }) on logout. Use the framework recipe
     that matches this codebase.
5. Follow the Security best practices page: never expose the widget secret in
   frontend code, keep tokens short-lived, and remind me to add my site's
   origin to the widget's allowed origins.
6. Do not hardcode secrets; read them from environment variables.
7. When done, summarize the files you changed and tell me exactly how to test
   that the launcher appears and that a test message reaches the support inbox.

Keep the integration minimal and idiomatic for this codebase.
```

The prompt points your agent at these machine‑readable resources, which it
fetches before writing any code:

- **[`/llms.txt`](https://docs.useclad.ai/llms.txt)** — a concise index of every documentation page.
- **[`/llms-full.txt`](https://docs.useclad.ai/llms-full.txt)** — the entire documentation in a single file.
- **[`/quickstart.md`](https://docs.useclad.ai/quickstart.md)** — the copy‑paste install snippet.

> Any page on this site is available as raw Markdown — just append `.md` to its
> URL. Point your agent at the exact page it needs (for example
> `https://docs.useclad.ai/identity-verification.md`).

### Step 3 — Review the result

When the agent finishes, the launcher should appear on your site. Open it, send
a test message, and confirm it lands in your support inbox.

<div class="img-ph">
  <span class="img-ph__badge">📷 Screenshot needed</span>
  <p class="img-ph__title">The widget launcher on a live site</p>
  <p class="img-ph__desc">A screenshot of a web app with the Support Chat <strong>launcher button</strong> visible in the corner (ideally on a real-looking product page, not a blank page), to show the end result of the integration.</p>
</div>

<div class="img-ph">
  <span class="img-ph__badge">📷 Screenshot needed</span>
  <p class="img-ph__title">An open conversation</p>
  <p class="img-ph__desc">A screenshot of the <strong>messenger panel open</strong> with a sample conversation — a visitor message and an agent reply — so readers can see what their users will experience.</p>
</div>

If something looks off, check the [Troubleshooting & FAQ](#troubleshooting--faq)
page — or hand that page to your agent (append `.md`) and ask it to fix the issue.