blueprintify

内容来源:README.md(说明文档) · 原始地址 · 查看安装指南

原始内容

Blueprintify

License: MIT TypeScript React Cloudflare Workers

AI-Powered Project Architecture Documentation

Generate production-ready blueprint.md and task.md files for your projects in seconds. Built with Cloudflare Workers + React.

✨ Features

  • 🧙 Wizard Interface - Step-by-step project configuration
  • 📚 Template Library - Quick-start with pre-configured templates
  • ⚡ Real-time Streaming - Watch your blueprint generate live via SSE
  • ✏️ Split-Pane Editor - CodeMirror editor with live markdown preview
  • 📦 One-Click Export - Download .docs/ folder as a ZIP
  • 💾 Auto-Save - Session persistence with localStorage
  • 🌙 Dark Mode - Premium dark UI with glassmorphism effects

🏗️ Architecture

blueprintify/
├── .opencode/           # AI agent system and skills
│   ├── agent/           # Agent definitions (technical-writer, etc.)
│   ├── skill/           # Reusable skills (docs-update, etc.)
│   ├── command/         # Custom commands
│   └── plugin/          # Plugins and hooks
├── packages/
│   └── shared/          # Zod schemas & TypeScript types
├── apps/
│   ├── api/             # Hono backend (Cloudflare Workers)
│   └── web/             # React frontend (Vite + Tailwind)
├── docs/                # Project documentation
│   ├── active-tasks.md
│   ├── ai-agent-usage-guide.md
│   ├── api-documentation.md
│   ├── audits/
│   │   ├── README.md     # Audit file index
│   │   └── archive/      # Historical audit runs (consolidated)
│   ├── blueprint.md
│   ├── bugs.md
│   ├── ci-configuration.md
│   ├── cloudflare-infrastructure.md
│   ├── code-style-guidelines.md
│   ├── completed-tasks-2026-Q1.md
│   ├── development-workflow.md
│   ├── environment-variables.md
│   ├── export-import-specs.md
│   ├── features.md
│   ├── findings.md
│   ├── flexy-plan.md
│   ├── knowledge-review.md
│   ├── localstorage-schema.md
│   ├── m2-technical-approach.md
│   ├── refinement-workflow.md
│   ├── release-process.md
│   ├── repo-rules.md
│   ├── roadmap-m3-proposal.md
│   ├── roadmap.md
│   ├── security/
│   ├── testing-procedures.md
│   ├── troubleshooting.md
│   └── user-guide.md
└── scripts/             # Build and deployment scripts

M2 Architecture Enhancements

The M2 release adds significant architectural improvements:

Frontend Enhancements

  • Split-Pane Editor: CodeMirror integration with live markdown preview
  • LocalStorage Persistence: 5MB storage with intelligent quota management
  • Refinement Engine: Section-based AI content refinement
  • Export/Import System: Multi-format data portability (JSON, ZIP, Markdown)
  • Security Layer: DOMPurify-based XSS protection and input validation

Backend Extensions

  • Refinement Endpoint: /refine for selective content enhancement
  • Export Endpoint: /export for multi-format file generation
  • Import Endpoint: /import with validation and conflict resolution
  • Storage API: Quota management and storage operations
  • Enhanced Security: Comprehensive input sanitization and validation

Data Flow

Wizard Generation → Split-Pane Editor → Refinement Workflow → Export/Import
       ↓                ↓                    ↓                ↓
  Session State → LocalStorage → Refinement API → File Generation
       ↓                ↓                    ↓                ↓
  Auto-Save     ←   Quota Management  ←   Edit Preservation

🚀 Quick Start

Prerequisites

  • Node.js 22+
  • npm 8+ (with workspaces support)
  • OpenAI API key (or compatible provider)

Installation

# Clone the repository
git clone https://github.com/cpa03/blueprintify.git
cd blueprintify

# Install dependencies
npm install

# Setup environment variables
# Copy the example file and fill in your OpenAI API key:
cp apps/api/.dev.vars.example apps/api/.dev.vars
# Then edit apps/api/.dev.vars and replace 'your_openai_api_key_here' with your actual key

Development

# Start both frontend and API
npm run dev:all

# Or start separately:
npm run dev        # Frontend only (port 3000)
npm run dev:api    # API only (port 8787)

Quality Assurance

# Run all quality checks (typecheck + lint + test)
npm run check

# Or run individually:
npm run typecheck
npm run lint
npm run test:all

Build

# Build frontend
npm run build

# Deploy API to Cloudflare
npm run deploy --workspace=apps/api

🤖 AI Agent System

