ContentCraft

ContentCraft is a comprehensive content creation suite that combines AI-powered research and script generation with visual planning tools. The platform provides three integrated applications to streamline your entire content creation workflow—from initial planning through final production.

Three Integrated Applications

1. ContentCraft - AI-Powered Research & Script Generation

A multi-phase workflow that leverages multiple AI providers (Perplexity, Claude, OpenAI) to transform your content ideas into production-ready scripts:

1. Research: Gathering and synthesizing information from multiple sources
2. Strategy: Developing content approach and recommendations
3. Outline: Generating structured content outlines with templates for different content types
4. Script: Drafting detailed scripts with production cues and timing
5. Graphics: Planning visual assets including lower thirds, diagrams, and thumbnails

2. Content Planner - Visual Content Calendar

A drag-and-drop calendar interface for organizing your content pipeline:

• Calendar View: Monthly calendar with scheduled content items
• Unscheduled Panel: Staging area for content ideas not yet scheduled
• Drag-to-Schedule: Intuitive drag-and-drop to schedule or unschedule items
• Content Types: Support for multiple formats (tutorials, comparatives, blueprints, etc.)
• Rich Metadata: Track URLs, video links, outlines, attachments, and publication status
• Color Coding: Visual distinction between different content types
• Quick Edit: Click any item to edit all details in a comprehensive dialog

3. AI Script Editor - Video Analysis & Transcription

Upload existing videos for AI-powered analysis and improvement:

• Automatic Transcription: Audio-to-text conversion using Google Gemini
• Key Frame Extraction: Capture important visual moments from your video
• Visual Analysis: AI analysis of visual content alongside transcription
• Script Revision: AI-generated recommendations for improving your script
• Side-by-Side Review: Compare original content with AI suggestions

System Architecture

Frontend

• Framework: React with TypeScript, built with Vite
• UI Library: shadcn/ui with Radix UI primitives
• Styling: Tailwind CSS with custom design system
• State Management: TanStack Query for server state
• Routing: Wouter for client-side navigation
• Form Handling: React Hook Form with Zod validation
• Drag & Drop: @dnd-kit/core for planner interactions

Backend

• Runtime: Node.js with Express.js
• Language: TypeScript with ES modules
• Database: PostgreSQL (Neon serverless)
• ORM: Drizzle ORM with type-safe queries
• API: RESTful endpoints with JSON responses
• Authentication: Supabase Auth integration

Key Features

ContentCraft

• Multi-provider AI integration (Anthropic, OpenAI, Perplexity)
• Parallel processing for faster research
• Artifact versioning with full history
• Real-time status updates during generation
• Interactive outline editing with section management
• Production-ready scripts with timing and cues

Content Planner

• Drag-and-drop scheduling interface
• Monthly calendar navigation
• Unscheduled items panel for idea staging
• Content type templates (5 specialized formats)
• Comprehensive metadata tracking
• Visual color-coding by content type
• Full CRUD operations on all items

AI Script Editor

• Video file upload support
• Google Gemini-powered transcription
• Key frame extraction and analysis
• Side-by-side script comparison
• AI-generated improvement suggestions
• Visual and audio content analysis

Tech Stack

AI Services:

• Anthropic Claude (Sonnet 4 - claude-sonnet-4-20250514)
• OpenRouter (Backup provider with Claude 3.5 Sonnet)
• OpenAI (GPT-4o)
• Perplexity (online search)
• Google Gemini (Flash Image Preview)
• Replicate (for image generation)

Database & Storage:

• Neon PostgreSQL
• Drizzle ORM
• Supabase (authentication)

UI & Development:

• React + TypeScript
• Radix UI + shadcn/ui
• Tailwind CSS
• Vite build tool
• TanStack Query
• @dnd-kit (drag and drop)

Utilities:

• Zod (validation)
• date-fns (date handling)
• Wouter (routing)

Getting Started

Prerequisites

