@react-grab/claude-code 0.0.55 → 0.0.57

package/README.md

@@ -0,0 +1,78 @@
+# @react-grab/claude-code
+
+Claude Code agent provider for React Grab. Requires running a local server that interfaces with the Claude Agent SDK.
+
+## Installation
+
+```bash
+npm install @react-grab/claude-code
+# or
+pnpm add @react-grab/claude-code
+# or
+bun add @react-grab/claude-code
+# or
+yarn add @react-grab/claude-code
+```
+
+## Server Setup
+
+The server runs on port `4567` by default.
+
+### Vite
+
+```ts
+// vite.config.ts
+import "@react-grab/claude-code/server";
+```
+
+### Next.js
+
+```ts
+// next.config.ts
+import "@react-grab/claude-code/server";
+```
+
+## Client Usage
+
+```tsx
+import { init } from "react-grab/core";
+import { createClaudeAgentProvider } from "@react-grab/claude-code/client";
+
+const agentProvider = createClaudeAgentProvider();
+
+init({
+  agent: {
+    provider: agentProvider,
+  },
+});
+```
+
+## Configuration
+
+You can customize the server URL and default options:
+
+```tsx
+const agentProvider = createClaudeAgentProvider({
+  getOptions: () => ({
+    model: "opus",
+    maxTurns: 20,
+  }),
+});
+```
+
+## How It Works
+
+```
+┌─────────────────┐      HTTP       ┌─────────────────┐      SDK       ┌─────────────────┐
+│                 │  localhost:4567 │                 │                │                 │
+│   React Grab    │ ──────────────► │     Server      │ ─────────────► │   Claude Code   │
+│    (Browser)    │ ◄────────────── │   (Node.js)     │ ◄───────────── │     (Agent)     │
+│                 │       SSE       │                 │                │                 │
+└─────────────────┘                 └─────────────────┘                └─────────────────┘
+      Client                              Server                            Agent
+```
+
+1. **React Grab** sends the selected element context to the server via HTTP POST
+2. **Server** receives the request and forwards it to Claude Code via the Agent SDK
+3. **Claude Code** processes the request and streams responses back
+4. **Server** relays status updates to the client via Server-Sent Events (SSE)

package/dist/client.cjs

@@ -73,7 +73,10 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
   });
   return {
     send: async function* (context, signal) {
-      const mergedContext = { ...context, options: mergeOptions(context.options) };
+      const mergedContext = {
+        ...context,
+        options: mergeOptions(context.options)
+      };
       yield* streamFromServer(serverUrl, mergedContext, signal);
     },
     resume: async function* (sessionId, signal) {
@@ -87,12 +90,33 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
         throw new Error(`Session ${sessionId} not found`);
       }
       const context = session.context;
-      const mergedContext = { ...context, options: mergeOptions(context.options) };
+      const mergedContext = {
+        ...context,
+        options: mergeOptions(context.options)
+      };
       yield "Resuming...";
       yield* streamFromServer(serverUrl, mergedContext, signal);
     },
     supportsResume: true
   };
 };
+var attachAgent = async () => {
+  if (typeof window === "undefined") return;
+  const provider = createClaudeAgentProvider();
+  const api = window.__REACT_GRAB__;
+  if (api) {
+    api.setAgent({ provider });
+    return;
+  }
+  window.addEventListener(
+    "react-grab:init",
+    (event) => {
+      const customEvent = event;
+      customEvent.detail.setAgent({ provider });
+    },
+    { once: true }
+  );
+};
 
+exports.attachAgent = attachAgent;
 exports.createClaudeAgentProvider = createClaudeAgentProvider;

package/dist/client.d.cts

