How to vibe codeProWritingAid

Prerequisites

• Node.jsfree

  Required runtime for building and running the full-stack web application.

• GitHubfree

  Version control and deployment pipeline management.

• Anthropic API Keypay-as-you-go

  Powers advanced LLM calls for Sparks, Chapter Critiques, and manuscript insights.

AI coding tools

• Cursor

  Primary AI code editor for rapidly scaffolding UI components and managing multi-file edits.

• Claude Code

  Terminal-based coding agent for handling complex backend logic, database schema design, and script integrations.

Build guide

1. 01Project Scaffolding & Editor Setup

   Initialize the Next.js application with Tailwind CSS, configure better-auth for single-user or local authentication, and integrate TipTap or a similar rich-text editor to serve as the core writing canvas interface.

   Initialize a new Next.js project with Tailwind CSS and TypeScript. Set up better-auth with email/password authentication backed by a Turso SQLite database using libSQL. Create a clean writing dashboard layout with a sidebar navigation for 'Documents', 'Story Canvas', and 'Reports'. Integrate the TipTap rich-text editor in the main workspace with a custom floating toolbar for word count tracking, document type settings, and undo/redo operations. Ensure clean styling matching a professional writing software aesthetic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Document Management & Storage

   Build out the document creation, auto-saving, and file retrieval systems so writers can manage multiple chapters or manuscripts seamlessly.

   Implement a robust document management system in Next.js using server actions and Turso database. Create tables for documents (id, title, content, word_count, created_at, updated_at). Add auto-saving functionality to the TipTap editor that triggers debounced API updates every 2 seconds. Build a document list view with sorting, renaming, and deletion capabilities, ensuring smooth state transitions and loading indicators.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Deterministic Writing Style & Statistics Engine

   Develop client-side or server-side parser utilities that compute basic style metrics: sentence length variation, paragraph length, passive voice detection via regex patterns, and overused word frequency counters.

   Write a utility module in TypeScript that analyzes plain text extracted from the editor. Implement algorithms to calculate average sentence length, identify passive voice verbs using regex patterns, flag overly long sentences, and count word frequencies to highlight overused words. Display these metrics in a dedicated 'Summary Report' sidebar tab with clickable highlights in the editor canvas.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Writing Assistant & Sparks Integration

   Integrate the Vercel AI SDK with Anthropic's Claude API to handle sentence rephrasing, tone adjustments, text expansions, and generative writing sparks.

   Set up the Vercel AI SDK in Next.js connecting to the Anthropic API. Create backend API routes for 'Rephrase' (accepting a sentence and target tone like formal, shorter, or sensory) and 'Sparks' (accepting prompt instructions to expand, summarize, or continue drafting). Build clean UI modal components in the editor that allow users to select text, request an AI modification via a floating menu, and review diffs before applying changes to the editor content.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Chapter & Manuscript Critique Pipelines

   Build automated LLM evaluation workflows that take entire chapters or uploaded manuscript text and output structured developmental critiques, plot pacing notes, and beta reader perspectives.

   Implement an asynchronous analysis workflow using Next.js server actions and Anthropic API with streaming support. Create a 'Chapter Critique' feature that splits text into manageable chunks if needed, passes it through a structured prompt designed for developmental fiction editing, and renders a comprehensive report breaking down pacing, character voice, tension, and actionable revision suggestions into clean card components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Story Canvas & Planning Tools

   Create a guided brainstorming and outlining interface (Story Canvas) where writers answer prompts about characters, setting, and plot arcs to generate instant idea feedback reports.

   Build a 'Story Canvas' planning interface featuring structured input forms for core story elements: protagonist, setting, central conflict, stakes, and theme. Implement an 'Idea Feedback Report' generator that bundles these inputs into a structured prompt sent to Claude, returning categorized insights highlighting story strengths, developmental gaps, and next drafting steps displayed in an interactive dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for ProWritingAid