Windsurf prompt to integrate an LLM chatbot
Bolting a chat window onto an app is easy; streaming, aborts, and key hygiene are where it goes wrong. Run this in Windsurf and Cascade plans the provider abstraction in Chat mode first, then builds a streaming route and a ChatPanel you verify with a scripted curl request.
Last updated
Integrate an LLM chatbot into this app. Server: a POST /api/chat route that streams tokens over server-sent events, reads the provider key from env only, and rejects bodies over 4000 characters with a 413. Client: a ChatPanel component that renders history, appends streamed chunks, offers a stop button that aborts the fetch, and retries once on transient failure. Never log message contents. Add {{addon}} for rate limiting only if I confirm it. Use Cascade Chat mode first to propose the file layout and a provider abstraction, wait for my approval, then switch to Write mode to implement. Verify by starting the dev server in the Windsurf terminal and sending one scripted curl request that proves the stream ends with a done event.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Integrate an LLM chatbot into this app. Server: a POST /api/chat route that streams tokens over server-sent events, reads the provider key from env only, and rejects bodies over 4000 characters with a 413. Client: a ChatPanel component that renders history, appends streamed chunks, offers a stop button that aborts the fetch, and retries once on transient failure. Never log message contents. Add input validation for rate limiting only if I confirm it. Use Cascade Chat mode first to propose the file layout and a provider abstraction, wait for my approval, then switch to Write mode to implement. Verify by starting the dev server in the Windsurf terminal and sending one scripted curl request that proves the stream ends with a done event.
Same task in other tools
Questions about this prompt
Why plan in Chat mode before switching to Write mode?
The provider abstraction is the one decision that is expensive to reverse. Reviewing the proposed layout costs a minute and stops Cascade from hard-wiring a single vendor SDK through your components.
How do I adapt this for a provider without streaming?
Replace the server-sent events sentences with a single JSON response plus a loading state, and keep the stop button as a plain request cancel. The 413 guard and the no-logging rule stay as written.
The stream renders but never finishes. What is the fix?
The route usually forgets to emit the terminating done event or to close the response. The curl check in the prompt exists for exactly this case; ask Cascade to rerun it and inspect the final event it received.