Thanks to visit codestin.com
Credit goes to github.com

Skip to content
forked from wiredium/flower

Cerebras x Cline: Hackathon project about AI-powered workflow builder that transforms ideas into executable plans and BRDs. Built for Cerebras × Cline Hackathon with intelligent automation and seamless development integration.

Notifications You must be signed in to change notification settings

bhupesh-sf/flower

 
 

Repository files navigation

flower logo

🌸 Flower

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

Key FeaturesTech StackHow It WorksGetting StartedAPI DocsContributing

License Hackathon TypeScript AI Powered

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 Next.js React TypeScript Tailwind CSS
Backend Fastify tRPC Node.js
Database PostgreSQL Prisma
AI & ML OpenRouter Cerebras OpenAI
Workflow ReactFlow Zustand
Development Turborepo pnpm Biome
Real-time Server-Sent Events

🏗 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


📊 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

About

Cerebras x Cline: Hackathon project about AI-powered workflow builder that transforms ideas into executable plans and BRDs. Built for Cerebras × Cline Hackathon with intelligent automation and seamless development integration.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.1%
  • Other 1.9%