Prompt-to-Plan Studio

Workflow

Prompt-to-Plan Studio

Transform rough product ideas into structured documentation (enhanced prompts, PRDs, technical designs, and implementation plans).

Note: This source code will soon be made available on GitHub as open source.

BYOK (Bring Your Own Key)

Important: This application requires you to bring your own API keys (BYOK) to use LLM providers.

All API keys are stored locally in your browser using localStorage
No server-side storage - your keys never leave your device
Secure by design - API keys are only sent directly to the LLM provider APIs you configure
Keys are encrypted in transit and stored securely in your browser's localStorage

To get started, navigate to Settings → Providers and configure your API keys for OpenAI, OpenRouter, DeepSeek, or custom providers. See the Provider Setup section below for detailed instructions.

Tech Stack

Framework: Next.js App Router (TypeScript, React Server Components)
Styling: Tailwind (v4), custom UI primitives, and Shadcn-inspired layout components
State: React Context, hooks, TanStack Query
LLM Integration: Vercel AI SDK + provider adapters (OpenAI, OpenRouter, DeepSeek, custom providers)

Getting Started

Install dependencies
```
npm install
```
Run the development server
```
npm run dev
```
Open http://localhost:3000 to interact with the workflow.

Available Scripts

Command	Description
`npm run dev`	Start the dev server at `localhost:3000`
`npm run lint`	Run ESLint across the project
`npm run build`	Production build (Next.js)
`npm start`	Run the production server

Current Functionality

Root layout with header, sidebar navigation, workflow providers, React Query, and telemetry provider
Workflow context with reducer + localStorage persistence for step content, provider/model selection, prompts, and metadata
Full workflow slice (Idea → Prompt → PRD → Design → Plan) with streaming generation, warnings, reset/copy/download controls, and metadata badges
Markdown editors with copy, download, and fullscreen controls, plus word/character count display
Provider management context with localStorage storage, retrying validation, enable toggles, and custom provider creation/removal
Provider settings page allowing:
- Viewing provider list with status + last validation time
- Editing API keys, base URLs, enablement toggles, validation tests
- Adding custom providers (base URL + multiple models) and deleting them with confirmation
- Toggling anonymous telemetry (opt-out respected everywhere)
Telemetry system with event tracking, batching, and localStorage preference management

Telemetry

The application includes an optional anonymous telemetry system to help improve the product. Telemetry is enabled by default but can be disabled at any time through the Settings page.

What is Tracked

The following anonymous events are tracked when telemetry is enabled:

Generation Events: generation_attempt, generation_success, generation_failure
Provider Management Events: provider_added, provider_updated, provider_removed, provider_validated
Workflow Events: document_exported, workflow_reset, page_view

Each event includes anonymous context: a session ID (stored in sessionStorage), timestamp, user agent, and viewport dimensions.

Note: Currently, telemetry data is only logged to the server console for development purposes. The API endpoint receives events but does not forward them to any external analytics service.

Navigate to Settings → Telemetry to enable or disable telemetry. Your preference is saved in localStorage and persists across sessions.

Provider Setup

Open the Settings → Providers page to configure each provider:

OpenAI: paste API keys from platform.openai.com/account/api-keys; base URL optional.
OpenRouter: use keys from your OpenRouter account; set the base URL if you run a proxy (defaults to https://openrouter.ai/api/v1).
DeepSeek: paste keys from platform.deepseek.com/api_keys.
Custom providers: specify a base URL and one or more OpenAI-compatible models (ID, name, context window, max output tokens). These also support streaming.

After saving a provider, click Run Test to validate credentials. Providers remain disabled in the workflow until enabled, have an API key, and pass validation.

Directory Overview

app/                    Next.js App Router routes (workflow, settings, API)
components/             UI primitives, workflow widgets, provider settings UI
contexts/               Workflow + provider React contexts
hooks/                  Custom hooks (local storage, providers, workflow)
lib/                    Config, provider adapters, storage utilities, query client
  telemetry/            Telemetry service, event queue, and tracking utilities
styles/                 Global styles (Tailwind)
types/                  Shared TypeScript models

Next Steps

Enhance provider adapters with advanced error handling (retry logic, backoff strategies, better error categorization)
Write automated tests (unit tests for contexts/hooks, integration tests for generation flows, E2E tests for complete workflow)
Integrate telemetry analytics backend (currently events are logged to console; integrate with analytics service per design doc)
Add CI/CD pipeline with automated testing and build validation