PMC Funder Discovery Tool

A React + Vite frontend (Tailwind, Noto Serif) that collects public media station details and streams an Anthropic Managed Agent response back to the browser through a Netlify Functions v2 proxy.

Setup

npm install

Add your Anthropic credentials (in .env for local dev, in the Netlify UI for production):

ANTHROPIC_API_KEY=sk-ant-...
# Optional - if you've provisioned a Managed Agent in the Anthropic console:
ANTHROPIC_AGENT_ID=agent_...
# Optional - override the model:
ANTHROPIC_MODEL=claude-sonnet-4-5

Run locally

npm run dev   # netlify dev (proxies Vite + functions on :8888)

Open http://localhost:8888.

How streaming works

1. The browser POSTs the form to /.netlify/functions/agent-proxy.
2. The Netlify v2 function calls anthropic.messages.stream(...) and wraps the upstream iterator in a ReadableStream. Each content_block_delta text chunk is enqueued as plain UTF‑8 bytes.
3. The React app reads response.body.getReader() and decodes chunks with TextDecoder, appending them to the result state.
4. A Thinking flag stays true until the first chunk arrives, then flips to a streaming state with a pulsing cursor.

Files

• src/App.jsx — form, streaming reader, UI states.
• netlify/functions/agent-proxy.js — Managed Agent proxy with ReadableStream.