Briefly — AI Content Brief Generator (React + Express + Groq)

Briefly takes the dread out of starting a piece of content. Most writing tools assume you already know what you want to say, but the actual hard part is usually earlier than that: figuring out the shape of the piece before you've written a single sentence. That's what Briefly handles. You type in a topic or a headline you're working from, optionally drop in a source URL if you're outlining against something specific, pick how deep you want the outline to go, and choose a tone, editorial, instructional, or journalistic. Within seconds you get back a structured outline: a main heading, sub-sections under it, and bullet points beneath those, each one tagged so it's obvious what role it plays in the piece. Where it makes sense, the outline also flags spots where you'd want to back a claim up with a real source rather than just asserting it.

It's the difference between opening a blank document and opening one that already has a skeleton on the page. For a writer, that means less time spent staring at a cursor deciding where to start, and more time spent actually writing. For someone managing a content pipeline, it means you can hand a writer a brief instead of just a topic, which cuts down on back and forth about scope and structure later.

The product is a complete, working app rather than a static demo. A user creates an account, generates as many briefs as they need, and every one of them is saved automatically. There's a history page that lists past briefs with their title, the tone and depth they were generated at, and when they were created, so nothing gets lost between sessions.

The project is a small monorepo managed with pnpm workspaces, splitting the frontend and backend into separate packages that share tooling and configuration. The frontend is built with React 18 and Vite. The backend is an Express 5 API running on Node.js. Data is stored in PostgreSQL, accessed through Drizzle ORM for type-safe queries and schema migrations. Authentication and account management run through Clerk. Brief generation itself is powered by Groq, running Llama 3.1 8B. The entire stack, frontend, backend, database, and deployment, runs on Replit.

Frontend: the React 18 and Vite frontend handles the input form (topic, optional source URL, depth selector, tone dropdown) and renders the generated outline as it comes back from the API, with each heading level styled distinctly so the hierarchy is visually obvious, not just structurally correct. State is kept lightweight since the app doesn't need heavy client-side data management, the bulk of the logic lives server-side.

Backend: an Express 5 API exposes the generation endpoint along with the routes for fetching and listing a user's saved briefs. Incoming requests are validated before anything is sent to the model, and the API is responsible for shaping the raw model output into the structured H1, H2, and bullet format the frontend expects, rather than passing through whatever the model returns unprocessed.

Data and auth: PostgreSQL handles persistence, with Drizzle ORM providing type-safe queries and versioned schema migrations rather than hand-written SQL scattered through the codebase. Every brief is tied to the user who generated it. Clerk handles sign-in, session management, and gates the history view so users only ever see their own saved briefs.

AI: generation runs on Groq's infrastructure using Llama 3.1 8B rather than a larger general-purpose model, a deliberate tradeoff for speed. A tool whose entire pitch is killing the blank-page feeling has to actually feel instant when you use it, so latency mattered more here than squeezing out marginal gains in output quality from a bigger model. The prompt logic constrains the model to return a consistent, tagged structure regardless of topic, which is what lets the frontend reliably render H1, H2, and bullet levels without extra parsing logic on the client.

Tested across a range of topics during development, including non-trivial technical ones like vector databases for RAG pipelines, and the outline structure adapted correctly to each rather than falling back on a single reused template.