@hiraoku/react-grab-claude-code
v0.0.88
Published
[Experimental Fork] Claude Code provider for React Grab
Maintainers
s.hiraokuReadme
@hiraoku/react-grab-claude-code
Note: This is an experimental fork of React Grab for testing and verification purposes. For production use, please refer to the original repository.
Claude Code agent provider for React Grab. Requires running a local server that interfaces with the Claude Agent SDK.
Installation
npm install @hiraoku/react-grab-claude-code
# or
pnpm add @hiraoku/react-grab-claude-code
# or
bun add @hiraoku/react-grab-claude-code
# or
yarn add @hiraoku/react-grab-claude-codeServer Setup
The server runs on port 4567 by default.
Quick Start (CLI)
Start the server in the background before running your dev server:
npx @hiraoku/react-grab-claude-code@latest && pnpm run devThe server will run as a detached background process. Note: Stopping your dev server (Ctrl+C) won't stop the React Grab server. To stop it:
pkill -f "react-grab.*server"Recommended: Config File (Automatic Lifecycle)
For better lifecycle management, start the server from your config file. This ensures the server stops when your dev server stops:
Vite
// vite.config.ts
import { startServer } from "@hiraoku/react-grab-claude-code/server";
if (process.env.NODE_ENV === "development") {
startServer();
}Next.js
// next.config.ts
import { startServer } from "@hiraoku/react-grab-claude-code/server";
if (process.env.NODE_ENV === "development") {
startServer();
}Client Usage
Script Tag
<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<script src="//unpkg.com/@hiraoku/react-grab-claude-code/dist/client.global.js"></script>Next.js
Using the Script component in your app/layout.tsx:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<head>
{process.env.NODE_ENV === "development" && (
<>
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
strategy="beforeInteractive"
/>
<Script
src="//unpkg.com/@hiraoku/react-grab-claude-code/dist/client.global.js"
strategy="lazyOnload"
/>
</>
)}
</head>
<body>{children}</body>
</html>
);
}ES Module
import { attachAgent } from "@hiraoku/react-grab-claude-code/client";
attachAgent();How It Works
┌─────────────────┐ HTTP ┌─────────────────┐ SDK ┌─────────────────┐
│ │ localhost:4567 │ │ │ │
│ React Grab │ ──────────────► │ Server │ ─────────────► │ Claude Code │
│ (Browser) │ ◄────────────── │ (Node.js) │ ◄───────────── │ (Agent) │
│ │ SSE │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
Client Server Agent- React Grab sends the selected element context to the server via HTTP POST
- Server receives the request and forwards it to Claude Code via the Agent SDK
- Claude Code processes the request and streams responses back
- Server relays status updates to the client via Server-Sent Events (SSE)