Skip to content

docs: add agent integration roadmap to README #344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aidenybai wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: add agent integration roadmap to README #344

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,57 @@ actions: [

See [`packages/react-grab/src/types.ts`](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/types.ts) for the full `Plugin`, `PluginHooks`, and `PluginConfig` interfaces.

## Agent Integration

React Grab connects to coding agents through a layered architecture. Each layer builds on the previous — use whichever fits your workflow.

### Layer 0 — Paste (zero setup)

Grab an element, then **⌘V** / **Ctrl+V** into any agent chat. The clipboard already carries the source location, component stack, and HTML snippet. Works with every agent, no configuration needed.

### Layer 1 — Context File (zero-config auto-discovery)

When `grab watch` is running, React Grab maintains a living context file at `.react-grab/context.md` with the latest grab formatted as markdown. Agents that auto-index project files (Cursor, Claude Code, Copilot, etc.) discover it automatically — no skill or tool call required.

```bash
# Start the background watcher (polls clipboard → writes to .react-grab/)
npx grab@latest watch
```

The `.react-grab/` directory also keeps a grab journal (`.react-grab/grabs/`) so past selections survive clipboard overwrites and can be referenced later via `grab history`.

### Layer 2 — CLI Primitives

Composable one-shot commands that skills and scripts can call:

```bash
grab latest # latest grab as JSON (reads .react-grab/ or falls back to clipboard)
grab context # latest grab as formatted markdown
grab log # stream grabs as NDJSON (runs until killed)
grab history # list past grabs from .react-grab/grabs/
Copy link
Copy Markdown
Contributor

@vercel vercel Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

README documents CLI commands (grab watch, grab latest, grab context, grab log, grab history) that are not implemented in the codebase

Fix on Vercel

```

### Layer 3 — Hooks

Git-hook-style executables that fire on each grab:

```bash
.react-grab/hooks/
└── on-grab # receives JSON via stdin + env vars
```

Hooks are completely agent-agnostic — any executable that reads stdin works.

### Per-Agent Setup

`grab add` detects your agent and installs the right integration format:

```bash
grab add # interactive: pick agents
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Don't present the Cursor/Claude adapter examples as current commands yet; the CLI is still MCP-only, so these examples will fail if users copy them.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At README.md, line 239:

<comment>Don't present the Cursor/Claude adapter examples as current commands yet; the CLI is still MCP-only, so these examples will fail if users copy them.</comment>

<file context>
@@ -190,6 +190,57 @@ actions: [
+`grab add` detects your agent and installs the right integration format:
+
+```bash
+grab add                 # interactive: pick agents
+grab add cursor          # Cursor-specific integration
+grab add claude          # Claude Code-specific integration
</file context>

grab add cursor # Cursor-specific integration
grab add claude # Claude Code-specific integration
```

## Resources & Contributing Back

Want to try it out? Check out [our demo](https://react-grab.com).
Expand Down
Loading