This project uses the OpenCode AI agent system with specialized roles for different development tasks.

Available Agent Roles

  • AI Agent Engineer - AI agent infrastructure maintenance and improvement
  • API Specialist - API design, implementation, and optimization
  • Backend Engineer - API development and database architecture
  • CMZ - Code modularization and refactoring specialist
  • Code Reviewer - Code quality assessment and review
  • Coder - General coding and implementation tasks
  • Database Architect - Database design and schema architecture
  • Debugger - Debugging and troubleshooting specialist
  • DevOps Engineer - CI/CD pipelines and deployment automation
  • DX Engineer - Developer experience and tooling improvements
  • Frontend Engineer - React components and UI development
  • Integration Engineer - System integration and API connectivity
  • Integrator - Cross-system integration specialist
  • Janitor - Code cleanup and repository maintenance
  • Modularity Engineer - Code structure and architecture improvement
  • Performance Engineer - Performance optimization and analysis
  • Planner - Project planning and task organization
  • Product Strategist - Product vision and strategy planning
  • Quality Assurance - Testing and code review processes
  • Reliability Engineer - System reliability and stability
  • Researcher - Technical research and analysis
  • Security Engineer - Security audits and vulnerability assessments
  • Software Architect - System design and architecture decisions
  • Synthesizer - Code synthesis and pattern recognition
  • System Improver - System-wide improvements and optimization
  • Technical Writer - Documentation maintenance and user guides
  • UI/UX Engineer - User interface and experience design
  • User Story Engineer - Small, incremental improvements from issues

Available Skills

The system includes 25+ reusable skills for common tasks:

Core Development Skills:

  • api-endpoint-create - API endpoint development
  • react-component-create - React component creation
  • database-migration-create - Database migration scripts
  • typescript-refactor - TypeScript code refactoring
  • pattern-extraction - Extract and document code patterns

Quality & Testing Skills:

  • test-suite-create - Comprehensive test creation
  • security-audit - Security vulnerability analysis
  • dependency-audit - Package dependency analysis
  • code-review-checklist - Systematic code review process
  • resilience-check - System resilience validation

Documentation & Planning Skills:

  • docs-update - Standard documentation updates
  • planning-with-files - File-based planning workflow
  • git-commit-standard - Standardized commit message formatting
  • ci-pipeline-update - CI/CD pipeline modifications

Advanced Skills:

  • Systematic debugging strategies
  • Test-driven development workflows
  • Git worktree management
  • Context engineering and memory systems
  • Brainstorming and idea generation
  • Agentic QE skill building

See .opencode/skill/ directory for complete skill definitions.

🔧 Configuration

API Environment Variables

Variable Required Description
OPENAI_API_KEY Yes Your OpenAI API key
OPENAI_BASE_URL No Custom API base URL
OPENAI_MODEL No Model to use (default: gpt-4o-mini)

📡 API Endpoints

Method Endpoint Description
GET / Health check
GET /warmup Pre-warm circuit breaker on worker startup
POST /generate Generate blueprint (SSE stream)
POST /tasks Generate tasks from blueprint (SSE stream)
POST /refine Refine content section (SSE stream)
POST /export Export project as ZIP/JSON/Markdown
POST /import Import project with validation
GET /storage/quota Check storage usage
POST /storage/report Report client storage usage for quota tracking
DELETE /storage/clear Clear stored data
POST /share Create shareable blueprint link
GET /share/:id Retrieve shared blueprint
DELETE /share/:id Delete shared blueprint

🛠️ Tech Stack

Backend

  • Hono - Ultra-lightweight web framework
  • Cloudflare Workers - Edge runtime
  • Zod - Schema validation
  • OpenAI SDK - AI completions
  • Vitest - Testing framework

Frontend

  • React 19 - UI library
  • Vite - Build tool
  • Tailwind CSS - Styling
  • Zustand - State management
  • CodeMirror - Code editor (via @uiw/react-codemirror)
  • CSS Animations - Animations (spring, transition)
  • Radix UI - Accessible components
  • React Markdown - Markdown rendering
  • JSZip - File compression for exports

Development Tools

  • TypeScript - Type safety
  • ESLint - Code linting
  • Concurrently - Parallel script execution
  • Wrangler - Cloudflare Workers deployment

📚 Documentation

🚀 Getting Started

🛠️ Development Resources

🤖 AI Agent System

📋 Project Documentation

📚 M2 Documentation

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for:

  • Development setup and workflow
  • Code standards and conventions
  • Pull request process
  • Testing requirements

📝 License

MIT © 2026