DrizzleFlow

A smart, visual management tool for modern databases.
Go beyond Drizzle Studio with AI-powered agents and interactive schema visualization.

English | 中文

---

DrizzleFlow is not just a replacement for Drizzle Studio. It's a powerful database workbench that combines AI Agent Chat, Interactive Schema Visualization, and Enhanced Studio Management to take your database workflow to the next level.

Imagine querying your database, generating reports, and exploring complex data relationships using natural language and drag-and-drop nodes. That's the transformation DrizzleFlow brings.

✨ Core Features

Feature	Description
🤖 AI Agent Chat	Converse with your database in natural language. The AI Agent can understand your intent, automatically query data, generate analytical reports, and even create charts.
🗺️ Interactive Schema Visualization	Renders your database schema into an interactive graph using ReactFlow. Easily drag, zoom, and clearly see primary/foreign key relationships between tables.
🚀 Enhanced Drizzle Studio	A seamlessly integrated Drizzle Studio with auto-start, health checks, failed retries, and a manual control panel to ensure it's stable and reliable.
🌐 Multi-Environment Support	Easily switch between multiple database environments like development, testing, and production, with all configurations managed centrally for a clear overview.

🚀 Quick Start

1. Prerequisites

• Node.js (>= 18.0)
• pnpm
• PostgreSQL or other compatible database

2. Installation

# Clone the repository
git clone https://github.com/your-username/drizzleflow.git
cd drizzleflow

# Install dependencies
pnpm install

3. Configuration

Copy the .env.example file and rename it to .env:

cp env.example .env

Then, edit the .env file and fill in your database connection details:

# Database URL
# Example: postgresql://user:password@host:port/database
DATABASE_URL="your_database_url_here"

# Port for Drizzle Studio to run on
# You can change this if the port is occupied
STUDIO_PORT=4983

4. Run the App

# Start the development server
pnpm dev

The application will start at http://localhost:3000 and will automatically try to launch Drizzle Studio.

🤖 How The AI Agent Works

DrizzleFlow's AI capabilities are powered by a sophisticated Multi-Agent system. An Orchestrator Agent first analyzes your request, then breaks it down into sub-tasks and assigns them to the most appropriate specialist Agent for execution.

• Query Agent: Converts your natural language questions into precise SQL queries.
• Analysis Agent: Performs in-depth analysis of query results to extract key insights.
• Report Agent: Organizes the analysis into structured text reports.
• Chart Agent: Visualizes data into charts (e.g., bar charts, line charts).

This collaborative model enables DrizzleFlow to handle a wide range of tasks, from simple queries to complex analyses.

You can ask it things like:

"Find users who registered in the last month" "Which product had the highest sales last quarter? Give me a report" "Generate a chart showing daily user growth trends"

🛠️ Tech Stack

• Framework: Next.js 15
• UI: Tailwind CSS, Shadcn/ui, Radix UI
• ORM: Drizzle ORM
• Visualization: ReactFlow
• State Management: Zustand
• AI: Vercel AI SDK, LangChain.js
• Database: PostgreSQL (extendable to MySQL/SQLite)

🎯 Roadmap

• [✅] Core Architecture: Next.js 15, Drizzle ORM, basic AI Agent
• [✅] Drizzle Studio Integration: Auto-start and health checks
• [✅] Schema Visualization: Initial implementation with ReactFlow
• [✅] AI Chat: Support for natural language queries and report generation
• [🚧] Chart Generation: Improve chart agent types and styles
• [🚧] Visualization Enhancements: Node search, filtering, and auto-layout
• [📋] Data Export: Support for exporting query results, reports, or charts as CSV/PDF/PNG
• [📋] Plugin System: Allow community to extend Agents and visualization capabilities

🤝 Contributing

We warmly welcome all forms of contributions! Whether it's submitting issues, fixing bugs, or developing new features.

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 Apache 2.0 License.

🙏 Acknowledgements

• Next.js
• Drizzle ORM
• ReactFlow
• Shadcn/ui
• Vercel AI SDK