DEV Community

Yahya
Yahya

Posted on

How I Built a Zero-Login Voice & Text SOP Generator Using Next.js & Gemini 1.5 Flash

#nextjs #ai #webdev #javascript

Building SaaS tools often comes with unnecessary friction: signup forms, email verification loops, database setups, and complex onboarding flows.
When we set out to build SOPvibe, our primary engineering constraint was simple: Zero signups, zero credit cards, instant output.
If a founder or manager has a 60-second voice note or a messy Slack thread, they shouldn't need to log in to turn it into structured documentation. In this article, I'll break down the architecture and prompt engineering behind building a high-velocity, no-friction operational tool.
🏗️ The Tech Stack & Architecture
We wanted the application to feel instant and decoupled. The core stack includes:
Frontend Framework: Next.js (App Router) + React for fast client-side rendering.
LLM Engine: Gemini 1.5 Flash for rapid text transformation and structured Markdown parsing.
Audio & Text Pipeline: Web Audio API (MediaRecorder) for local client-side recording and isolated REST API routes for payload processing.
⚡ The Pipeline: From Messy Text to Structured SOP
One of the biggest friction points in scaling operations is that team knowledge is buried in unstructured places: noisy Slack channels, email chains, or quick audio recordings.
Here is the entire server-side endpoint handling the transformation using Next.js App Router and Gemini 1.5 Flash:

// app/api/dump-to-sop/route.ts
import { GoogleGenerativeAI } from "@google/generative-ai";
import { NextResponse } from "next/server";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

export async function POST(req: Request) {
try {
const { rawDumpText } = await req.json();

if (!rawDumpText || rawDumpText.trim() === "") {
  return NextResponse.json(
    { error: "Text dump cannot be empty." },
    { status: 400 }
  );
}

const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

const systemPrompt = `
Enter fullscreen mode Exit fullscreen mode

You are an expert Operations Engineer.
Convert the following messy text dump (Slack chat, email thread, or raw meeting notes) into a clean, structured Standard Operating Procedure (SOP).

Formatting Rules:

  • Strip out chat chatter, timestamps, emojis, usernames, and non-actionable talk.
  • Extract: Title, Prerequisites/Inputs, Sequential Action Steps, and Expected Result.
  • Keep the tone professional, direct, and actionable.
  • Output directly in Markdown format.

Raw Dump:
${rawDumpText}
`;

const result = await model.generateContent(systemPrompt);
const responseText = result.response.text();

return NextResponse.json({ sop: responseText });
Enter fullscreen mode Exit fullscreen mode

} catch (error) {
console.error("Dump parsing error:", error);
return NextResponse.json(
{ error: "Failed to process text dump." },
{ status: 500 }
);
}
}

🎯 Key Design Choices
Stripping Noise at the Prompt Level: Raw Slack dumps are filled with junk like @username [10:15 AM]: hey team. By instructing Gemini 1.5 Flash to act as an Operations Engineer and explicitly filter timestamps and filler words, we eliminate the need for complex pre-processing regex pipelines.
Stateless Processing: Because there is no database layer attached to the generation phase, response times stay under 2-3 seconds, and user privacy is strictly preserved.
Direct Clipboard Handoff: Once generated, the clean Markdown is immediately available to copy directly into team knowledge bases like Notion, ClickUp, or GitHub Docs.
🚀 Try It Out
We built this tool to kill operational friction for builders and growing teams. You can try the live tool directly at (sopvibe.app) — no account creation required.
I'd love to hear your thoughts on this architecture or how you handle unstructured AI text transformations in your own projects

Top comments (0)