react-grab 0.0.59 → 0.0.60

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 CHANGED
@@ -121,6 +121,96 @@ if (process.env.NODE_ENV === "development") {
121
121
  }
122
122
  ```
123
123
 
124
+ ## Coding agent integration (beta)
125
+
126
+ React Grab can send selected element context directly to your coding agent. This enables a workflow where you select a UI element and an agent automatically makes changes to your codebase.
127
+
128
+ This means **no copying and pasting** - just select the element and let the agent do the rest.
129
+
130
+ ### Claude Code
131
+
132
+ Install the Claude Code agent provider:
133
+
134
+ ```bash
135
+ npm install @react-grab/claude-code
136
+ ```
137
+
138
+ #### Server Setup
139
+
140
+ The server runs on port `4567` and interfaces with the Claude Agent SDK.
141
+
142
+ **Vite:**
143
+
144
+ ```ts
145
+ // vite.config.ts
146
+ import { startServer } from "@react-grab/claude-code/server";
147
+
148
+ if (process.env.NODE_ENV === "development") {
149
+ startServer();
150
+ }
151
+ ```
152
+
153
+ **Next.js:**
154
+
155
+ ```ts
156
+ // next.config.ts
157
+ import { startServer } from "@react-grab/claude-code/server";
158
+
159
+ if (process.env.NODE_ENV === "development") {
160
+ startServer();
161
+ }
162
+ ```
163
+
164
+ #### Client Setup
165
+
166
+ ```tsx
167
+ import { attachAgent } from "@react-grab/claude-code/client";
168
+
169
+ attachAgent();
170
+ ```
171
+
172
+ ### Cursor CLI
173
+
174
+ Install the Cursor agent provider:
175
+
176
+ ```bash
177
+ npm install @react-grab/cursor
178
+ ```
179
+
180
+ #### Server Setup
181
+
182
+ The server runs on port `5567` and interfaces with the `cursor-agent` CLI.
183
+
184
+ **Vite:**
185
+
186
+ ```ts
187
+ // vite.config.ts
188
+ import { startServer } from "@react-grab/cursor/server";
189
+
190
+ if (process.env.NODE_ENV === "development") {
191
+ startServer();
192
+ }
193
+ ```
194
+
195
+ **Next.js:**
196
+
197
+ ```ts
198
+ // next.config.ts
199
+ import { startServer } from "@react-grab/cursor/server";
200
+
201
+ if (process.env.NODE_ENV === "development") {
202
+ startServer();
203
+ }
204
+ ```
205
+
206
+ #### Client Setup
207
+
208
+ ```tsx
209
+ import { attachAgent } from "@react-grab/cursor/client";
210
+
211
+ attachAgent();
212
+ ```
213
+
124
214
  ## Extending React Grab
125
215
 
126
216
  React Grab provides an public customization API. Check out the [type definitions](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/types.ts) to see all available options for extending React Grab.