bookwiz.io / README.md
README.md
Raw

Bookwiz.io - Prototype

A clean, modern writing interface with a 3-column layout inspired by code editors. This prototype demonstrates the core UI concept for Bookwiz.io with file management, text editing, and AI chat integration.

Key Features

  1. File System Management: Create, edit, and organize chapters, character files, and outlines
  2. Rich Text Editor: Professional text editing interface with live word count
  3. File Navigation: Hierarchical folder structure with expand/collapse functionality
  4. Context-Aware AI: Upload and chat about your writing with real AI models
  5. Model Selection: Switch between Claude 3.7 Sonnet, Gemini 2.5 Pro, and Gemini 2.5 Flash
  6. Streaming Responses: Watch AI responses appear in real-time as they're generated
  7. Smart File Context: AI automatically finds and references relevant files in responses
  8. Tool-Powered Chat: AI can read, edit, and manage your files directly through conversation

Features in Detail

Smart AI Writing Assistant

  1. File Navigation: Click folders to expand/collapse, click files to open them
  2. Text Editing: Select any file to edit its content in the main editor
  3. Word Count: Live word count displayed at the bottom of the editor
  4. AI Chat: Chat with real AI models about writing, editing, and creative feedback
  5. Model Selection: Switch between Claude 3.7 Sonnet, Gemini 2.5 Pro, and Gemini 2.5 Flash
  6. Streaming Responses: Watch AI responses appear in real-time as they're generated

AI Models Supported

  • Claude 3.7 Sonnet: Anthropic's advanced model for sophisticated writing assistance and complex tasks
  • Gemini 2.5 Pro: Google's advanced model for complex creative and analytical tasks
  • Gemini 2.5 Flash: Google's fast model for rapid writing assistance and suggestions

Model Configuration: AI models are centrally managed in lib/config/models.ts. See MODELS.md for details on adding, removing, or modifying models.

Getting Started

Prerequisites

  • Node.js 18+
  • npm, yarn, or pnpm
  • OpenRouter API key (for AI chat functionality)

OpenRouter API Setup

  1. Get your API key from OpenRouter
  2. Create a .env.local file in the project root:
OPENROUTER_API_KEY=your_api_key_here

Installation & Running

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build
npm start

Open http://localhost:3000 to view the prototype.

Project Structure

Bookwiz-prototype/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts     # OpenRouter API integration
│   ├── globals.css          # Global styles with Tailwind CSS
│   ├── layout.tsx           # Root layout component
│   └── page.tsx             # Main application page
├── components/
│   ├── FileExplorer.tsx     # File tree navigation
│   ├── Editor.tsx           # Text editing interface
│   └── ChatPanel.tsx        # AI chat interface with streaming
├── lib/
│   └── mockData.ts          # Sample project data
└── ...config files

Usage

  1. File Navigation: Click folders to expand/collapse, click files to open them
  2. Text Editing: Select any file to edit its content in the main editor
  3. Word Count: Live word count displayed at the bottom of the editor
  4. AI Chat: Chat with real AI models about writing, editing, and creative feedback
  5. Model Selection: Switch between Claude 3.7 Sonnet, Gemini 2.5 Pro, and Gemini 2.5 Flash
  6. Streaming Responses: Watch AI responses appear in real-time as they're generated

Mock Data

The prototype includes sample content for a novel project:

  • Outline: Story structure and character descriptions
  • Chapters: Sample chapters with rich narrative content
  • Characters: Character profiles and development notes

Tech Stack

  • Next.js 14 with App Router
  • React 18 with TypeScript
  • Tailwind CSS for styling
  • OpenRouter API for AI model integration
  • Server-Sent Events for streaming responses

Production Notes

The chat functionality is now production-ready with:

  • Real AI model integration through OpenRouter
  • Streaming response handling
  • Error handling and loading states
  • Support for multiple AI models
  • Secure API key management

Word Count System

The application includes an advanced word count system with:

  • Automatic counting: Word counts update immediately when files are modified
  • Background processing: Reliable queue-based recalculation for all books
  • Multiple file types: Supports txt, md, doc, docx, html, json, and many more text formats
  • Debug tools: Built-in debugging to diagnose word count issues
  • Manual recalculation: Admin tools to fix incorrect counts

Setting Up Background Processing (Optional)

For automatic word count maintenance, set up a cron job to process the queue:

Using Vercel Cron:

  1. Add to vercel.json:
{
  "cron": [
    {
      "path": "/api/cron/word-count-processor",
      "schedule": "*/5 * * * *"
    }
  ]
}

Using GitHub Actions: Create .github/workflows/word-count-cron.yml:

name: Process Word Count Queue
on:
  schedule:
    - cron: '*/5 * * * *'  # Every 5 minutes
jobs:
  process-queue:
    runs-on: ubuntu-latest
    steps:
      - name: Process Queue
        run: |
          curl -X POST "${{ secrets.APP_URL }}/api/cron/word-count-processor" \
            -H "Authorization: Bearer ${{ secrets.CRON_SECRET }}"

Environment Variables:

CRON_SECRET=your_secure_cron_secret_here
INTERNAL_API_TOKEN=your_internal_api_token_here

Next Steps

For an enhanced production version, consider adding:

  • Real-time file synchronization
  • User authentication and project management
  • Cloud storage and backup
  • Collaborative editing features
  • Advanced text formatting and markdown support
  • Context integration (using book content in AI responses)

Built as a prototype to validate the Bookwiz.io writing interface concept with real AI integration.

Powered by GitFront