Hackathon Showcase

CBrain

cbrain delivers an AI-powered, shareable startup blueprint—strategy, competitor analysis, and MVP—ready to build in 5 minutes.

3 members

Project Description

Cbrain is an AI-powered startup co-pilot that solves one of the biggest problems early-stage founders face: turning an idea into a clear, validated, build-ready strategy. Today, solopreneurs and indie hackers waste weeks researching competitors, defining product strategy, structuring user flows, and preparing MVP specifications across scattered tools like Notion, Miro, Excel, GPT chats, and pitch-deck builders. This leads to fragmentation, confusion, and stalled execution.

cbrain provides a complete, visual, AI-generated blueprint in under 10 seconds, giving founders the clarity and direction they need to move from ideation to execution with confidence. Our target users include solo founders, indie hackers, makers, small product teams, and no-code builders who need fast strategy generation before building in tools like Lovable, Figma, or Make.

Core features
AI-generated strategic blueprint: business model, product strategy, user journeys, system design, KPIs.
Interactive visual tree: breaks the project into modular components while maintaining the full system view.
Automated competitor & market analysis using real-time vector search (Qdrant).
MVP-ready Markdown export directly to Lovable.
Iterative refinement: click any node to regenerate or drill down without losing context.

Demo flow
User describes their idea in natural language (e.g., “A digital portfolio platform for all my artistic works”).
Backend agents parse and classify the idea into strategy, feature set, market category, expected personas, and technical requirements.
Real-time competitor and trend scraping using vector search retrieves relevant market insights.
The system builds a unified visual blueprint (strategic tree):
Users interact with the blueprint, clicking nodes to refine or expand content.
Export to .md MVP for Lovable or other builders.

How We Meet the Judging Criteria

Execution & Functionality
Fully functional flow: idea → AI analysis → generated blueprint → interactive refinement → MVP export.
Modular generation ensures stable execution even when individual sections are regenerated.
Clear, cohesive UI showing the full system and all dependencies.

AI & Agents Usage
Multi-agent architecture:
Strategy Agent: business logic & vision
Product Agent: user flows & features
Market Agent: competitor search + vector embeddings
Tech Agent: stack & architecture recommendations
Agents coordinate via structured schemas and shared context buffers.
Autonomous retries and self-correction when outputs fail validation.

Scalability (One-Person Model)
End-to-end automated workflows require minimal human supervision, enabling a single founder to scale product output.
Vector search + templated pipelines make new categories easy to onboard.
Cloud deployment with horizontally scalable LLM orchestration handles thousands of idea generations.

Problem Clarity & Market Impact
Addresses the global bottleneck of “ideas that never turn into products.”
Reduces ideation and strategy time from weeks to seconds.
Fits a massive and growing market: solo builders, no-code developers, creators, micro-SaaS founders.

Demo & product narrative
Demo tells a clear story: input → AI analysis → visual blueprint → market insights → MVP handoff.
Judges see real functionality, not mockups: every generated node is actionable and editable.

Partner tech usage
Qdrant vector search for real-time competitor discovery.
Multi-agent orchestration with LLMs for structured strategy generation.
Lovable-ready MVP Markdown outputs for downstream building.

Technologies used
AI & Model Orchestration
OpenAI GPT models
Multi-agent coordination logic
Schema-based generation (JSON / YAML)
APIs / Databases / Tools
Qdrant vector database (competitor search & embeddings)
External scraping endpoints for real-time signals
Custom prompt-engine orchestration layer
Frameworks & Libraries
Python (FastAPI), Node.js (TypeScript)
LangChain-style agent patterns
Mermaid.js for visual diagrams
React + Next.js for UI
Hosting / Orchestration
Vercel for frontend
Railway / Fly.io for backend API
Serverless functions for agent execution
CDN caching for repeated blueprint retrieval

Autonomous agent logic & failure modes
Agent logic
Sequential operation with dependency graphs (e.g., market analysis informs strategy agent).
Schema validation triggers retry with corrective hints.
Cross-agent memory ensures consistent terminology across blueprint sections.

Failure modes identified
Incorrect competitor matches → mitigated with thresholding & summarization checks
Overly technical architecture suggestions → mitigated with persona-sensitive prompting
Large blueprints causing clutter → mitigated with collapsible nodes
Hallucinated market data → mitigated via retrieval augmentation + verification prompts

Next steps
Add “auto-solve” mode for alternative business strategies
Add pre-built templates for major SaaS categories
Expand with autonomous “builder mode” that generates components directly in Lovable or Figma

Tech details

Production URL: https://cbrain-stategy.netlify.app
Main page: /cbrain

Frontend

Framework: Next.js 16.0.3 (App Router) with React 19.2.0
Language: TypeScript 5
Styling: Tailwind CSS v4
Visualization: React Flow (@xyflow/react) for the interactive tree
Animations: Framer Motion 12.23.24
Icons: Lucide React 0.553.0

Backend & AI

Runtime: Next.js API Routes (serverless)
AI: Mistral AI (mistral-large-latest model)
Generation mode: Progressive streaming (Server-Sent Events)

Hosting & Deployment

Platform: Netlify
Build: Turbopack (Next.js 16)
Environment: Secure environment variables

Project Structure

