PrettiFlow

Build apps, websites, and AI agents by chatting with AI

---

What is PrettiFlow?

PrettiFlow is an AI-powered development platform that lets you create full-stack applications, landing pages, and intelligent AI agents through natural conversation. No complex setup, no boilerplate - just describe what you want to build.

Key Features

• Landing Page Builder - Generate beautiful, responsive landing pages with AI
• Full-Stack Web Apps - Build complete applications with real-time code execution
• AI Agent Creator - Design custom AI agents with tools, MCP servers, and capabilities
• Live Preview - See your creations come to life instantly
• Authentication - Secure user management with Supabase
• Payments - Integrated payment processing with Dodo Payments

---

Tech Stack

Frontend

• Framework: Next.js 16 (App Router)
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui + Radix UI
• Animations: Framer Motion
• State Management: React 19

Backend

• Runtime: Node.js
• API Routes: Next.js API Routes
• Database: PostgreSQL (Neon)
• ORM: Drizzle ORM
• Authentication: Supabase Auth
• File Storage: Vercel Blob

AI & Agents

• LLM Providers: OpenAI, Google Gemini, Groq
• Agent Framework: Inngest Agent Kit
• Code Execution: E2B Code Interpreter
• MCP Protocol: @modelcontextprotocol/sdk

Infrastructure

• Hosting: Vercel
• Database: Neon (Serverless Postgres)
• Storage: Vercel Blob
• Payments: Dodo Payments

---

Installation

Prerequisites

• Node.js 18+ and npm
• PostgreSQL database (or Neon account)
• Supabase account
• API keys for AI providers

1. Clone the repository

git clone https://github.com/yourusername/prettiflow.git
cd prettiflow

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file in the root directory:

# AI Providers
OPENAI_API_KEY=your_openai_api_key
GEMINI_API_KEY=your_gemini_api_key
GROQ_API_KEY=your_groq_api_key

# E2B Code Execution
E2B_API_KEY=your_e2b_api_key

# Database (Neon)
DATABASE_URL=postgresql://user:password@host/database?sslmode=require

# Supabase Authentication
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Vercel (for deployments)
VERCEL_TOKEN=your_vercel_token
BLOB_READ_WRITE_TOKEN=your_blob_token

# Payments (Dodo Payments)
DODO_PAYMENTS_API_KEY=your_dodo_api_key
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_key
DODO_PAYMENTS_RETURN_URL=http://localhost:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode  # or live_mode

4. Set up the database

# Push schema to database
npm run db:push

# (Optional) Open Drizzle Studio to view/edit data
npm run db:studio

5. Run the development server

npm run dev

Open http://localhost:3000 to see your app.

---

Development Guide

Available Scripts

# Development
npm run dev              # Start dev server
npm run build            # Build for production
npm run start            # Start production server

# Database
npm run db:push          # Push schema changes to DB
npm run db:studio        # Open Drizzle Studio
npm run db:seed          # Seed database with sample data

# Inngest (for agent workflows)
npm run inngest          # Start Inngest dev server

Key Features to Explore

1. Landing Page Builder (/playground)

• AI-powered page generation
• Real-time Monaco editor
• Live preview with device emulation
• Export to Vercel

2. Web App Creator (/project)

• Full-stack app generation
• E2B sandboxed execution
• File system management
• Inngest-powered agents

3. AI Agent Builder (/agent/create)

• Custom agent configuration
• Tool integration (HTTP APIs, JavaScript)
• MCP server connections
• AI-suggested tools via Groq

Database Schema

The app uses Drizzle ORM with PostgreSQL. Main tables:

Core Tables:

• users - User accounts with email, name, and credits
• pages - Landing pages with code and metadata
• projects - Web applications with sandbox IDs and Vercel integration
• agents - AI agents with system prompts, models, and tool references
• tools - Reusable tools (HTTP APIs, JavaScript, MCP servers)

Supporting Tables:

• messages - Chat messages for web app projects
• pagesMessages - Chat messages for landing pages
• deployments - Vercel deployments for projects
• pageDeployments - Vercel deployments for pages
• subscriptions - User subscription plans
• agentApiKeys - API keys for agent access

View full schema: lib/database/schema.ts

---

Getting API Keys

Required Services

1. OpenAI - platform.openai.com
2. Google AI Studio - aistudio.google.com
3. Groq - console.groq.com
4. E2B - e2b.dev
5. Supabase - supabase.com
6. Neon - neon.tech
7. Vercel - vercel.com
8. Dodo Payments - dodopayments.com

---

Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

# Or use Vercel CLI
vercel --prod

Environment Variables Checklist

Make sure to add all variables from .env.local to your Vercel project settings.

---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

License

This project is licensed under the MIT License.

---

Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• AI agents powered by Inngest Agent Kit
• Code execution via E2B
• MCP protocol by Anthropic

---

Visit PrettiFlow • Documentation • Report Bug • Request Feature

Made with love by Amit