Framework
Next.js 14 App Router
The product is a Next.js App Router app with the page, root layout, global styling, and prompt-generation API route in one codebase.
Main Stack
What powers the AI prompt generator and how the browser workflow connects to the LLM backend.
UI layer
React 18
The interface is split into focused React components for task input, optional context upload, language switching, and the editable generated output panel.
Language
TypeScript
The UI, API request shape, uploaded image metadata, LLM provider layer, and export helpers are typed in TypeScript.
Prompt Rules
Custom, carefully tuned rules
A meticulously authored system prompt that transforms rough task descriptions into one specific, actionable prompt. The rules enforce a what → how → quality structure, scope discipline (extract intent, generalize content, never hardcode), clean Markdown formatting, and output language preservation — grounded in a single source-of-truth file.
AI integration
Provider-agnostic LLM layer
The backend can target Anthropic, OpenRouter, DeepSeek, Moonshot/Kimi, or an OpenAI-compatible endpoint through environment variables.
Interaction model
Generate, edit, preview, export
Instead of manually assembling sections, users describe what they want, add screenshot or code context, generate one Markdown prompt, refine it, preview it, copy it, or export it.
How It Runs
The app turns rough task context into a finished prompt through one server-side generation route.
1
Next.js renders the product shell
app/page.tsx renders the header, EN/BR language switcher, PromptBuilder component, and footer inside the App Router structure.
2
React collects task context
The builder keeps the task description, pasted code, uploaded image metadata, output text, active model label, loading state, and error state in client-side state.
3
Users add optional reference material
The upload section accepts common image formats and a code/text area, so screenshots, mockups, existing code, or style examples can guide the generated prompt.
4
The API route generates the prompt
app/api/generate-prompt/route.ts validates the request, combines task, code, and image context, applies the prompt rules, and calls the configured LLM provider.
5
The output stays editable
The generated Markdown appears in a textarea with preview, copy, .md download, .docx download, and model attribution.
Architecture Map
The current version is a compact full-stack AI product with i18n, a provider adapter, and client-side export tools.
Key folders and files
app/App Router page, root layout, global CSS, and the generate-prompt API endpoint.
components/Prompt builder shell, task input, upload/code context section, language switcher, generated output, and UI primitives.
lib/LLM provider adapter, i18n context/translations, Markdown-to-DOCX export helper, and shared utilities.
backlog/Roadmap, prompt structure guidance, and implementation planning notes.
PROMPT_RULES.mdThe root prompt rules file is the source of truth for the generated prompt structure.
Architecture Analysis
package.json next.config.js tailwind.config.ts tsconfig.json app/page.tsx app/layout.tsx app/globals.css app/api/generate-prompt/route.ts components/prompt-builder.tsx components/section-task.tsx components/section-upload.tsx components/generated-prompt.tsx components/language-switcher.tsx lib/llm/provider.ts lib/i18n/translations.ts lib/markdown-to-docx.ts
The architecture stays intentionally compact: App Router owns the page and API route, while shared library code handles provider access, i18n, and export support.
Prompt and AI Layer
The product centers on producing one high-quality prompt while keeping provider details behind a small backend adapter.
Client workflow
The browser owns the authoring loop
Users describe the project, feature, or task in natural language.
They can add image context and paste existing code or patterns.
The generated prompt is editable after generation.
Preview, copy, Markdown export, and DOCX export all happen from the client UI.
Server generation
The backend normalizes provider access
The route accepts task text, pasted code, and base64 image data.
A system prompt enforces Markdown structure, scope discipline, formatting, and output language.
Provider presets choose base URLs, default models, and vision support.
Stable translated error codes keep raw provider errors out of the UI.
Run Commands
The local workflow is a standard Next.js app with environment-driven LLM configuration.
Scripts
npm install npm run dev npm run build npm start npm run lint
The prompt generation path requires one configured LLM provider. Anthropic is the default, and OpenAI-compatible providers are supported through the same API layer.
Environment setup
What the app expects
LLM_PROVIDER selects anthropic, openrouter, deepseek, moonshot, or openai-compatible.
LLM_API_KEY, or ANTHROPIC_API_KEY when using the default Anthropic provider.
Optional LLM_MODEL, LLM_MODEL_LABEL, LLM_BASE_URL, and LLM_SUPPORTS_VISION overrides.
No database is required; frontend, API route, and export tools run from the same Next.js app.
Bottom Line
Prompt Builder is now a task-first AI prompt generator with a provider-agnostic LLM backend. It takes task, screenshot, and code context and returns an editable Markdown prompt that can be previewed, copied, or exported as Markdown or DOCX.