94 lines
3.8 KiB
Markdown
94 lines
3.8 KiB
Markdown
Implementation Plan: React + Anthropic Managed Agent (Streaming)
|
|
1. Project Overview
|
|
|
|
Build a React frontend that collects user and public media station data. This data is sent to a Netlify Serverless Function (v2), which proxies a request to an Anthropic Managed Agent. The response must be streamed to bypass Netlify's 26-second execution limit and provide real-time UI feedback.
|
|
2. Technical Requirements
|
|
|
|
Frontend: React (Vite/CRA), Tailwind CSS (for UI).
|
|
|
|
Backend: Netlify Functions v2 (ESM).
|
|
|
|
API: Anthropic SDK (specifically using the Agent/Messages streaming endpoint).
|
|
|
|
State Management: React useState and ReadableStream API.
|
|
|
|
3. Step-by-Step Task List
|
|
Step 1: React Form Component
|
|
|
|
Create a form to capture the following fields:
|
|
|
|
userName (string)
|
|
|
|
userEmail (string)
|
|
|
|
stationName (string)
|
|
|
|
stationLocation (string)
|
|
|
|
stationWebsite (url)
|
|
|
|
Logic: Use a handleSubmit function that prevents default behavior and initializes the streaming fetch request.
|
|
Step 2: Netlify Function (The Proxy)
|
|
|
|
Create a file at netlify/functions/agent-proxy.js.
|
|
|
|
Configuration: Use Netlify v2 syntax (export default async (req, context) => { ... }).
|
|
|
|
Anthropic Integration: Initialize the Anthropic client with an environment variable ANTHROPIC_API_KEY.
|
|
|
|
Agent Call: Use the Anthropic Messages API, targeting the specific Agent ID (if using a pre-configured Managed Agent) or passing the system prompt that defines the agent's persona.
|
|
|
|
Stream Implementation: * Use anthropic.messages.stream.
|
|
|
|
Wrap the output in a ReadableStream.
|
|
|
|
Return a Response object with headers: { "Content-Type": "text/plain; charset=utf-8" }.
|
|
|
|
Step 3: Frontend Streaming Logic
|
|
|
|
Implement a readStream function inside the React component:
|
|
|
|
Use fetch() to call /.netlify/functions/agent-proxy.
|
|
|
|
Access response.body.getReader().
|
|
|
|
Use a while(true) loop to read chunks.
|
|
|
|
Update a result state variable by appending new chunks: setResult(prev => prev + chunk).
|
|
|
|
Step 4: UI/UX Indicators
|
|
|
|
Initial Loading: Display a "Connecting to Agent..." spinner immediately upon submission.
|
|
|
|
Thinking State: Show a "Claude is thinking..." status until the first byte of data is received.
|
|
|
|
Streaming State: Render the incoming markdown/text in a dedicated container. Use a "pulse" icon at the end of the text to indicate the stream is still active.
|
|
|
|
4. Specific Prompt for Code Generation
|
|
|
|
When you hand this to an LLM, use the following prompt:
|
|
|
|
"Please generate the code for a React application and a Netlify v2 Function based on the provided plan.
|
|
|
|
Ensure the Netlify function uses the ReadableStream API to pipe Anthropic's content_block_delta events directly to the frontend.
|
|
|
|
In the React app, use a TextDecoder to handle the stream chunks.
|
|
|
|
Add a 'Thinking' state that is true while waiting for the first chunk and false once data starts flowing.
|
|
|
|
Ensure the Anthropic call is configured for a Managed Agent workflow (include a placeholder for the Agent ID or System Prompt)."
|
|
|
|
5. Architectural Diagram
|
|
|
|
The following diagram illustrates how the streaming data flows from Anthropic through the serverless "pipe" to your user's screen without hitting the timeout wall.
|
|
6. Security & Configuration
|
|
|
|
Environment Variables: Remind the developer to set ANTHROPIC_API_KEY in the Netlify UI.
|
|
|
|
CORS: Ensure the Netlify function handles the request within the same origin to avoid CORS issues.
|
|
|
|
Validation: Add basic regex validation for the station's website URL before sending it to the API.
|
|
|
|
Implementation Note for the Managed Agent
|
|
|
|
Since "Managed Agents" in Anthropic often involve specific tools or long-running threads, the code should be prepared to handle tool_use blocks or input_json if the agent needs to "call back" for more information about the station. |