How to vibe codeWordHero

Prerequisites

• Node.jsfree

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

• GitHubfree

  Version control and deployment pipeline integration

• 

  OpenAI API Keypay-as-you-go

  Underlying LLM provider for text generation templates and long-form editor

AI coding tools

• Cursor

  Best-in-class AI code editor for rapidly scaffolding React components, forms, and API routes with diff reviews

• Claude Code

  Terminal agent capable of generating the full multi-file directory structure and database schemas in single autonomous runs

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js app, configure Tailwind CSS and shadcn/ui, set up Turso SQLite connection, and define database schemas for templates, generated documents, and user history.

   Scavenge a new Next.js project with App Router, Tailwind CSS, and TypeScript. Install better-auth, drizzle-orm, and @libsql/client for Turso database connectivity. Configure the Drizzle schema with tables for `users`, `templates` (storing template slug, category, title, description, and dynamic input field JSON configurations), `documents` (storing user documents, generated content, and template reference ID), and `favorites`. Ensure environment variables are correctly mapped for Turso and SQLite.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Layout Shell

   Implement local authentication via better-auth and build the core dashboard layout with sidebar navigation mimicking WordHero's template categories.

   Implement better-auth inside the Next.js app supporting email/password sign-in and session cookies. Create a responsive dashboard layout component with a collapsible sidebar featuring navigation links for 'Templates', 'Long-form Editor', 'AI Art', and 'History/Saved Documents'. Use shadcn/ui components for clean typography, dark/light mode toggles, and user profile badges.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Dynamic Template Form Engine

   Build a configuration-driven form engine that dynamically renders input fields based on JSON definitions for over 70 writing templates.

   Build a dynamic template execution page at `/app/templates/[slug]`. Create a JSON configuration structure containing definitions for at least 10 core WordHero templates (e.g., Blog Post Intro, Social Media Caption, Product Description, Email Subject Lines). The React component must dynamically render input fields (text inputs, textareas, dropdowns, sliders for creativity/tone) based on the selected template's configuration schema.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04LLM Integration & Streaming UI

   Integrate the Vercel AI SDK to stream text completions from OpenAI based on customized template prompts and user input parameters.

   Implement a Next.js API route using the Vercel AI SDK (`streamText`) that accepts template IDs and user form inputs. Construct a robust prompt generation helper that injects user variables into stored system prompts. On the frontend template execution page, connect the form submission to a streaming output pane with markdown rendering, a 'Copy to Clipboard' button, and a 'Save Document' action that writes the generated output back to Turso.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Long-Form Editor & Document Management

   Create a dedicated long-form editor workspace allowing users to compile, edit, and organize generated snippets into comprehensive articles.

   Build a rich-text or markdown-based long-form editor at `/app/editor` using a split-pane layout. The left side lists saved documents and snippets generated from templates; the right side is an editable workspace where users can insert snippets, trigger inline AI continuation commands, and export content as plain text or markdown. Wire up CRUD server actions to save, update, and delete documents.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Image Generation (WordHero Art)

   Add an image generation module integrating fal.ai to replicate WordHero Art capabilities.

   Build an AI image generation module at `/app/art` utilizing the fal.ai API (e.g., Flux Schnell). Create a simple form for prompt entry, aspect ratio selection, and style toggles. Display a grid of generated images with download links, storing image metadata and URLs in a new `images` table linked to the user account.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for WordHero