• Node.js (v20 or higher)
• npm (or your preferred package manager)
• PostgreSQL database (or Neon account)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/thoughtspark.git
   cd thoughtspark

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env file in the root of the project and add the following variables:

   DATABASE_URL="your_postgresql_connection_string"
   ANTHROPIC_API_KEY="your_anthropic_api_key"
   OPENROUTER_API_KEY="your_openrouter_api_key"  # Optional: fallback for Anthropic
   OPENAI_API_KEY="your_openai_api_key"
   PERPLEXITY_API_KEY="your_perplexity_api_key"
   REPLICATE_API_TOKEN="your_replicate_api_token"
   GOOGLE_API_KEY="your_google_api_key"
   
   # Supabase Auth (optional)
   VITE_SUPABASE_URL="your_supabase_url"
   VITE_SUPABASE_ANON_KEY="your_supabase_anon_key"

4. Run database migrations:

   npm run db:push

5. Start the development server:

   npm run dev

The application will be available at http://localhost:5000.

Building for Production

To create a production build, run:

npm run build

This will create a dist directory with the compiled server and client files.

To start the production server, run:

npm start

Usage

ContentCraft Workflow

1. Create a New Project:

   • Click the "New Project" button
   • Fill out the form with topic, target audience, length, tone, and purpose
   • Click "Create Project" to start the research phase

2. Navigate the Workflow:

   • Use the workflow tabs (Research, Strategy, Outline, Script, Graphics) to move through phases
   • Each phase displays generated artifacts and allows progression to the next step
   • Edit outlines with full section management (add, remove, reorder)
   • Review and refine AI-generated content at each stage

Content Planner

1. Access the Planner:

   • Click the "Planner" tab in the main navigation
   • View your monthly calendar with scheduled items

2. Create Content Items:

   • Click "New Project" and fill in basic details (title, description, content type)
   • Items appear in the unscheduled panel on the left

3. Schedule Content:

   • Drag items from the unscheduled panel to any calendar date
   • Use the drag handle (grip icon) to avoid accidental drags
   • Click any calendar date to view scheduled items for that day

4. Edit Content Items:

   • Click any content card to open the edit dialog
   • Update title, description, content type, dates, URLs, attachments, and outline
   • Toggle private status for personal items
   • Delete items when no longer needed

5. Unschedule Content:

   • Drag scheduled items back to the unscheduled panel to remove dates
   • Search unscheduled items using the search bar

AI Script Editor

1. Upload Video:

   • Navigate to the "AI Script Editor" tab
   • Upload a video file or provide a video URL

2. Review Analysis:

   • System automatically transcribes audio (via Google Gemini)
   • Extracts key frames from video
   • Generates comprehensive analysis

3. Get Improvements:

   • View original transcript alongside AI suggestions
   • Review visual content analysis
   • Apply AI recommendations to improve your script

Database Schema

The database schema is defined in shared/schema.ts and includes:

• projects: Core project information including topic, audience, tone, content type, scheduling dates, URLs, and metadata
• runs: Execution records of the content generation workflow for each project
• artifacts: Generated outputs from each workflow phase (research briefs, outlines, scripts, graphics)
• sources: URLs and metadata of research sources with citations
• generated_images: Information about AI-generated visual assets

Content Types

The planner supports five specialized content formats, each with custom outline templates:

1. Feature-Centric Tutorial: Deep-dive guides for specific features or capabilities
2. Comparative: Multi-tool or multi-vendor comparison analyses
3. Conceptual Redefinition: Thought leadership and vision-setting content
4. Blueprint Series: Multi-episode project-based learning
5. Debug/Forensics: Live troubleshooting and problem-solving content

Project Structure

thoughtspark/
├── client/                 # Frontend React application
│   └── src/
│       ├── components/     # Reusable UI components
│       ├── pages/         # Page components (Home, ContentPlanner, ScriptStudio)
│       └── lib/           # Utilities and query client
├── server/                # Backend Express application
│   ├── routes.ts         # API route definitions
│   ├── storage.ts        # Database storage interface
│   └── ai-providers/     # AI service integrations
├── shared/               # Shared types and schemas
│   └── schema.ts         # Database schema and types
└── db/                   # Database migrations

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.