Skip to main content

​
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): 
brew tap billwithwillow/glue
brew install --cask glue
Verify installation: 
glue --version

# Update
brew update && brew upgrade glue

# Uninstall
brew uninstall glue && brew untap billwithwillow/glue

​
Step 2: Initialize Your Project

Navigate to your React app directory and run: 
cd path/to/your-react-app
glue init
In a monorepo, run this inside the specific React app (for example apps/web), not at the monorepo root.
Glue automatically detects your framework and package manager, creates .glue/ directories, configures your bundler, and adds the required packages to devDependencies.
After glue init, your next.config.js (or .ts) will include:
next.config.js
const { withGlue } = require('@getglue/next-plugin');

module.exports = withGlue({
  // Your existing Next.js config
});
Packages added: @getglue/next-plugin, @getglue/jsx-runtime
All Glue packages are added to devDependencies. Glue is dev-only and never impacts production builds.

​
Step 3: Start Your Dev Server

Run your dev server with Glue instrumentation: 
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.
For Next.js 16+, glue run automatically forces webpack mode since Turbopack doesn’t yet support jsx-runtime aliasing.

​
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: 
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: 
claude --plugin-dir ./.glue/claude-plugin
In Claude Code, type /glue:apply-latest to implement all your annotations.
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.”
Claude Code is currently the only fully supported coding agent. Support for Codex and Gemini CLI is coming soon.