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.