Build the app you pictured.

Paste it as your first message. Nothing you type here leaves this page.

# Build an AI Writing Assistant app

You are a senior full-stack engineer and product designer. Build a production-ready AI Writing Assistant product for Web, using Next.js. Follow the brief below. If anything is ambiguous, ask before you assume.

## Product brief
A comprehensive writing tool with real-time suggestions, style enhancement, grammar correction, and content optimization features.

## Signature experiences
- Grammar checking
- Style suggestions
- Tone adjustment
- Readability analysis
- Plagiarism detection
- Content optimization
- Document history

## Functional requirements
**AI Features:** Text Generation, Content Summarization, Sentiment Analysis, AI Assistant, Natural Language Processing
**User Management:** Authentication, User Profiles
**E-commerce:** Payment Processing
**Administration:** Content Management
**Interaction:** Real-time Updates
**Other:** Export Options

## Platforms & form factors
**Web:**
- Responsive from 360px phones to 1920px+ desktops, with fluid type and layout.
- Fast first load (Core Web Vitals: LCP < 2.5s, CLS < 0.1), SEO metadata and social cards.
- Keyboard navigation and visible focus on every interactive element.

## Tech stack
- **Next.js**: React framework for production-grade applications with built-in SSR and static generation.
- Ecosystem: React, Vercel, TypeScript, Tailwind CSS
- Lean on: Server-side rendering, Static site generation, API routes, File-system routing

## Production essentials
**Analytics:**
- Use PostHog for product analytics, funnels and feature flags.
- Identify signed-in users; reset identity on sign-out.
- Write a tracking plan first: name the 5–10 events that prove the core journey works (sign-up, activation, the key action, upgrade) and the properties each carries.
- Respect consent and Do Not Track; keep personal data out of event properties.
**Monitoring:**
- Use Sentry for error tracking and performance tracing on every client and the server, with source maps uploaded per release.
- Tag events with release, environment and user ID (never personal data).
- Catch errors at every boundary (UI error boundaries, API handlers, background jobs) and alert on new issues and error-rate spikes.
- Emit structured logs with a request ID that ties a user action to its server work.
**Payments:**
- Use Stripe Checkout and the Customer Portal for one-off payments and subscriptions.
- Grant access only from verified webhooks (signature check, idempotent handlers), never from the client redirect.
- Keep a server-side source of truth for plans and entitlements; handle upgrades, downgrades, cancellations, refunds and failed payments.
- Build and test everything in test mode first, with receipts and a billing page users can reach in two clicks.

## Quality bar
- Accessible by default: semantic structure, labels, sufficient contrast, and support for system text size.
- Type-safe end to end; validate all user input at the boundary.
- Every data view has loading, empty and error states.
- Configuration through environment variables, documented in `.env.example`. No secrets in code.
- Tests for core business logic and seed data for local development.
- Plan for scale: High with proper caching.

## How to work
1. Before writing code, explore the repo (if any) and write a short PLAN.md: data model, routes, components, and an ordered task list. Pause for my review.
2. Implement the plan task by task. After each task, run the type checker, linter and tests, and fix failures before moving on.
3. Commit after each verified task with a clear message. Keep a running "Done / Next" list at the bottom of PLAN.md.

## Build plan
Work through these stages in order, one stage per session. Keep PLAN.md in the repo, tick each stage when its checks pass, and start every new session by reading PLAN.md and continuing from the first unticked stage. Show me the check results before moving on.

1. **Set up.** Create the project, write SPEC.md from this brief and DESIGN.md from the design section, and add PLAN.md listing every stage below.
   Done when: The app runs locally; PLAN.md lists every stage.
2. **Foundation.** Build the shared layout, navigation and an empty page for every route in SPEC.md, using only the design tokens.
   Done when: Every page has a route; Navigation works on phone and desktop.
3. **Core features.** Build one feature from SPEC.md at a time, test it, and tick it off in PLAN.md before starting the next.
   Done when: Each feature works end to end; PLAN.md shows which features are done.
4. **Accounts and data.** Add sign-in and the database, keeping each user’s data private to them.
   Done when: A new user can sign up and sign back in; One user cannot see another user’s data.
5. **Payments.** Add checkout, the customer portal and a webhook that verifies the signature and saves the plan on the user.
   Done when: A test payment upgrades the account; A webhook with a bad signature is rejected.
6. **Analytics and monitoring.** Track the key events from the tracking plan. Report browser and server errors.
   Done when: A key action shows up as an event; A test error reaches the dashboard.
7. **Polish.** Check every page at phone, tablet and desktop sizes; add loading, empty and error states and visible keyboard focus.
   Done when: No page scrolls sideways on a phone; An accessibility scan finds no serious issues.
8. **Pre-launch check.** Go through SPEC.md requirement by requirement, fix anything missing, then rerun every earlier check.
   Done when: Every requirement is done or explained; All earlier checks still pass.
9. **Launch.** Deploy, connect the domain and set production settings. Ask me before switching anything that takes real money or sends real messages.
   Done when: The site loads on its domain; Production settings are set and documented.