cbrain-rebuild/  
├── app/  
│   ├── api/  
│   │   ├── chat-node/           # Node-based AI chat  
│   │   ├── generate-strategy/   # Classic generation (fallback)  
│   │   └── generate-strategy-progressive/  # Streaming generation  
│   ├── cbrain/                  # Main page  
│   └── globals.css              # Global styles + animations  
├── components/  
│   ├── cbrain-canvas.tsx        # Main React Flow canvas  
│   ├── detail-panel.tsx         # Node detail modal  
│   ├── home/  
│   │   └── HomeHeader.tsx       # Homepage header  
│   └── workflow/  
│       ├── ExportButton.tsx     # Markdown export  
│       └── FloatingPromptBar.tsx # Floating prompt bar  
├── lib/  
│   ├── prompts/  
│   │   └── category-prompts.ts  # AI prompts per category  
│   ├── mistral-strategy-parser-progressive.ts  # Real-time parser  
│   ├── skeleton-tree.ts         # Loading skeleton tree  
│   └── markdown-exporter.ts     # Markdown exporter  
├── types/  
│   └── strategy-v2.ts           # TypeScript types  
└── config/  
    ├── nodes.ts                 # Node configuration  
    └── animation.ts             # Animation sequences

Key Features

1. Progressive Streaming Generation

Major innovation: Instead of waiting for the entire generation to finish, CBrain displays the strategic tree as data arrives.

How It Works

Step 1: Generate project name and tagline (~2s)

First node appears immediately
The five main squares are displayed

Step 2: Parallel generation of the five categories (~4–8s)

5 simultaneous calls to Mistral AI
Each category appears as soon as it is received
Time reduced by 5x thanks to parallelization

Result: Complete tree with all details

Advantages

⚡ Performance: 70% faster load times
👀 Engagement: Users see the tree building in real time
🔄 Smooth UX: No blocking loading screens

2. The Five Strategic Pillars

🎯 Vision (Blue)

Strategy: Vision, Mission, Values
Market Study: Market size, Competition, Opportunities

💡 Solution (Purple)

MVP: Concept, 3 key features, User experience

💼 Model (Green)

Business Model: Revenue, Pricing, Unit economics
Tech Stack: Frontend, Backend, AI tools

📈 Growth (Orange)

Launch Timeline: 3 launch phases
Growth Strategy: Acquisition, Retention, Scaling

🦄 Unicorn (Pink)

KPIs: North Star Metric, Acquisition & Engagement metrics
AI Agents: 3 proposed AI agents and their impact

3. Interactive Tree (React Flow)

Smooth navigation: Zoom, pan, drag & drop
Clickable nodes: Open modal with full details
Animations: Nodes appear progressively
Responsive: Works on all screen sizes

4. Node Detail Modal

Each node can be clicked to display:

📝 Full details: Detailed explanations
💬 AI Chat: Ask questions about this specific node
🎨 Modern design: Category-specific colors

5. Markdown Export

Download the entire strategy as .md
Structured and readable format
Auto-generated file names with sanitization

🧠 AI Architecture

Specialized Prompts

Each category has its own optimized prompt:

// 6 different prompts  
- getProjectSummaryPrompt()  // Name + Tagline  
- getVisionPrompt()           // Vision & Market  
- getSolutionPrompt()         // MVP  
- getModelPrompt()            // Business & Tech  
- getGrowthPrompt()           // Launch & Growth  
- getUnicornPrompt()          // KPIs & AI Agents  

Intelligent JSON Parsing

Automatic addition of missing commas
Cleanup of Markdown code blocks
Error handling for Mistral formatting

Robust Fallback

If an error occurs:

Attempt with the progressive API
If failed → fallback to classic API
If failed → use demo data

🎭 User Experience

Design System

Main Colors

Vision: #3b82f6 (Blue)
Solution: #8b5cf6 (Purple)
Model: #10b981 (Green)
Growth: #f59e0b (Orange)
Unicorn: #ec4899 (Pink)

CSS Animations

@keyframes nodeAppear {  
  0% { opacity: 0; transform: scale(0.3) translateY(-20px); }  
  60% { transform: scale(1.1); }  
  100% { opacity: 1; transform: scale(1) translateY(0); }  
}  
  
@keyframes pulse {  
  0%, 100% { opacity: 1; }  
  50% { opacity: 0.5; }  
}  

Loading States

Skeleton Tree: Placeholder tree with pulse animation
Progressive Build: Nodes appear one by one
Final State: Fully interactive tree

🔐 Security & Performance

Environment Variables

MISTRAL_API_KEY=your_key_here

Optimizations

✅ Server Components: Next.js server-side rendering
✅ Code Splitting: Progressive component loading
✅ Turbopack: Ultra-fast compilation
✅ Static Generation: Pre-rendered pages
✅ Edge Functions: Netlify-optimized deployment

Metrics

Time to First Byte: ~200ms
First Contentful Paint: ~400ms
Time to Interactive: ~1s
Full generation: 4–8s (vs 15–20s sequential)

📦 Installation & Development

Prerequisites

Node.js 20+
npm or yarn
Mistral AI API key

Installation

# Clone the repository  
git clone [repo-url]  
cd cbrain-rebuild  
  
# Install dependencies  
npm install  
  
# Configure environment variables  
cp .env.example .env.local  
# Add MISTRAL_API_KEY in .env.local  
  
# Run in development  
npm run dev  
  
# Build production  
npm run build  
  
# Deploy on Netlify  
netlify deploy --prod  

Available Scripts

{  
  "dev": "next dev",           // Development server  
  "build": "next build",       // Production build  
  "start": "next start",       // Production server  
  "lint": "eslint"             // Code linting  
}  