No Provider
Describe Your Project
Analyze a File

Drop or click to upload

README · package.json · .env · any code file

Project Templates
DRE WORKFLOW
Describe your project or pick a template to begin
Generating workflow
100%
Ready
0 nodes
0 connections
Bridge idle
SEND TO DRE TOOLS
Select Target
DRE CODE
Code Editor
DRE Interface
UI Builder
NWA
Web Agent
Payload Format
Preview
// Generate a workflow first, then select a target and format.

Push the current workflow directly into DRE CODE as a starter file or scaffold prompt. DRE CODE must be open in another tab.

BRIDGE ACTIVITY
// No activity yet
SETTINGS
Select Provider
What is DRE Workflow?
DRE Workflow is your project's starting point. Describe what you want to build, and it generates a visual step-by-step map — then routes the right work to the right DRE tool.
The DRE Tool Suite
💻
DRE CODE Tab 01
Your AI-powered code editor. Best for building websites, single-file apps, HTML/CSS/JS projects, and any UI-focused work. The AI can directly rewrite and refine your code with full file awareness.
🌐
NWA Tab 03
Multi-Agent Web App builder. Best for complex programs, apps with logic/state/UI split across agents. Handles programs that need separate Logic, UI, and State pipelines working in parallel.
🧩
Architect Tab 02
Template library. Push a production-ready code foundation to DRE CODE instantly. Best used before writing any code — sets up your project scaffold.
🔍
DRE.Architect Tab 06
Paste any code and get a live Mermaid diagram + plain-English breakdown of how it works. Use when you need to understand existing code before editing it.
🎨
Replicated Tab 05
Give it a reference URL or design description. It extracts colors, typography, layout, and component structure and dispatches a design payload to DRE CODE or NWA.
🔧
Debugger Tab 04
Test your code in an isolated sandbox. Runtime errors are captured and the AI can fix them in one click. Always the last step before you ship.
When to Use External AI (Claude, ChatGPT, Gemini)
Use Claude/ChatGPT/Gemini when you need guidance, explanations, architecture advice, or prompt help before building. They're best for planning and answering "how do I do X?" questions.
Use DRE CODE when you're ready to actually build — it has direct code-writing powers and knows your full file.
Use NWA when your app has complex moving parts — authentication flows, state machines, multi-screen logic — that need a structured multi-agent approach.
The Standard Build Workflow
1
DRE Workflow (here) — Describe your project, generate a visual architecture map.
2
Replicated (Tab 05) — Optional: extract design tokens from a reference site.
3
Architect (Tab 02) — Push a starter template into DRE CODE to get your scaffold.
4
NWA (Tab 03) — Build complex logic, state, and multi-agent pipelines.
5
DRE CODE (Tab 01) — Refine UI, add features, and polish the final product.
6
Debugger (Tab 04) — Test in sandbox, auto-fix errors before shipping.
DRE CODE vs NWA — Quick Decision Guide
Building a website, landing page, portfolio, or single-file app? → Use DRE CODE
Need authentication, login/signup, user accounts? → Start with NWA for logic, then refine in DRE CODE
Building an app with database, API calls, and multi-page flows? → Use NWA
Mostly visual/UI work, styling, or adding a feature to existing code? → Use DRE CODE
Tips for Better Results
Be specific in your project description. Instead of "make a website," say "a personal portfolio with a hero section, project gallery, and contact form using a dark cyberpunk aesthetic."
Use the 🧭 Build Advisor if you're unsure where to start — it analyzes your build type and recommends the right tool with a ready-made prompt.
After generating a workflow, use Send to DRE Tools to push the workflow directly into DRE CODE or NWA as a starting prompt.
Session Error Log
// No errors recorded
Logs errors from file uploads, AI generation failures, and API calls during this session. Clears on page reload.
EXPORT WORKFLOW
PNG Image
High-res canvas screenshot for sharing or docs
SVG Vector
Scalable vector, perfect for presentations
JSON Data
Full workflow data, re-importable anytime
Markdown
Step-by-step text version of the workflow
PDF Document
Printable workflow document with all steps
HTML File
Standalone interactive workflow you can open anywhere
🌱 NOVICE WEBSITE GUIDE Beginner Friendly
How this works

Tell us where you built your site and what you want to learn. Optionally upload your project file (exported ZIP, HTML, or config) so the AI can analyze exactly what you have. DRE will map out every step — from what your drag-and-drop tool did behind the scenes to how to build or own it properly.

🔵
Wix
Drag & Drop
⬛
Squarespace
Design-first
🟠
Weebly
Simple Builder
🔷
Webflow
Visual CMS
🔵
WordPress
CMS / Blocks
🤖
AI Builder
Claude / ChatGPT
🔍 Understand What I Built
Learn what each part of my site does
🏗 Rebuild It With Real Code
Recreate my site using HTML/CSS/JS or a framework
🚀 Migrate to a Better Platform
Move off the builder to a proper hosting setup
🔑 Own My Site Fully
Domain, hosting, custom code — full control

Drop or click to upload your exported site file

Wix export · HTML · ZIP · CSS · config.json · any file from your builder

🧭 SMART BUILD ADVISOR
Not sure which DRE tool to use?

Tell us what you're building. The Advisor analyzes your project type, recommends whether to use DRE CODE or NWA, and optionally suggests which external AI (Claude, ChatGPT, Gemini) to consult first — then generates a ready-to-use prompt for you.

🌐
Website / Landing Page
Portfolio, business site, blog, one-pager, marketing page
⚙️
Web Application
Dashboard, SaaS tool, form-heavy app, data management
🔐
App with Authentication
Login/signup, user accounts, protected routes, sessions
🎮
Game / Interactive App
Browser game, canvas app, interactive simulation
🛠
Utility / Tool
Calculator, converter, generator, browser extension
🔌
API / Backend
REST API, server logic, database integration, Node.js
RECOMMENDATION READY