CitroAI

AI-powered Next.js project generator and editor — runs entirely on your machine using Ollama.

Features

• citro new — Interactive wizard to create a new Next.js + Tailwind project
• citro generate "<prompt>" — Generate a full project from a single description
• citro edit "<prompt>" — Make targeted edits to an existing project — only modifies relevant files
• citro config — Configure your Ollama connection and model

Requirements

• Node.js 18+
• Ollama running locally
• The qwen2.5-coder:32b model (or any code model)

Installation

npm install -g citroai

Or run directly with npx:

npx citroai generate "a landing page for a SaaS product"

Setup

1. Install and start Ollama:

   ollama serve
   ollama pull qwen2.5-coder:32b

2. Verify the connection:

   citro config check

3. (Optional) Configure a different model or host:

   citro config setup

Usage

Create a new project interactively

citro new

Generate a project from a prompt

citro generate "a task management app with drag-and-drop" --name task-app
citro generate "an e-commerce store for handmade jewelry" --name jewelry-store
citro generate "a personal blog with dark mode" --name my-blog

Edit an existing project

cd my-app
citro edit "add a contact form to the homepage"
citro edit "make the navbar sticky and add a mobile hamburger menu"
citro edit "add a dark mode toggle to the header"
citro edit "refactor the hero section to use a video background"

Configuration

citro config show              # Show current settings
citro config setup             # Interactive setup wizard
citro config set model llama3.2  # Change model
citro config set ollamaHost http://localhost:11434
citro config check             # Test connection

Environment Variables

| Variable | Default | Description | |---|---|---| | OLLAMA_HOST | http://localhost:11434 | Ollama server URL | | CITRO_MODEL | qwen2.5-coder:32b | Model to use |

How It Works

Generation (citro generate)

1. Sends your prompt to the configured Ollama model
2. AI returns a structured list of files to create
3. Scaffolds a Next.js 14 App Router project with Tailwind
4. Writes all AI-generated files
5. Runs npm install
6. Saves project memory to .citroai/memory.json

Editing (citro edit)

1. Reads project memory to understand context
2. Scans and maps all project files
3. Selects only the files relevant to your request
4. Sends relevant file contents + edit prompt to AI
5. AI returns only the files that need to change
6. Shows a diff and applies the changes
7. Updates project memory with edit history

Project Memory

Each CitroAI project stores a .citroai/memory.json file containing:

• Original project description
• Full file list
• Complete edit history

This memory gives the AI context for future edits — it knows what was built and why.

Programmatic API

import { generateProject, editProject } from "citroai";

// Generate a new project
await generateProject({
  prompt: "a blog with MDX support",
  projectName: "my-blog",
  outputDir: "./projects",
});

// Edit an existing project
await editProject({
  prompt: "add a newsletter signup form",
  projectDir: "./projects/my-blog",
});

Project Structure

packages/citroai/
├── src/
│   ├── cli/               CLI commands (new, generate, edit, config)
│   ├── ai/                Ollama/OpenAI client and service layer
│   ├── prompts/           System prompts and prompt builders
│   ├── generator/         Project scaffolding and AI-driven file generation
│   ├── editor/            Smart file editor with diff-based patching
│   ├── scanner/           Project file scanner and relevance scoring
│   ├── validator/         TypeScript and build validation
│   ├── memory/            Project context and config persistence
│   └── utils/             Logger and filesystem utilities
├── templates/
│   └── nextjs/            Base Next.js 14 + Tailwind template
└── README.md

License

MIT