The latest articles on DEV Community by Fantasy (@fantasy_3d94b64450126b360). https://dev.to/fantasy_3d94b64450126b360 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4121583%2Ffbddc6ec-47e7-4fe2-be7a-bea73ea2b701.png https://dev.to/fantasy_3d94b64450126b360 en Fantasy Sat, 12 Sep 2026 01:52:20 +0000 https://dev.to/fantasy_3d94b64450126b360/how-i-structured-a-secure-groq-summarizer-in-react-and-typescript-27pc https://dev.to/fantasy_3d94b64450126b360/how-i-structured-a-secure-groq-summarizer-in-react-and-typescript-27pc <p>I built Sift to address a common problem in React/TypeScript AI prototypes: the browser needs a simple summarization experience, but the Groq API key must remain server-side. The project is a small technical showcase of that boundary, with enough product polish to make the architecture easy to exercise and extend.</p> <h3> Architecture </h3> <p>The browser uses a typed tRPC mutation rather than calling Groq directly. The server validates the source text, summary format, tone, and requested model, then sends the request to Groq's OpenAI-compatible chat-completions endpoint using the server-only <code>GROQ_API_KEY</code>. The response is normalized into summary text, model metadata, and usage information for the UI.</p> <p>The important rule is simple: <strong>the client never receives the Groq credential</strong>. Local development uses an environment template, while hosted deployments should use the platform's secret manager.</p> <h3> Product surface </h3> <p>Sift includes three summary styles—brief, detailed, and bullet points—and three tone presets—neutral, executive, and friendly. The model selector supports GPT-OSS 20B, GPT-OSS 120B, and Groq Compound Mini. The interface also includes loading and error states, a sample input, character/word counts, copy and print actions, and a responsive layout.</p> <p>History is deliberately local for this starter kit. Recent summaries are stored in browser storage so the app can demonstrate a useful workflow without introducing a database or user-account dependency. That trade-off keeps the starter kit small; a production product could replace it with authenticated persistence, quotas, and team-level retention policies.</p> <h3> What I would improve next </h3> <p>The next practical additions would be streaming output, document upload with extraction limits, request-rate controls, and an evaluation harness that compares summary quality across models and prompt versions. I would also add explicit privacy controls before positioning the app for sensitive business documents.</p> <p>I would appreciate feedback on the API boundary and on which extension would make this most useful as a foundation for other AI features.</p> <p>Optional time-saver for developers who want the ready-to-deploy codebase: <a href="https://buy.stripe.com/fZueVc5Qm4d31nae5w6wE00" rel="noopener noreferrer">https://buy.stripe.com/fZueVc5Qm4d31nae5w6wE00</a></p> react typescript