🌸 Flower

AI-Powered Workflow Builder & BRD Generator
Transform ideas into executable plans with Cerebras AI and seamless Cline integration

Key Features • Tech Stack • How It Works • Getting Started • API Docs • Contributing

✨ Flower Demo Video ✨

---

Flower is a revolutionary AI-powered workflow builder that transforms abstract project ideas into concrete, executable plans and comprehensive Business Requirements Documents (BRDs). Built specifically for the Cerebras × Cline Hackathon, Flower bridges the gap between ideation and implementation by leveraging cutting-edge AI orchestration and seamless local development integration.

---

🌟 The Problem We're Solving

Traditional project planning is time-consuming, inconsistent, and prone to human error:

• Manual Documentation: Hours spent writing BRDs and project plans from scratch
• Inconsistent Quality: Different team members create varying levels of detail
• Disconnect from Implementation: Documentation that doesn't translate to actionable development tasks
• Context Switching: Moving between planning tools and development environments

💡 Flower's AI-Powered Solution

Flower revolutionizes project planning with intelligent automation:

• ⚡ Instant BRD Generation: Transform ideas into comprehensive Business Requirements Documents in minutes
• 🧠 AI-Driven Analysis: Multi-model orchestration using Cerebras and OpenRouter for optimal results
• 🎯 Visual Workflow Design: Intuitive drag-and-drop interface with ReactFlow
• 🔄 Seamless Integration: Direct export to local development with Cerebras × Cline compatibility
• 📊 Real-time Collaboration: Live editing and execution monitoring
• 🎨 Template Marketplace: Pre-built workflows and community sharing

---

🔑 Key Features

🧠 AI-Powered Project Planning

Transform abstract ideas into detailed project structures using advanced language models:

• Multi-Model Orchestration: Automatic selection between GPT-4, Claude, Llama, and specialized models
• Context-Aware Generation: AI understands project requirements and generates relevant workflows
• Cost Optimization: Intelligent model routing to minimize AI usage costs
• Quality Scoring: Built-in feedback system for continuous improvement

🎨 Visual Workflow Builder

Design complex workflows with an intuitive visual interface:

• Drag & Drop Interface: ReactFlow-powered editor with custom node types
• Smart Node Types: Start, End, Task, Decision, AI, Loop, Parallel, Integration nodes
• Real-time Validation: Instant feedback on workflow structure and logic
• Version Control: Complete workflow versioning with change history

📋 Professional BRD Generation

Generate comprehensive Business Requirements Documents:

• Structured Output: Professional formatting with stakeholder requirements
• Technical Specifications: Detailed implementation guidelines
• Task Breakdown: Actionable todo lists with priorities and dependencies
• Export Formats: Multiple output formats for different stakeholders

🔄 Cerebras × Cline Integration

Seamless bridge to local development environments:

• Direct Export: One-click export to your local Cline-enabled editor
• Project Structure: Automatic generation of directory structures and boilerplate
• Development Ready: Exported projects are immediately executable
• Context Preservation: Maintains project context throughout the development lifecycle

🤝 Real-time Collaboration

Work together seamlessly across teams:

• Live Editing: Multiple users can edit workflows simultaneously
• Role-based Access: Granular permissions (Owner, Editor, Viewer)
• Change Notifications: Real-time updates via Server-Sent Events
• Comment System: Contextual discussions within workflows

🏪 Community & Templates

Learn from and share with the community:

• Template Marketplace: Browse and use pre-built workflow templates
• Showcase Gallery: Publish successful workflows for community learning
• Like & Fork: Discover trending workflows and build upon them
• Usage Analytics: Track template performance and adoption

---

🛠 Tech Stack

Category	Technology
Frontend
Backend
Database
AI & ML
Workflow
Development
Real-time

---

🏗 How It Works: Architecture Overview

Flower is built as a modern monorepo with a clear separation of concerns:

