48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# 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
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
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](src/App.jsx) — form, streaming reader, UI states.
|
||
- [netlify/functions/agent-proxy.js](netlify/functions/agent-proxy.js) —
|
||
Managed Agent proxy with `ReadableStream`.
|