@react-grab/claude-code 0.0.55 → 0.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# @react-grab/claude-code
|
|
2
|
+
|
|
3
|
+
Claude Code agent provider for React Grab. Requires running a local server that interfaces with the Claude Agent SDK.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @react-grab/claude-code
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @react-grab/claude-code
|
|
11
|
+
# or
|
|
12
|
+
bun add @react-grab/claude-code
|
|
13
|
+
# or
|
|
14
|
+
yarn add @react-grab/claude-code
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Server Setup
|
|
18
|
+
|
|
19
|
+
The server runs on port `4567` by default.
|
|
20
|
+
|
|
21
|
+
### Vite
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
// vite.config.ts
|
|
25
|
+
import "@react-grab/claude-code/server";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Next.js
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
// next.config.ts
|
|
32
|
+
import "@react-grab/claude-code/server";
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Client Usage
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { init } from "react-grab/core";
|
|
39
|
+
import { createClaudeAgentProvider } from "@react-grab/claude-code/client";
|
|
40
|
+
|
|
41
|
+
const agentProvider = createClaudeAgentProvider();
|
|
42
|
+
|
|
43
|
+
init({
|
|
44
|
+
agent: {
|
|
45
|
+
provider: agentProvider,
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Configuration
|
|
51
|
+
|
|
52
|
+
You can customize the server URL and default options:
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
const agentProvider = createClaudeAgentProvider({
|
|
56
|
+
getOptions: () => ({
|
|
57
|
+
model: "opus",
|
|
58
|
+
maxTurns: 20,
|
|
59
|
+
}),
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## How It Works
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
┌─────────────────┐ HTTP ┌─────────────────┐ SDK ┌─────────────────┐
|
|
67
|
+
│ │ localhost:4567 │ │ │ │
|
|
68
|
+
│ React Grab │ ──────────────► │ Server │ ─────────────► │ Claude Code │
|
|
69
|
+
│ (Browser) │ ◄────────────── │ (Node.js) │ ◄───────────── │ (Agent) │
|
|
70
|
+
│ │ SSE │ │ │ │
|
|
71
|
+
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
|
72
|
+
Client Server Agent
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
1. **React Grab** sends the selected element context to the server via HTTP POST
|
|
76
|
+
2. **Server** receives the request and forwards it to Claude Code via the Agent SDK
|
|
77
|
+
3. **Claude Code** processes the request and streams responses back
|
|
78
|
+
4. **Server** relays status updates to the client via Server-Sent Events (SSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-grab/claude-code",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.56",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
"./client": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"@anthropic-ai/claude-agent-sdk": "^0.1.0",
|
|
25
25
|
"@hono/node-server": "^1.19.6",
|
|
26
26
|
"hono": "^4.0.0",
|
|
27
|
-
"react-grab": "0.0.
|
|
27
|
+
"react-grab": "0.0.56"
|
|
28
28
|
},
|
|
29
29
|
"scripts": {
|
|
30
30
|
"dev": "tsup --watch",
|