@react-grab/cursor 0.0.55 → 0.0.57

package/README.md

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

package/dist/client.cjs

@@ -60,7 +60,10 @@ var createCursorAgentProvider = (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) {
@@ -74,14 +77,33 @@ var createCursorAgentProvider = (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 defaultCursorAgentProvider = createCursorAgentProvider();
+var attachAgent = async () => {
+  if (typeof window === "undefined") return;
+  const provider = createCursorAgentProvider();
+  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.createCursorAgentProvider = createCursorAgentProvider;
-exports.defaultCursorAgentProvider = defaultCursorAgentProvider;

package/dist/client.d.cts

@@ -1,4 +1,4 @@
-import { AgentProvider } from 'react-grab/core';
+import { init, AgentProvider } from 'react-grab/core';
 
 interface CursorAgentOptions {
     model?: string;
@@ -9,6 +9,11 @@ interface CursorAgentProviderOptions {
     getOptions?: () => Partial<CursorAgentOptions>;
 }
 declare const createCursorAgentProvider: (providerOptions?: CursorAgentProviderOptions) => AgentProvider<CursorAgentOptions>;
-declare const defaultCursorAgentProvider: AgentProvider<CursorAgentOptions>;
+declare global {
+    interface Window {
+        __REACT_GRAB__?: ReturnType<typeof init>;
+    }
+}
+declare const attachAgent: () => Promise<void>;
 
-export { createCursorAgentProvider, defaultCursorAgentProvider };
+export { attachAgent, createCursorAgentProvider };

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { AgentProvider } from 'react-grab/core';
+import { init, AgentProvider } from 'react-grab/core';
 
 interface CursorAgentOptions {
     model?: string;
@@ -9,6 +9,11 @@ interface CursorAgentProviderOptions {
     getOptions?: () => Partial<CursorAgentOptions>;
 }
 declare const createCursorAgentProvider: (providerOptions?: CursorAgentProviderOptions) => AgentProvider<CursorAgentOptions>;
-declare const defaultCursorAgentProvider: AgentProvider<CursorAgentOptions>;
+declare global {
+    interface Window {
+        __REACT_GRAB__?: ReturnType<typeof init>;
+    }
+}
+declare const attachAgent: () => Promise<void>;
 
-export { createCursorAgentProvider, defaultCursorAgentProvider };
+export { attachAgent, createCursorAgentProvider };

package/dist/client.js

@@ -58,7 +58,10 @@ var createCursorAgentProvider = (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) {
@@ -72,13 +75,32 @@ var createCursorAgentProvider = (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 defaultCursorAgentProvider = createCursorAgentProvider();
+var attachAgent = async () => {
+  if (typeof window === "undefined") return;
+  const provider = createCursorAgentProvider();
+  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 { createCursorAgentProvider, defaultCursorAgentProvider };
+export { attachAgent, createCursorAgentProvider };

package/dist/server.cjs

@@ -739,14 +739,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);
@@ -2253,7 +2253,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;
@@ -2277,9 +2277,9 @@ var extractTextFromMessage = (message) => {
   return message.content.filter((block) => block.type === "text").map((block) => block.text).join(" ").trim();
 };
 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}
@@ -2301,7 +2301,7 @@ ${content}`;
         cursorAgentArgs.push("--workspace", process.cwd());
       }
       try {
-        await stream2.writeSSE({ data: "Starting Cursor Agent...", event: "status" });
+        await stream2.writeSSE({ data: "Planning next moves", event: "status" });
         const cursorProcess = child_process.spawn("cursor-agent", cursorAgentArgs, {
           stdio: ["pipe", "pipe", "pipe"],
           env: { ...process.env }
@@ -2313,29 +2313,43 @@ ${content}`;
           switch (event.type) {
             case "system":
               if (event.subtype === "init") {
-                await stream2.writeSSE({ data: "Connected to Cursor Agent", event: "status" });
+                await stream2.writeSSE({
+                  data: "Planning next moves",
+                  event: "status"
+                });
               }
               break;
             case "thinking":
               if (event.subtype === "completed") {
-                await stream2.writeSSE({ data: "Processing...", event: "status" });
+                await stream2.writeSSE({
+                  data: "Thinking\u2026",
+                  event: "status"
+                });
               }
               break;
             case "assistant": {
-              const text = extractTextFromMessage(event.message);
-              if (text) {
-                const statusUpdate = text.length > 150 ? `${text.slice(0, 150)}...` : text;
-                await stream2.writeSSE({ data: statusUpdate, event: "status" });
+              const textContent = extractTextFromMessage(event.message);
+              if (textContent) {
+                await stream2.writeSSE({ data: textContent, event: "status" });
               }
               break;
             }
             case "result":
               if (event.subtype === "success") {
-                await stream2.writeSSE({ data: "Completed successfully", event: "status" });
+                await stream2.writeSSE({
+                  data: "Completed successfully",
+                  event: "status"
+                });
               } else if (event.subtype === "error" || event.is_error) {
-                await stream2.writeSSE({ data: `Error: ${event.result || "Unknown error"}`, event: "error" });
+                await stream2.writeSSE({
+                  data: `Error: ${event.result || "Unknown error"}`,
+                  event: "error"
+                });
               } else {
-                await stream2.writeSSE({ data: "Task finished", event: "status" });
+                await stream2.writeSSE({
+                  data: "Task finished",
+                  event: "status"
+                });
               }
               break;
           }
@@ -2372,21 +2386,24 @@ ${content}`;
         await stream2.writeSSE({ data: "", event: "done" });
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "Unknown error";
-        await stream2.writeSSE({ data: `Error: ${errorMessage}`, event: "error" });
+        await stream2.writeSSE({
+          data: `Error: ${errorMessage}`,
+          event: "error"
+        });
         await stream2.writeSSE({ data: "", event: "done" });
       }
     });
   });
-  app2.get("/health", (context) => {
+  app.get("/health", (context) => {
     return context.json({ status: "ok", provider: "cursor" });
   });
-  return app2;
+  return app;
+};
+var startServer = (port = DEFAULT_PORT) => {
+  const app = createServer();
+  serve({ fetch: app.fetch, port });
+  console.log("React Grab Cursor server running on port", port);
 };
-var app = createServer();
-serve({
-  fetch: app.fetch,
-  port: DEFAULT_PORT
-});
-console.log("React Grab Cursor 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

@@ -733,14 +733,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);
@@ -2247,7 +2247,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;
@@ -2271,9 +2271,9 @@ var extractTextFromMessage = (message) => {
   return message.content.filter((block) => block.type === "text").map((block) => block.text).join(" ").trim();
 };
 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}
@@ -2295,7 +2295,7 @@ ${content}`;
         cursorAgentArgs.push("--workspace", process.cwd());
       }
       try {
-        await stream2.writeSSE({ data: "Starting Cursor Agent...", event: "status" });
+        await stream2.writeSSE({ data: "Planning next moves", event: "status" });
         const cursorProcess = spawn("cursor-agent", cursorAgentArgs, {
           stdio: ["pipe", "pipe", "pipe"],
           env: { ...process.env }
@@ -2307,29 +2307,43 @@ ${content}`;
           switch (event.type) {
             case "system":
               if (event.subtype === "init") {
-                await stream2.writeSSE({ data: "Connected to Cursor Agent", event: "status" });
+                await stream2.writeSSE({
+                  data: "Planning next moves",
+                  event: "status"
+                });
               }
               break;
             case "thinking":
               if (event.subtype === "completed") {
-                await stream2.writeSSE({ data: "Processing...", event: "status" });
+                await stream2.writeSSE({
+                  data: "Thinking\u2026",
+                  event: "status"
+                });
               }
               break;
             case "assistant": {
-              const text = extractTextFromMessage(event.message);
-              if (text) {
-                const statusUpdate = text.length > 150 ? `${text.slice(0, 150)}...` : text;
-                await stream2.writeSSE({ data: statusUpdate, event: "status" });
+              const textContent = extractTextFromMessage(event.message);
+              if (textContent) {
+                await stream2.writeSSE({ data: textContent, event: "status" });
               }
               break;
             }
             case "result":
               if (event.subtype === "success") {
-                await stream2.writeSSE({ data: "Completed successfully", event: "status" });
+                await stream2.writeSSE({
+                  data: "Completed successfully",
+                  event: "status"
+                });
               } else if (event.subtype === "error" || event.is_error) {
-                await stream2.writeSSE({ data: `Error: ${event.result || "Unknown error"}`, event: "error" });
+                await stream2.writeSSE({
+                  data: `Error: ${event.result || "Unknown error"}`,
+                  event: "error"
+                });
               } else {
-                await stream2.writeSSE({ data: "Task finished", event: "status" });
+                await stream2.writeSSE({
+                  data: "Task finished",
+                  event: "status"
+                });
               }
               break;
           }
@@ -2366,21 +2380,23 @@ ${content}`;
         await stream2.writeSSE({ data: "", event: "done" });
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "Unknown error";
-        await stream2.writeSSE({ data: `Error: ${errorMessage}`, event: "error" });
+        await stream2.writeSSE({
+          data: `Error: ${errorMessage}`,
+          event: "error"
+        });
         await stream2.writeSSE({ data: "", event: "done" });
       }
     });
   });
-  app2.get("/health", (context) => {
+  app.get("/health", (context) => {
     return context.json({ status: "ok", provider: "cursor" });
   });
-  return app2;
+  return app;
+};
+var startServer = (port = DEFAULT_PORT) => {
+  const app = createServer();
+  serve({ fetch: app.fetch, port });
+  console.log("React Grab Cursor server running on port", port);
 };
-var app = createServer();
-serve({
-  fetch: app.fetch,
-  port: DEFAULT_PORT
-});
-console.log("React Grab Cursor server running on port", DEFAULT_PORT);
 
-export { createServer };
+export { createServer, startServer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/cursor",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "type": "module",
   "exports": {
     "./client": {
@@ -23,7 +23,7 @@
   "dependencies": {
     "@hono/node-server": "^1.19.6",
     "hono": "^4.0.0",
-    "react-grab": "0.0.55"
+    "react-grab": "0.0.57"
   },
   "scripts": {
     "dev": "tsup --watch",