Initial

buildplan.md

@@ -0,0 +1,94 @@
+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.