🌸 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 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

Core Workflow Process

Idea Input: User describes their project idea in natural language
AI Analysis: Multi-model orchestration analyzes requirements and generates structure
Workflow Creation: Visual workflow builder creates executable process flows
BRD Generation: Comprehensive documentation is automatically generated
Local Export: Project exports directly to Cline-enabled development environment
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

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes with proper tests
Follow code style: Run pnpm lint:fix and pnpm format
Commit changes: Use conventional commit messages
Push to branch: git push origin feature/amazing-feature
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

FilesExpand file tree

README.md

Latest commit

History