@@ -1,4 +1,4 @@
-import { AgentProvider } from 'react-grab/core';
+import { init, AgentProvider } from 'react-grab/core';
 import { Options } from '@anthropic-ai/claude-agent-sdk';
 
 interface ClaudeAgentProviderOptions {
@@ -6,5 +6,11 @@ interface ClaudeAgentProviderOptions {
     getOptions?: () => Partial<Options>;
 }
 declare const createClaudeAgentProvider: (providerOptions?: ClaudeAgentProviderOptions) => AgentProvider<Options>;
+declare global {
+    interface Window {
+        __REACT_GRAB__?: ReturnType<typeof init>;
+    }
+}
+declare const attachAgent: () => Promise<void>;
 
-export { createClaudeAgentProvider };
+export { attachAgent, createClaudeAgentProvider };

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { AgentProvider } from 'react-grab/core';
+import { init, AgentProvider } from 'react-grab/core';
 import { Options } from '@anthropic-ai/claude-agent-sdk';
 
 interface ClaudeAgentProviderOptions {
@@ -6,5 +6,11 @@ interface ClaudeAgentProviderOptions {
     getOptions?: () => Partial<Options>;
 }
 declare const createClaudeAgentProvider: (providerOptions?: ClaudeAgentProviderOptions) => AgentProvider<Options>;
+declare global {
+    interface Window {
+        __REACT_GRAB__?: ReturnType<typeof init>;
+    }
+}
+declare const attachAgent: () => Promise<void>;
 
-export { createClaudeAgentProvider };
+export { attachAgent, createClaudeAgentProvider };

package/dist/client.js

@@ -71,7 +71,10 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
   });
   return {
     send: async function* (context, signal) {
-      const mergedContext = { ...context, options: mergeOptions(context.options) };
+      const mergedContext = {
+        ...context,
+        options: mergeOptions(context.options)
+      };
       yield* streamFromServer(serverUrl, mergedContext, signal);
     },
     resume: async function* (sessionId, signal) {
@@ -85,12 +88,32 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
         throw new Error(`Session ${sessionId} not found`);
       }
       const context = session.context;
-      const mergedContext = { ...context, options: mergeOptions(context.options) };
+      const mergedContext = {
+        ...context,
+        options: mergeOptions(context.options)
+      };
       yield "Resuming...";
       yield* streamFromServer(serverUrl, mergedContext, signal);
     },
     supportsResume: true
   };
 };
+var attachAgent = async () => {
+  if (typeof window === "undefined") return;
+  const provider = createClaudeAgentProvider();
+  const api = window.__REACT_GRAB__;
+  if (api) {
+    api.setAgent({ provider });
+    return;
+  }
+  window.addEventListener(
+    "react-grab:init",
+    (event) => {
+      const customEvent = event;
+      customEvent.detail.setAgent({ provider });
+    },
+    { once: true }
+  );
+};
 
-export { createClaudeAgentProvider };
+export { attachAgent, createClaudeAgentProvider };

package/dist/server.cjs

@@ -765,14 +765,14 @@ var Hono = class {
   }
   #notFoundHandler = notFoundHandler;
   errorHandler = errorHandler;
