ENG-7440: update ai docs (+ ENG-7383)

docs/ai_builder/app_lifecycle/copy_app.md

@@ -0,0 +1,58 @@
+# Copy App
+
+The **Copy** feature lets you duplicate an existing app inside Reflex Build.
+This is useful when you want to experiment with changes without affecting the original project, or when you want to use an app as a starting point for a new idea.
+
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+
+def render_image():
+    return rx.el.div(
+        image_zoom(
+            rx.image(
+                src=rx.color_mode_cond(
+                    "/ai_builder/app_lifecycle/copy_light.png",
+                    "/ai_builder/app_lifecycle/copy_dark.png",
+                ),
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+            class_name="rounded-md overflow-hidden",
+        ),
+        class_name="w-full flex flex-col rounded-md cursor-pointer",
+    )
+```
+
+```python eval
+
+rx.el.div(render_image())
+
+```
+
+## How to Copy an App
+
+1. In the Reflex Build workspace, click the **Copy** button (bottom-right corner).
+2. Reflex Build will create a new app in your workspace with the same:
+   - Code files and components
+   - State and configuration
+   - Dependencies
+
+The copied app will appear as a separate project, independent from the original.
+
+
+## Common Use Cases
+
+- **Experiment Safely**
+  Try out new components, layouts, or integrations without risking your working app.
+
+- **Create Variations**
+  Use the original app as a base to quickly spin up a different version (e.g., a light and dark theme version).
+
+- **Template Reuse**
+  Turn an app into a personal template and copy it each time you start a new project.
+
+## Best Practices
+
+- Rename your copied app immediately so it’s easy to distinguish from the original.

docs/ai_builder/app_lifecycle/deploy_app.md

@@ -0,0 +1,47 @@
+# Deploy App
+
+```python exec
+import reflex as rx
+```
+
+It is easy to deploy your app into production from Reflex Build to Reflex Cloud.
+
+Simply click the `Deploy` button in the bottom right corner of Reflex Build, as shown below:
+
+
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+
+def render_image():
+    return rx.el.div(
+        image_zoom(
+            rx.image(
+                src=rx.color_mode_cond(
+                    "/ai_builder/app_lifecycle/deploy_light.png",
+                    "/ai_builder/app_lifecycle/deploy_dark.png",
+                ),
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+            class_name="rounded-md overflow-hidden",
+        ),
+        class_name="w-full flex flex-col rounded-md cursor-pointer",
+    )
+```
+
+```python eval
+
+rx.el.div(render_image())
+
+```
+
+When deploying you can set the following options:
+- **App Name**: The name of your app
+- **Hostname**: Set your url by setting your hostname, i.e. if you set `myapp` as your hostname, your app will be available at `myapp.reflex.run`
+- **Region**: The regions where your app will be deployed
+- **VM Size**: The size of the VM where your app will be deployed
+- **Secrets**: The environment variables that will be set for your app, you can load the variables currently being used by your app by clicking the `Load from settings` button
+
+Note: Hostname customization, region selection, and VM sizing are only available on paid plans.

docs/ai_builder/app_lifecycle/download_app.md

@@ -0,0 +1,42 @@
+# Download App
+
+You can download your Reflex Build project if you want to work on it locally or self-host it outside the AI Builder.
+
+**Tip:** The recommended workflow is to use the GitHub integration, which keeps your code version-controlled and in sync. Downloading is useful if GitHub integration isn’t available or you just want a one-time export.
+
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+
+def render_image():
+    return rx.el.div(
+        image_zoom(
+            rx.image(
+                src=rx.color_mode_cond(
+                    "/ai_builder/app_lifecycle/download_light.png",
+                    "/ai_builder/app_lifecycle/download_dark.png",
+                ),
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+            class_name="rounded-md overflow-hidden",
+        ),
+        class_name="w-full flex flex-col rounded-md cursor-pointer",
+    )
+```
+
+```python eval
+
+rx.el.div(render_image())
+
+```
+
+## How to Download
+
+1. In the AI Builder workspace, go to the **bottom-right corner**.
+2. Click the **Download** button.
+3. A `.zip` file will be generated containing your entire Reflex app, including:
+   - Source code (`.py` files, components, state, etc.)
+   - `requirements.txt` with dependencies
+   - Config files (`rxconfig.py`, `.env`, etc.)

docs/ai_builder/app_lifecycle/fork_app.md

@@ -0,0 +1,50 @@
+# Fork App
+
+The **Fork App** feature lets you take an existing app and create your own version of it. This is perfect for **experimenting, customizing, or building on top of someone else’s work** without affecting the original app.
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src=rx.color_mode_cond(
+                "/ai_builder/overview/fork_template_light.png",
+                "/ai_builder/overview/fork_template_dark.png",
+            ),
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+
+## How to Fork an App
+
+1. Browse or open an app you’d like to use as a starting point.
+2. Click the **Fork** button in the app’s bottom right corner.
+3. The AI Builder will create a **copy of the app** in your workspace.
+4. You can now **edit, customize, and expand** your forked app independently of the original.
+
+## What Happens When You Fork
+
+- You get a **full copy** of the original app, including all pages, components, and configurations.
+- The forked app is **completely separate**, so changes you make do not affect the original.
+- You can **rename, deploy, or share** your forked app like any other app in your workspace.
+
+## Common Use Cases
+
+- **Start From an Example**
+  Use a sample or shared app as a foundation to save time and learn best practices.
+
+- **Experiment Safely**
+  Try new ideas or features without risking changes to the original app.
+
+- **Collaborate and Customize**
+  Fork a teammate’s app to tailor it to your needs while keeping the original intact.

docs/ai_builder/app_lifecycle/general.md

@@ -0,0 +1,59 @@
+# General App Settings
+
+The **General App Settings** section lets you manage key aspects of your app, including its name, ID, and deletion. This is your central place to view and update your app’s core information.
+
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+
+def render_image():
+    return rx.el.div(
+        image_zoom(
+            rx.image(
+                src=rx.color_mode_cond(
+                    "/ai_builder/app_lifecycle/general_light.png",
+                    "/ai_builder/app_lifecycle/general_dark.png",
+                ),
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+            class_name="rounded-md overflow-hidden",
+        ),
+        class_name="w-full flex flex-col rounded-md cursor-pointer",
+    )
+```
+
+```python eval
+
+rx.el.div(render_image())
+
+```
+
+
+## How to Access Settings
+
+1. In the AI Builder workspace, click the **Settings** icon located at the bottom-left of the screen, inside the chat box area.
+2. This will open the **General** tab to see your app’s main settings.
+
+## What You Can Do
+
+- **Change App Name**
+  Update the name of your app to reflect its purpose or version.
+
+- **View App ID**
+  Find the unique identifier for your app, which can be used for integrations or support.
+
+- **Delete App**
+  Permanently remove an app you no longer need. **Warning:** This action cannot be undone.
+
+## Common Use Cases
+
+- **Keep Apps Organized**
+  Rename apps to make them easier to find in your workspace.
+
+- **Integration Reference**
+  Use the App ID when connecting your app to other tools or APIs.
+
+- **Clean Up Workspace**
+  Delete outdated or test apps to keep your workspace tidy.

docs/ai_builder/app_lifecycle/share_app.md

@@ -0,0 +1,56 @@
+# Share App
+
+The **Share** feature makes it easy to show your app to others without deploying it.
+When you share, Reflex Build generates a unique link that points to the current version of your project in the builder.
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+
+def render_image():
+    return rx.el.div(
+        image_zoom(
+            rx.image(
+                src=rx.color_mode_cond(
+                    "/ai_builder/app_lifecycle/share_light.png",
+                    "/ai_builder/app_lifecycle/share_dark.png",
+                ),
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+            class_name="rounded-md overflow-hidden",
+        ),
+        class_name="w-full flex flex-col rounded-md cursor-pointer",
+    )
+```
+
+```python eval
+
+rx.el.div(render_image())
+
+```
+
+## How to Share
+
+1. In the AI Builder workspace, click the **Share** button (bottom-right corner).
+2. A popup will appear with a **shareable link**.
+3. Copy the link and send it to teammates, collaborators, or stakeholders.
+
+
+## What Others See
+
+- The link opens a **read-only view** of your app generation.
+- Recipients can see the app preview but cannot make edits.
+- This makes it safe to share work-in-progress versions for quick feedback.
+
+
+## Common Use Cases
+
+- **Get Feedback Quickly**
+  Share a work-in-progress version with your team before deploying.
+
+- **Demo Features**
+  Send a link to showcase a new component, layout, or integration.
+
+- **Collaboration**
+  Share context with another developer before handing off to GitHub or download.