You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/get-started/quickstart.md
+78-72Lines changed: 78 additions & 72 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,85 +7,18 @@ sidebar_position: 1
7
7
keywords: [quickstart, getting started, dreamflow tutorial, ai app generation, flutter development, mobile app creation, natural language prompts]
8
8
---
9
9
10
-
11
-
12
10
# Quickstart
13
11
12
+
When starting a new Dreamflow project you have three options:
14
13
15
-
## Start from Scratch
16
-
17
-
Starting a new Flutter project in Dreamflow is simple and flexible. When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application:
18
-
19
-
- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations.
20
-
- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools.
21
-
- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**.
22
-
- Combine these approaches seamlessly as your project grows.
23
-
24
-
This flexibility allows you to work in whatever way best suits your development style and project needs.
25
-
26
-
<div style={{
27
-
position: 'relative',
28
-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms.
55
-
56
-
Simply choose a template that matches your needs and customize it to create your unique application.
57
-
58
-
<div style={{
59
-
position: 'relative',
60
-
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
-**[Start from a prompt](/quickstart#start-with-a-prompt)**: when you want to get a jumpstart on a brand new app idea.
15
+
-**[Start from scratch](/quickstart#start-from-scratch)**: when you want to incrementally build from a blank project.
16
+
-**[Start from a template](/quickstart#start-from-a-template)**: when you want to start from an existing beautiful, tailored app.
84
17
85
18
86
19
## Start With a Prompt
87
20
88
-
Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text or image descriptions. Simply describe what you want to build, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you.
21
+
Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text and image descriptions. Simply describe what you want to build, additionally add screenshots for design inspiration, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you.
89
22
90
23
Ready to create your app? Simply:
91
24
@@ -171,3 +104,76 @@ Build a small chat app (store the data locally for now) where users can chat wit
171
104
- Make the chats clustered when folks are close to each other
172
105
- Store the chat data in a cloud database
173
106
- Show a notification when a message arrives when the app is not active
107
+
108
+
109
+
## Start from Scratch
110
+
111
+
When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application:
112
+
113
+
- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations.
114
+
- Add new UI elements to your page through the **[Widget Tree]**
115
+
- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools.
116
+
- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**.
117
+
- Combine these approaches seamlessly as your project grows.
118
+
119
+
This flexibility allows you to work in whatever way best suits your development style and project needs.
120
+
121
+
<div style={{
122
+
position: 'relative',
123
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms.
150
+
151
+
Simply choose a template that matches your needs and customize it to create your unique application.
152
+
153
+
<div style={{
154
+
position: 'relative',
155
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
Copy file name to clipboardExpand all lines: docs/index.md
+18-21Lines changed: 18 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ keywords: [dreamflow welcome, flutter development platform, ai mobile app develo
12
12
13
13
**The Fastest Way to Build Mobile Apps**
14
14
15
-
Dreamflow is an AI-first platform that combines code, visual, and agentic app development for Flutter—no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment.
15
+
Dreamflow is an AI-first platform that combines agentic, visual and code development for Flutter — no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment.
16
16
17
17
### Product Tour
18
18
@@ -40,42 +40,41 @@ Dreamflow is an AI-first platform that combines code, visual, and agentic app de
40
40
</div>
41
41
42
42
43
-
44
43
## Key Features
45
44
46
-
-**[AI Agent](workspace/agent-panel.md)**: Prompt small edits or large refactors with natural language commands. The AI agent can scaffold entire screens, implement complex flows, and generate comprehensive tests, making development faster and more intuitive than traditional coding approaches.
45
+
In Dreamflow, the code is always the single source of truth. Whether you build with the agent, use visual controls, or edit the source directly - the code is updated in realtime as you build.
47
46
48
-
-**[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development.
47
+
49
48
50
49
51
-
-**[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible.
50
+
-**[AI Agent](workspace/agent-panel.md)**: Start a new app, get a jump start on new features for your existing project, or get help fixing issues using natural language commands. The AI agent can scaffold entire screens, implement complex flows, and help add debug outputs - making development faster and easier to understand.
52
51
53
-
-**[Properties Editor](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Use expressions, formulas, or simply ask the AI for assistance when configuring complex widget behaviors and styling.
52
+
-**[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development.
54
53
55
-
-**[Deploy](test-and-publish/publish/web-deployment.md)**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, Android ensures your app reaches users everywhere.
54
+
-**[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible.
56
55
57
-
-**Hot Reload**: See changes instantly as you develop with Flutter's hot reload technology, enabling rapid iteration and real-time feedback during the development process.
56
+
-**[Visual Property Editors](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Visually select different styles, use code expressions, or simply ask the AI for assistance when configuring complex widget behaviors and styling.
58
57
59
-
-**[Debug Console](workspace/content-panel.md#debug-console)**: Monitor app logs and performance in real-time with integrated debugging tools that help you identify and resolve issues quickly.
58
+
-**Deploy**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, and Android ensures your app reaches users everywhere.
60
59
61
-
-**Multi-Platform Support**: Build applications that run seamlessly across mobile (iOS and Android), web (responsive), and desktop (macOS, Windows, Linux) platforms from a single codebase.
62
60
63
61
## How It Works
64
62
65
-
Dreamflow follows a simple 3-step workflow: **Start → Build → Run & Ship**
Kick off from a natural-language prompt, a blank Flutter project, or import an existing repo (coming soon).
66
+
Kick off from a natural-language prompt, a blank Flutter project, or import an existing Flutter repo using git (coming soon).
69
67
70
-
### 2. Build
68
+
### 2. Iterate
71
69
Jump between multiple development modes to build your app efficiently:
72
70
73
-
- Use the **Code** editor for direct Flutter development.
74
-
- Navigate the **Visual widget tree** for drag-and-drop UI building.
75
-
- Configure components in the **Properties editor** with type-safe controls.
76
-
- Leverage the **AI agent** to scaffold features and refactor code through natural language.
71
+
- Leverage the **AI agent** to get a jump start on new features or for help debugging.
72
+
- Add, remove or rearrange UI elements (Widgets) in the **visual Widget Tree**.
73
+
- Configure arguments for widgets visually in the **Properties editor** with type-safe controls.
74
+
- Use the **Code** editor to peak under-the-hood and see what's going on.
75
+
77
76
78
-
Built-in Firebase and Supabase integrations provide authentication, database, and storage capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type.
77
+
Built-in Firebase and Supabase integrations provide authenticationand database capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type.
79
78
80
79
<div style={{
81
80
position: 'relative',
@@ -103,11 +102,9 @@ Built-in Firebase and Supabase integrations provide authentication, database, an
103
102
</iframe>
104
103
</div>
105
104
106
-
### 3. Run & Ship
105
+
### 3. Ship
107
106
A managed run session compiles and previews your app in real time. Connect Firebase/Supabase, test flows, and deploy to web or the app stores when ready.
108
107
109
-
110
-
111
108
## Ready to Start Building?
112
109
113
110
Whether you're a seasoned developer looking to accelerate your workflow or a newcomer wanting to bring your app ideas to life, Dreamflow provides the tools and AI assistance you need to succeed.
Copy file name to clipboardExpand all lines: docs/workspace/agent-panel.md
+1-3Lines changed: 1 addition & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -58,7 +58,6 @@ The AI automatically has access to:
58
58
- Your project's dependencies and configuration
59
59
60
60
61
-
62
61
### Image Attachments
63
62
64
63
Use the Attach Image button in the message box to add screenshots or images to your conversation. This can help the AI understand:
@@ -113,7 +112,6 @@ The "Add to Agent" feature enhances AI conversations by providing detailed conte
113
112
This gives the AI agent comprehensive understanding of the components you're working with, enabling more accurate assistance.
114
113
115
114
116
-
117
115
<div style={{
118
116
position: 'relative',
119
117
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
@@ -187,7 +185,7 @@ This provides a quick way to make targeted widget changes without leaving the Pr
187
185
188
186
The Agent Panel can automatically access your app's debug logs and console output to help diagnose issues and understand your app's behavior. This is particularly useful when debugging problems or explaining errors to the AI.
189
187
190
-
When you ask the AI about errors, debugging, or app behavior, it can automatically retrieve recent log entries from your running Flutter app. It typically fetches the most recent 50-100 lines of logs (configurable) to get relevant context without overwhelming the conversation with too much information.
188
+
When you ask the AI about errors, debugging, or app behavior, it can automatically retrieve recent log entries from your running Flutter app. It typically fetches the most recent 200 lines of logs to get relevant context without overwhelming the conversation with too much information.
0 commit comments