-  route(path, app2) {
+  route(path, app) {
     const subApp = this.basePath(path);
-    app2.routes.map((r) => {
+    app.routes.map((r) => {
       let handler;
-      if (app2.errorHandler === errorHandler) {
+      if (app.errorHandler === errorHandler) {
         handler = r.handler;
       } else {
-        handler = async (c, next) => (await compose([], app2.errorHandler)(c, () => r.handler(c, next))).res;
+        handler = async (c, next) => (await compose([], app.errorHandler)(c, () => r.handler(c, next))).res;
         handler[COMPOSED_HANDLER] = r.handler;
       }
       subApp.#addRoute(r.method, r.path, handler);
@@ -2279,7 +2279,7 @@ var createAdaptorServer = (options) => {
 };
 var serve = (options, listeningListener) => {
   const server = createAdaptorServer(options);
-  server.listen(options?.port, options.hostname, () => {
+  server.listen(options?.port ?? 3e3, options.hostname, () => {
     server.address();
   });
   return server;
@@ -14595,9 +14595,9 @@ var DEFAULT_PORT = 4567;
 // src/server.ts
 var isTextBlock = (block) => block.type === "text";
 var createServer = () => {
-  const app2 = new Hono2();
-  app2.use("/*", cors());
-  app2.post("/agent", async (context) => {
+  const app = new Hono2();
+  app.use("/*", cors());
+  app.post("/agent", async (context) => {
     const body = await context.req.json();
     const { content, prompt, options } = body;
     const fullPrompt = `${prompt}
@@ -14639,16 +14639,16 @@ ${content}`;
       }
     });
   });
-  app2.get("/health", (context) => {
+  app.get("/health", (context) => {
     return context.json({ status: "ok", provider: "claude" });
   });
-  return app2;
+  return app;
+};
+var startServer = (port = DEFAULT_PORT) => {
+  const app = createServer();
+  serve({ fetch: app.fetch, port });
+  console.log("React Grab Claude Code server running on port", port);
 };
-var app = createServer();
-serve({
-  fetch: app.fetch,
-  port: DEFAULT_PORT
-});
-console.log("React Grab Claude Code server running on port", DEFAULT_PORT);
 
 exports.createServer = createServer;
+exports.startServer = startServer;

package/dist/server.d.cts

@@ -2,5 +2,6 @@ import * as hono_types from 'hono/types';
 import { Hono } from 'hono';
 
 declare const createServer: () => Hono<hono_types.BlankEnv, hono_types.BlankSchema, "/">;
+declare const startServer: (port?: number) => void;
 
-export { createServer };
+export { createServer, startServer };

package/dist/server.d.ts

@@ -2,5 +2,6 @@ import * as hono_types from 'hono/types';
 import { Hono } from 'hono';
 
 declare const createServer: () => Hono<hono_types.BlankEnv, hono_types.BlankSchema, "/">;
+declare const startServer: (port?: number) => void;
 
-export { createServer };
+export { createServer, startServer };

package/dist/server.js

@@ -740,14 +740,14 @@ var Hono = class {
   }
   #notFoundHandler = notFoundHandler;
   errorHandler = errorHandler;
-  route(path, app2) {
+  route(path, app) {
     const subApp = this.basePath(path);
-    app2.routes.map((r) => {
+    app.routes.map((r) => {
       let handler;
-      if (app2.errorHandler === errorHandler) {
+      if (app.errorHandler === errorHandler) {
         handler = r.handler;
       } else {
-        handler = async (c, next) => (await compose([], app2.errorHandler)(c, () => r.handler(c, next))).res;
+        handler = async (c, next) => (await compose([], app.errorHandler)(c, () => r.handler(c, next))).res;
         handler[COMPOSED_HANDLER] = r.handler;
       }
       subApp.#addRoute(r.method, r.path, handler);
@@ -2254,7 +2254,7 @@ var createAdaptorServer = (options) => {
 };
 var serve = (options, listeningListener) => {
   const server = createAdaptorServer(options);
-  server.listen(options?.port, options.hostname, () => {
+  server.listen(options?.port ?? 3e3, options.hostname, () => {
     server.address();
   });
   return server;
@@ -14570,9 +14570,9 @@ var DEFAULT_PORT = 4567;
 // src/server.ts
 var isTextBlock = (block) => block.type === "text";
 var createServer = () => {
-  const app2 = new Hono2();
-  app2.use("/*", cors());
-  app2.post("/agent", async (context) => {
+  const app = new Hono2();
+  app.use("/*", cors());
+  app.post("/agent", async (context) => {
     const body = await context.req.json();
     const { content, prompt, options } = body;
     const fullPrompt = `${prompt}
@@ -14614,16 +14614,15 @@ ${content}`;
       }
     });
   });
-  app2.get("/health", (context) => {
+  app.get("/health", (context) => {
     return context.json({ status: "ok", provider: "claude" });
   });
-  return app2;
+  return app;
+};
+var startServer = (port = DEFAULT_PORT) => {
+  const app = createServer();
+  serve({ fetch: app.fetch, port });
+  console.log("React Grab Claude Code server running on port", port);
 };
-var app = createServer();
-serve({
-  fetch: app.fetch,
-  port: DEFAULT_PORT
-});
-console.log("React Grab Claude Code server running on port", DEFAULT_PORT);
 
-export { createServer };
+export { createServer, startServer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/claude-code",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "type": "module",
   "exports": {
     "./client": {
@@ -24,7 +24,7 @@
     "@anthropic-ai/claude-agent-sdk": "^0.1.0",
     "@hono/node-server": "^1.19.6",
     "hono": "^4.0.0",
-    "react-grab": "0.0.55"
+    "react-grab": "0.0.57"
   },
   "scripts": {
     "dev": "tsup --watch",