Workspace Docs

docs/get-started/quickstart.md

@@ -0,0 +1,87 @@
+
+# Quickstart
+
+## Start With a Prompt (4 mins)
+
+Dreamflow's AI-powered app generation allows you to create complete, functional 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.
+
+Ready to create your app? Simply:
+
+1. Open Dreamflow and click the textbox that says "Start with a prompt..."
+2. Enter your app description and wait for the Agent to generate your complete app.
+3. Review and customize the generated project in the [workspace](#)
+
+
+The Agent will create all the necessary screens, components, and functionality based on your description, giving you a fully functional app that you can further customize and deploy.
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/5Lbea4PqYYhwyNItSuND?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+Here are some prompts that we've used recently while chatting with the agent.
+
+**A habit tracker**
+
+**Prompt**
+
+    Build the main screen for a habit tracking app. Prepopulate with common habits, and then show the tasks for today on this main screen. Make the app look modern and whimsical.
+
+
+**Duration / Cost**: 161 seconds / 2.51 credits
+
+**Next steps**
+    - Let the user enter their own habits
+    - Give the user reminders for their habits, even when the app is not running.
+    - Allow the user to share their habit progress with others (through the share sheet of the mobile OS)
+
+
+**Asteroids game**
+
+**Prompt**
+
+Replace the main screen with an implementation of the classic game of Asteroids. Make this look and work the same as the original arcade game. Make sure that it has keyboard controls, mouse controls, and touch controls. Store the high-score locally.
+
+**Duration / Cost** : 183 seconds / 2.30 credits
+
+**Next steps**
+    - Give the game a start screen (with instructions)
+    - Give the game an end screen (with a leaderboard)
+    - Store a leaderboard of highscores on a server
+
+
+
+**Chat app**
+
+**Prompt**
+
+Build a small chat app (store the data locally for now) where users can chat with their friends. Make the app look modern and familiar, but also give it some unique twists.
+
+**Duration / Cost** : 313 seconds /  4.42 credits
+
+**Next steps**
+    - Make the chats clustered when folks are close to each other
+    - Store the chat data in a cloud database
+    - Show a notification when a message arrives when the app is not active

docs/get-started/welcome.md

@@ -0,0 +1,40 @@
+
+
+# Welcome
+
+Dreamflow is ... 
+
+
+## Create Account
+
+
+create an account...
+
+
+## Build First Project 
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/5Lbea4PqYYhwyNItSuND?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>

docs/index.md

@@ -149,11 +149,11 @@ Discover additional tools and references to enhance your Dreamflow development e
 
 ## Still Have Problems?
 
-If you're still experiencing issues or need additional help, here are some resources to get you back on track:
+<!-- If you're still experiencing issues or need additional help, here are some resources to get you back on track:
 
 - **[Submit Bug Report](/misc/submit-bug-report)** - Report bugs or issues you've encountered
 - **[Community Forum](https://community.flutterflow.io)** - Ask questions and get help from the community
 - **[Reddit Community](https://www.reddit.com/r/FlutterFlow/)** - Join discussions on Reddit
 - **[Documentation Bug](https://github.com/FlutterFlow/flutterflow-documentation/issues)** - Report documentation issues
 - **[Contribute to Documentation](https://github.com/FlutterFlow/flutterflow-documentation?tab=readme-ov-file#how-to-contribute)** - Contribution guidelines for contributing to the FlutterFlow documentation site. 
-- **[FlutterFlow Support](mailto:[email protected])** - Get direct support from the FlutterFlow support team.
+- **[FlutterFlow Support](mailto:[email protected])** - Get direct support from the FlutterFlow support team. -->

docs/workspace/agent-panel.md

@@ -0,0 +1,226 @@
+---
+slug: /workspace/agent-panel
+title: Agent Panel
+description: Learn about Dreamflow's AI-powered Agent Panel that helps you build and modify Flutter apps through natural language conversations
+tags: [agent, ai, development, flutter]
+sidebar_position: 5
+keywords: [agent panel, ai assistant, flutter development, natural language, code generation, dreamflow interface, development environment]
+---
+
+# Agent Panel
+
+The Agent Panel is an AI-powered development assistant that helps you build and modify your Flutter app through natural language conversations. Simply describe what you want to create or change, and the AI will help you implement it.
+
+![Agent Panel](imgs/agent-panel.png)
+
+
+To access the agent chat, click on the Agent Panel button in the right sidebar to open the chat interface. Type your request in the message box at the bottom. For example:
+
+- *"Add a blue button that says 'Submit'"*
+- *"Create a login form with email and password fields"*
+- *"Make the text larger and change the color to red"*
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/Xj4dOa9cBRVeLkIHq1vH?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+## Agent Context
+
+The Agent Panel automatically understands your current project context, but you can provide additional information to help the AI give you more accurate and relevant assistance.
+
+The AI automatically has access to:
+- Your current app's code and structure
+- The widget you currently have selected
+- Recent changes you've made
+- Your project's dependencies and configuration
+
+
+
+### Image Attachments
+
+Use the Attach Image button in the message box to add screenshots or images to your conversation. This can help the AI understand:
+
+- Visual designs or mockups you want to implement
+- Current state of your app for reference
+- Specific UI elements you want to modify
+- Before/after comparisons for changes
+
+### Screenshot Mode
+
+Instead of trying to describe your current app's appearance in words, you can instantly capture what the AI needs to see. This is much faster and more accurate than explaining complex layouts, colors, or visual relationships through text alone.
+
+You can capture screenshots via the [Preview tab](../workspace/content-panel.md#app-preview) from the Content Panel. Click the camera button (📷) in the bottom-right corner of the preview area.
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/Bo9qrHzNh76LHqk8yaIb?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+### Add to Agent
+
+The "Add to Agent" feature enhances AI conversations by providing detailed context about specific widgets. When activated, it automatically:
+
+- Captures technical details including widget type, properties, and location
+- Takes a screenshot of the selected widget
+- Records the widget's position in the tree hierarchy
+- Adds all this information to the AI's context
+
+This gives the AI agent comprehensive understanding of the components you're working with, enabling more accurate assistance.
+
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/yP3ORGR1dWgcdgrYBZCR?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+### Prompt Edit
+
+Prompt Edit is a quick editing feature that lets you make changes to specific widgets without opening the full Agent Panel. The dialog is designed for single-purpose edits, keeping you focused on the specific widget without distractions.
+
+To use the Prompt Edit feature, right-click on any widget in the Widget Tree Panel and select "Prompt Edit" from the context menu.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/iIBUpuGKNRqtq8Pcdc8t?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+You can also edit widgets directly from the Preview app using Prompt Edit:
+
+1. Enable Inspect Mode in the Preview panel
+2. Right-click on any widget you want to modify 
+3. Select "Prompt Edit" from the context menu
+4. Enter your editing instructions in the prompt dialog
+
+This provides a quick way to make targeted widget changes without leaving the Preview view.
+
+![Prompt Edit](imgs/prompt-edit-inspect.png)
+
+### App Logs
+
+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.
+
+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.
+
+The agent can access the following: 
+- Print statements from your Dart code
+- Flutter framework messages and warnings
+- Error messages and stack traces
+- Hot reload notifications
+- Build process output
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/M1UYHHbJlKX8SCmraYtt?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+
+