graph TB
    subgraph "Frontend (Next.js)"
        A[Landing Page] --> B[Workflow Editor]
        B --> C[AI Integration]
        C --> D[Project Management]
        D --> E[Collaboration Tools]
    end
    
    subgraph "Backend API (Fastify + tRPC)"
        F[Authentication] --> G[Project Router]
        G --> H[Workflow Engine]
        H --> I[AI Orchestrator]
        I --> J[Real-time Events]
    end
    
    subgraph "AI Services"
        K[OpenRouter] --> L[Cerebras AI]
        K --> M[GPT-4 Turbo]
        K --> N[Claude Sonnet]
        K --> O[Llama Models]
    end
    
    subgraph "Data Layer"
        P[(PostgreSQL)] --> Q[Prisma ORM]
        Q --> R[Type Generation]
    end
    
    subgraph "External Integrations"
        S[Cline Export]
        T[GitHub Integration]
        U[Project Templates]
    end
    
    B --> G
    I --> K
    H --> P
    D --> S
    E --> J

Loading

Core Workflow Process

1. Idea Input: User describes their project idea in natural language
2. AI Analysis: Multi-model orchestration analyzes requirements and generates structure
3. Workflow Creation: Visual workflow builder creates executable process flows
4. BRD Generation: Comprehensive documentation is automatically generated
5. Local Export: Project exports directly to Cline-enabled development environment
6. Execution & Monitoring: Real-time tracking of workflow execution and results

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or later)
• pnpm (recommended) or npm/yarn
• PostgreSQL (local or cloud instance)
• OpenRouter API Key (for AI features)

1. Clone & Install

# Clone the repository
git clone https://github.com/wiredium/flower.git
cd flower

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env

2. Environment Configuration

Edit .env with your credentials:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/flower"

# API Server
PORT=3001
HOST=0.0.0.0
LOG_LEVEL=info
CORS_ORIGIN=http://localhost:3000

# Authentication
JWT_SECRET=your-super-secret-jwt-key
JWT_REFRESH_SECRET=your-refresh-secret-key

# OpenRouter AI (Required)
OPENROUTER_API_KEY=sk-or-v1-your-api-key-here
DEFAULT_AI_MODEL=anthropic/claude-3-sonnet
FALLBACK_MODELS=gpt-4-turbo,llama-3-70b
MAX_TOKENS_PER_REQUEST=4000
AI_BUDGET_PER_USER=10.00

# Optional: External Integrations
GITHUB_APP_ID=your-github-app-id
GITHUB_PRIVATE_KEY=your-github-private-key

3. Database Setup

# Generate Prisma client
pnpm --filter @repo/database generate

# Push database schema
pnpm --filter @repo/database db:push

# Optional: Seed with templates
pnpm --filter @repo/database db:seed

4. Start Development Servers

# Start all services in development mode
pnpm dev

# Or start individually
pnpm --filter api dev          # Backend API (port 3001)
pnpm --filter web dev          # Frontend (port 3000)

5. Access the Application

• Frontend: http://localhost:3000
• API: http://localhost:3001
• tRPC Endpoint: http://localhost:3001/trpc

---

📊 Project Structure

flower/
├── apps/
│   ├── api/                    # Fastify + tRPC backend
│   │   ├── src/
│   │   │   ├── routers/       # tRPC route handlers
│   │   │   ├── services/      # Business logic services
│   │   │   ├── lib/           # Configuration & utilities
│   │   │   ├── middleware/    # Authentication & validation
│   │   │   └── routes/        # SSE and webhook routes
│   │   └── package.json
│   └── web/                   # Next.js frontend application
│       ├── app/               # Next.js 13+ app directory
│       ├── components/        # React components
│       ├── hooks/             # Custom React hooks
│       ├── stores/            # Zustand state management
│       └── types/             # Frontend-specific types
├── packages/
│   ├── database/              # Prisma schema & migrations
│   │   ├── prisma/
│   │   │   ├── schema.prisma  # Database schema
│   │   │   └── seed.ts        # Database seeding
│   │   └── src/               # Database client & utilities
│   ├── types/                 # Shared TypeScript types
│   ├── ui/                    # Shared React component library
│   ├── utils/                 # Shared utility functions
│   └── tsconfig/              # Shared TypeScript configurations
├── FLOWER_IMPLEMENTATION_PLAN.md
├── BACKEND_COMPLETION_REPORT.md
├── FRONTEND_API_GUIDE.md
└── README.md

