> ## Documentation Index
> Fetch the complete documentation index at: https://buildwithglue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Install Glue and get started in under 5 minutes

## Prerequisites

* **Node.js 18+** installed
* A **Next.js 14+** or **Vite 5+** React project
* npm, pnpm, yarn, or bun

## Step 1: Install Glue

Install via Homebrew (includes both the desktop app and CLI):

```bash theme={null}
brew tap billwithwillow/glue
brew install --cask glue
```

Verify installation:

```bash theme={null}
glue --version
```

<Accordion title="Update or uninstall Glue">
  ```bash theme={null}
  # Update
  brew update && brew upgrade glue

  # Uninstall
  brew uninstall glue && brew untap billwithwillow/glue
  ```
</Accordion>

## Step 2: Initialize Your Project

Navigate to your React app directory and run:

```bash theme={null}
cd path/to/your-react-app
glue init
```

<Tip>
  In a monorepo, run this inside the specific React app (for example `apps/web`), not at the monorepo root.
</Tip>

Glue automatically detects your framework and package manager, creates `.glue/` directories, configures your bundler, and adds the required packages to `devDependencies`.

<Tabs>
  <Tab title="Next.js">
    After `glue init`, your `next.config.js` (or `.ts`) will include:

    ```javascript next.config.js theme={null}
    const { withGlue } = require('@getglue/next-plugin');

    module.exports = withGlue({
      // Your existing Next.js config
    });
    ```

    Packages added: `@getglue/next-plugin`, `@getglue/jsx-runtime`
  </Tab>

  <Tab title="Vite">
    After `glue init`, your `vite.config.ts` (or `.js`) will include:

    ```typescript vite.config.ts theme={null}
    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    import glue from '@getglue/vite-plugin';

    export default defineConfig({
      plugins: [react(), glue()],
    });
    ```

    Packages added: `@getglue/vite-plugin`, `@getglue/jsx-runtime`
  </Tab>
</Tabs>

<Note>
  All Glue packages are added to `devDependencies`. Glue is dev-only and never impacts production builds.
</Note>

## Step 3: Start Your Dev Server

Run your dev server with Glue instrumentation:

```bash theme={null}
glue run npm run dev
```

This sets `GLUE_INSTRUMENT=1`, starts your dev server, and automatically opens the Glue desktop app when the server is ready.

<Tip>
  For **Next.js 16+**, `glue run` automatically forces webpack mode since Turbopack doesn't yet support jsx-runtime aliasing.
</Tip>

## Step 4: Create Your First Annotation

In the Glue desktop app:

1. **Hover and click** any element to select it
2. **Type your comment** — be specific (e.g., "Change button background to #3b82f6 and add 4px border radius")
3. **Save** — press Enter or click Save

The annotation is stored with the element's source file, line number, and a stable element ID.

## Step 5: Hand Off to Claude Code

Export your annotations and hand off to Claude Code:

```bash theme={null}
glue handoff --claude-plugin
```

This generates:

* `.glue/handoff/latest.md` — Human-readable spec
* `.glue/claude-plugin/` — Claude Code plugin files

Then launch Claude Code with the plugin:

```bash theme={null}
claude --plugin-dir ./.glue/claude-plugin
```

In Claude Code, type `/glue:apply-latest` to implement all your annotations.

<Tip>
  If `/glue:apply-latest` doesn't appear, restart Claude Code to reload plugins. Or simply tell Claude Code: "Read `.glue/handoff/latest.md` and implement all tasks."
</Tip>

<Note>
  **Claude Code** is currently the only fully supported coding agent. Support for **Codex** and **Gemini CLI** is coming soon.
</Note>