How to vibe codeLivingWriter

Prerequisites

• Node.jsfree

  Runtime environment for building and running the full-stack web application.

• GitHubfree

  Source control and integration for deployment pipelines.

• Anthropic API KeyPay-as-you-go (~$5-10/mo)

  Powers the AI outlining, rewrites, and manuscript chat features.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex multi-file Next.js app structures and debugging state loops.

• Cursor

  Ideal for fine-tuning the rich text editor component and building intricate drag-and-drop board interfaces.

Build guide

1. 01Scaffold Project and Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Turso database with Drizzle ORM, and set up better-auth for single-user local access.

   Create a new Next.js 16 project with TypeScript and Tailwind CSS v4. Initialize Drizzle ORM connected to a Turso SQLite database. Define the database schema for: users, manuscripts (id, title, genre, targetWords, createdAt), chapters (id, manuscriptId, title, content, orderIndex, status), elements (id, manuscriptId, name, type, description, aliases, relations), and notes (id, manuscriptId, chapterId, content, priority). Implement better-auth configured for email/password login to lock down the personal workspace.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build the Rich Text Editor and Chapter Management

   Implement a distraction-free rich text editor using TipTap, featuring multi-tabbed chapter navigation and autosave functionality.

   Build a multi-tabbed document editor component in Next.js using TipTap. Create a sidebar listing chapters for the active manuscript with drag-and-drop reordering capabilities (using @hello-pangea/dnd or dnd-kit). Implement debounced auto-saving via Server Actions that syncs editor content to the Turso database every 2 seconds, showing a subtle 'Saved' indicator in the UI. Ensure open chapters render in side-by-side or tabbed views with clean typography and distraction-free dark/light styling options.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build the Visual Planning Boards

   Create interactive drag-and-drop boards for managing manuscript structures, character elements, and research assets.

   Create a 'Boards' view in the Next.js dashboard with a tab switcher: Manuscript Board, Element Board, and Planning Board. The Manuscript Board must render chapters as visual cards in a kanban or grid layout supporting drag-and-drop repositioning that updates chapter orderIndex values. The Element Board must display characters, locations, and items as cards categorized by tags, allowing users to inspect relations, aliases, and appearance lists ('Appears In' chapters).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Implement Sidebar Trackers and Stash

   Add contextual sidebars for notes, to-do lists, stashes, and element cross-referencing.

   Build a collapsible sidebar for the document editor containing four tabs: To-Do List (add/complete tasks with priorities tied to chapters), Stash (save highlighted alternate text snippets into a personal collection for later insertion), Footnotes (manage auto-collected citations), and Elements Context (surface characters and settings mentioned or linked within the active chapter text). Ensure all sidebar items persist cleanly to the Turso database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Integrate AI Suite with Vercel AI SDK

   Wire up AI outlining, text rewriting, manuscript chat, and cover generation using the Anthropic API and Fal.ai.

   Integrate the Vercel AI SDK into the Next.js backend using the Anthropic API. Build server endpoints and UI action buttons for: (1) AI Outlines (generate structured chapter blueprints from a prompt), (2) AI Rewrite (stream tone and prose transformations for highlighted text selections), (3) AI Manuscript Chat (context-aware assistant answering questions about your story elements), and (4) AI Book Cover Generation using Fal.ai (Flux model) triggered by a text description input box.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Implement Export Engines and Polish UI

   Add export utilities for downloading manuscripts as clean plain text, Markdown, or PDF files, and polish the application layout.

   Implement an export utility modal that compiles all chapters of the active manuscript in correct orderIndex sequence and triggers client-side downloads for standard formats (.txt, .md, and formatted PDF using jspdf or html2pdf). Polish the overall UI with clean loading states, responsive sidebar toggles, and smooth transitions for a distraction-free writing environment.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for LivingWriter