---

📚 API Documentation

Flower provides a comprehensive, type-safe API built with tRPC. Our API supports:

🔑 Core Endpoints

• Authentication: Register, login, refresh tokens, password management
• Projects: CRUD operations, workflow management, collaboration
• Workflows: Execution engine, validation, version control
• AI Generation: Multi-model content generation, cost estimation
• Templates: Marketplace, usage tracking, community features
• Real-time: Server-Sent Events for live updates

📖 Detailed Documentation

For complete API documentation with examples and type definitions, see our Frontend API Guide.

🔗 Quick API Reference

// Type-safe API calls with tRPC
import { trpc } from '@/lib/trpc'

// Create a new project
const project = await trpc.project.create.mutate({
  name: "My AI Workflow",
  description: "An intelligent automation workflow",
  visibility: "PRIVATE"
})

// Generate AI content
const result = await trpc.ai.generate.mutate({
  taskType: "code-generation",
  prompt: "Create a React component for user authentication",
  temperature: 0.7
})

// Execute workflow
const execution = await trpc.workflow.execute.mutate({
  projectId: project.id,
  variables: { input: "processing data" }
})

---

🎯 Development Workflow

🚀 Quick Commands

# Development
pnpm dev                    # Start all services
pnpm dev --filter web       # Frontend only
pnpm dev --filter api       # Backend only

# Building
pnpm build                  # Build all packages
pnpm build --filter web     # Build frontend
pnpm build --filter api     # Build backend

# Quality Assurance
pnpm lint                   # Lint all packages
pnpm lint:fix               # Fix linting issues
pnpm format                 # Format code with Biome
pnpm check-types            # TypeScript type checking

# Database
pnpm --filter @repo/database generate    # Generate Prisma client
pnpm --filter @repo/database db:push     # Push schema changes
pnpm --filter @repo/database db:seed     # Seed database

🧪 Testing

# Run tests (when implemented)
pnpm test                   # All tests
pnpm test:unit              # Unit tests
pnpm test:integration       # Integration tests
pnpm test:e2e               # End-to-end tests

---

🌍 Deployment

📦 Production Build

# Build for production
pnpm build

# Start production servers
pnpm start

🐳 Docker Deployment

# Build Docker images
docker-compose build

# Start services
docker-compose up -d

☁️ Cloud Deployment

Flower is designed to be cloud-native and can be deployed on:

• Vercel (Frontend) + Railway/Render (Backend)
• Docker containers on any cloud provider
• Kubernetes clusters for enterprise deployment

---

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

🐛 Bug Reports

Found a bug? Please open an issue with:

• Clear description of the problem
• Steps to reproduce
• Expected vs actual behavior
• Environment details (OS, Node version, etc.)

✨ Feature Requests

Have an idea? Open an issue with:

• Detailed description of the feature
• Use case and benefits
• Potential implementation approach

🔧 Development Contributions

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes with proper tests
4. Follow code style: Run pnpm lint:fix and pnpm format
5. Commit changes: Use conventional commit messages
6. Push to branch: git push origin feature/amazing-feature
7. Open a Pull Request with a clear description

📝 Development Guidelines

• Follow TypeScript best practices
• Maintain test coverage above 80%
• Use meaningful commit messages (Conventional Commits)
• Update documentation for new features
• Ensure compatibility with both development and production environments

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ for the Cerebras × Cline Hackathon