diff --git a/assets/ai_builder/app_lifecycle/copy_dark.png b/assets/ai_builder/app_lifecycle/copy_dark.png new file mode 100644 index 0000000000..db6ea114a7 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/copy_dark.png differ diff --git a/assets/ai_builder/app_lifecycle/copy_light.png b/assets/ai_builder/app_lifecycle/copy_light.png new file mode 100644 index 0000000000..9a12f5fc63 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/copy_light.png differ diff --git a/assets/ai_builder/app_lifecycle/deploy_dark.png b/assets/ai_builder/app_lifecycle/deploy_dark.png new file mode 100644 index 0000000000..e9f0e5854e Binary files /dev/null and b/assets/ai_builder/app_lifecycle/deploy_dark.png differ diff --git a/assets/ai_builder/app_lifecycle/deploy_light.png b/assets/ai_builder/app_lifecycle/deploy_light.png new file mode 100644 index 0000000000..a0233ea3fd Binary files /dev/null and b/assets/ai_builder/app_lifecycle/deploy_light.png differ diff --git a/assets/ai_builder/app_lifecycle/download_dark.png b/assets/ai_builder/app_lifecycle/download_dark.png new file mode 100644 index 0000000000..762a964c9b Binary files /dev/null and b/assets/ai_builder/app_lifecycle/download_dark.png differ diff --git a/assets/ai_builder/app_lifecycle/download_light.png b/assets/ai_builder/app_lifecycle/download_light.png new file mode 100644 index 0000000000..c3bf55cd24 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/download_light.png differ diff --git a/assets/ai_builder/app_lifecycle/general_dark.png b/assets/ai_builder/app_lifecycle/general_dark.png new file mode 100644 index 0000000000..c23ec1e0b6 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/general_dark.png differ diff --git a/assets/ai_builder/app_lifecycle/general_light.png b/assets/ai_builder/app_lifecycle/general_light.png new file mode 100644 index 0000000000..f330b9a14e Binary files /dev/null and b/assets/ai_builder/app_lifecycle/general_light.png differ diff --git a/assets/ai_builder/app_lifecycle/share_dark.png b/assets/ai_builder/app_lifecycle/share_dark.png new file mode 100644 index 0000000000..d74f6952b6 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/share_dark.png differ diff --git a/assets/ai_builder/app_lifecycle/share_light.png b/assets/ai_builder/app_lifecycle/share_light.png new file mode 100644 index 0000000000..bb56a3f393 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/share_light.png differ diff --git a/assets/ai_builder/features/diff_dark.png b/assets/ai_builder/features/diff_dark.png new file mode 100644 index 0000000000..8c18e9f21e Binary files /dev/null and b/assets/ai_builder/features/diff_dark.png differ diff --git a/assets/ai_builder/features/diff_light.png b/assets/ai_builder/features/diff_light.png new file mode 100644 index 0000000000..bb1a18ba6e Binary files /dev/null and b/assets/ai_builder/features/diff_light.png differ diff --git a/assets/ai_builder/features/interaction_modes_dark.png b/assets/ai_builder/features/interaction_modes_dark.png new file mode 100644 index 0000000000..a218604be4 Binary files /dev/null and b/assets/ai_builder/features/interaction_modes_dark.png differ diff --git a/assets/ai_builder/features/interaction_modes_light.png b/assets/ai_builder/features/interaction_modes_light.png new file mode 100644 index 0000000000..0d1be54510 Binary files /dev/null and b/assets/ai_builder/features/interaction_modes_light.png differ diff --git a/assets/ai_builder/features/knowledge_dark.png b/assets/ai_builder/features/knowledge_dark.png new file mode 100644 index 0000000000..705801d8a1 Binary files /dev/null and b/assets/ai_builder/features/knowledge_dark.png differ diff --git a/assets/ai_builder/features/knowledge_light.png b/assets/ai_builder/features/knowledge_light.png new file mode 100644 index 0000000000..65c1808a21 Binary files /dev/null and b/assets/ai_builder/features/knowledge_light.png differ diff --git a/assets/ai_builder/features/restore_dark.png b/assets/ai_builder/features/restore_dark.png new file mode 100644 index 0000000000..a4fb808274 Binary files /dev/null and b/assets/ai_builder/features/restore_dark.png differ diff --git a/assets/ai_builder/features/restore_light.png b/assets/ai_builder/features/restore_light.png new file mode 100644 index 0000000000..582166aebd Binary files /dev/null and b/assets/ai_builder/features/restore_light.png differ diff --git a/assets/ai_builder/features/secret_bulk_dark.png b/assets/ai_builder/features/secret_bulk_dark.png new file mode 100644 index 0000000000..5a9d086de6 Binary files /dev/null and b/assets/ai_builder/features/secret_bulk_dark.png differ diff --git a/assets/ai_builder/features/secret_bulk_light.png b/assets/ai_builder/features/secret_bulk_light.png new file mode 100644 index 0000000000..304011120d Binary files /dev/null and b/assets/ai_builder/features/secret_bulk_light.png differ diff --git a/assets/ai_builder/features/secrets_dark.png b/assets/ai_builder/features/secrets_dark.png new file mode 100644 index 0000000000..9b972c0361 Binary files /dev/null and b/assets/ai_builder/features/secrets_dark.png differ diff --git a/assets/ai_builder/features/secrets_light.png b/assets/ai_builder/features/secrets_light.png new file mode 100644 index 0000000000..1c63d7cf56 Binary files /dev/null and b/assets/ai_builder/features/secrets_light.png differ diff --git a/assets/ai_builder/features/shortcut_dark.png b/assets/ai_builder/features/shortcut_dark.png new file mode 100644 index 0000000000..978cb72323 Binary files /dev/null and b/assets/ai_builder/features/shortcut_dark.png differ diff --git a/assets/ai_builder/features/shortcut_light.png b/assets/ai_builder/features/shortcut_light.png new file mode 100644 index 0000000000..5e8edb8961 Binary files /dev/null and b/assets/ai_builder/features/shortcut_light.png differ diff --git a/assets/ai_builder/integrations/azure_auth_dark.png b/assets/ai_builder/integrations/azure_auth_dark.png new file mode 100644 index 0000000000..fb5ff61c02 Binary files /dev/null and b/assets/ai_builder/integrations/azure_auth_dark.png differ diff --git a/assets/ai_builder/integrations/azure_auth_light.png b/assets/ai_builder/integrations/azure_auth_light.png new file mode 100644 index 0000000000..800a5a958e Binary files /dev/null and b/assets/ai_builder/integrations/azure_auth_light.png differ diff --git a/assets/ai_builder/integrations/database_dark.png b/assets/ai_builder/integrations/database_dark.png new file mode 100644 index 0000000000..ad928bf0e6 Binary files /dev/null and b/assets/ai_builder/integrations/database_dark.png differ diff --git a/assets/ai_builder/integrations/database_light.png b/assets/ai_builder/integrations/database_light.png new file mode 100644 index 0000000000..b86c920be1 Binary files /dev/null and b/assets/ai_builder/integrations/database_light.png differ diff --git a/assets/ai_builder/integrations/databricks_dark.png b/assets/ai_builder/integrations/databricks_dark.png new file mode 100644 index 0000000000..89d80dd1bd Binary files /dev/null and b/assets/ai_builder/integrations/databricks_dark.png differ diff --git a/assets/ai_builder/integrations/databricks_light.png b/assets/ai_builder/integrations/databricks_light.png new file mode 100644 index 0000000000..152f0c17a4 Binary files /dev/null and b/assets/ai_builder/integrations/databricks_light.png differ diff --git a/assets/ai_builder/integrations/google_dark.png b/assets/ai_builder/integrations/google_dark.png new file mode 100644 index 0000000000..cd4529c393 Binary files /dev/null and b/assets/ai_builder/integrations/google_dark.png differ diff --git a/assets/ai_builder/integrations/google_light.png b/assets/ai_builder/integrations/google_light.png new file mode 100644 index 0000000000..363b4c20eb Binary files /dev/null and b/assets/ai_builder/integrations/google_light.png differ diff --git a/assets/ai_builder/integrations/open_ai_dark.png b/assets/ai_builder/integrations/open_ai_dark.png new file mode 100644 index 0000000000..44385c29d4 Binary files /dev/null and b/assets/ai_builder/integrations/open_ai_dark.png differ diff --git a/assets/ai_builder/integrations/open_ai_light.png b/assets/ai_builder/integrations/open_ai_light.png new file mode 100644 index 0000000000..2b945a713e Binary files /dev/null and b/assets/ai_builder/integrations/open_ai_light.png differ diff --git a/assets/ai_builder/overview/fork_template_dark.png b/assets/ai_builder/overview/fork_template_dark.png new file mode 100644 index 0000000000..37ff386576 Binary files /dev/null and b/assets/ai_builder/overview/fork_template_dark.png differ diff --git a/assets/ai_builder/overview/fork_template_light.png b/assets/ai_builder/overview/fork_template_light.png new file mode 100644 index 0000000000..4b44cfbc47 Binary files /dev/null and b/assets/ai_builder/overview/fork_template_light.png differ diff --git a/assets/ai_builder/overview/templates_dark.png b/assets/ai_builder/overview/templates_dark.png new file mode 100644 index 0000000000..9a52dd304f Binary files /dev/null and b/assets/ai_builder/overview/templates_dark.png differ diff --git a/assets/ai_builder/overview/templates_light.png b/assets/ai_builder/overview/templates_light.png new file mode 100644 index 0000000000..0b3275576d Binary files /dev/null and b/assets/ai_builder/overview/templates_light.png differ diff --git a/assets/ai_builder/overview/tutorial_1_dark.png b/assets/ai_builder/overview/tutorial_1_dark.png new file mode 100644 index 0000000000..6471aecb0c Binary files /dev/null and b/assets/ai_builder/overview/tutorial_1_dark.png differ diff --git a/assets/ai_builder/overview/tutorial_1_light.png b/assets/ai_builder/overview/tutorial_1_light.png new file mode 100644 index 0000000000..811db3a68f Binary files /dev/null and b/assets/ai_builder/overview/tutorial_1_light.png differ diff --git a/assets/ai_builder/overview/tutorial_2_dark.png b/assets/ai_builder/overview/tutorial_2_dark.png new file mode 100644 index 0000000000..756b4f7712 Binary files /dev/null and b/assets/ai_builder/overview/tutorial_2_dark.png differ diff --git a/assets/ai_builder/overview/tutorial_2_light.png b/assets/ai_builder/overview/tutorial_2_light.png new file mode 100644 index 0000000000..e6e7664c65 Binary files /dev/null and b/assets/ai_builder/overview/tutorial_2_light.png differ diff --git a/assets/ai_builder/overview/tutorial_3_dark.png b/assets/ai_builder/overview/tutorial_3_dark.png new file mode 100644 index 0000000000..3c44d1126d Binary files /dev/null and b/assets/ai_builder/overview/tutorial_3_dark.png differ diff --git a/assets/ai_builder/overview/tutorial_3_light.png b/assets/ai_builder/overview/tutorial_3_light.png new file mode 100644 index 0000000000..d0204b05cb Binary files /dev/null and b/assets/ai_builder/overview/tutorial_3_light.png differ diff --git a/assets/ai_builder/overview/tutorial_4_dark.png b/assets/ai_builder/overview/tutorial_4_dark.png new file mode 100644 index 0000000000..9f971c6dc2 Binary files /dev/null and b/assets/ai_builder/overview/tutorial_4_dark.png differ diff --git a/assets/ai_builder/overview/tutorial_4_light.png b/assets/ai_builder/overview/tutorial_4_light.png new file mode 100644 index 0000000000..07ea7ab5d7 Binary files /dev/null and b/assets/ai_builder/overview/tutorial_4_light.png differ diff --git a/assets/ai_builder/what_is_reflex_build/bottom_dark.png b/assets/ai_builder/what_is_reflex_build/bottom_dark.png index 89d0931ba6..d315f96322 100644 Binary files a/assets/ai_builder/what_is_reflex_build/bottom_dark.png and b/assets/ai_builder/what_is_reflex_build/bottom_dark.png differ diff --git a/assets/ai_builder/what_is_reflex_build/bottom_light.png b/assets/ai_builder/what_is_reflex_build/bottom_light.png index c4f154494b..c5bac4641d 100644 Binary files a/assets/ai_builder/what_is_reflex_build/bottom_light.png and b/assets/ai_builder/what_is_reflex_build/bottom_light.png differ diff --git a/assets/ai_builder/what_is_reflex_build/chat_dark.png b/assets/ai_builder/what_is_reflex_build/chat_dark.png index cd1b95e7e2..be3e768f31 100644 Binary files a/assets/ai_builder/what_is_reflex_build/chat_dark.png and b/assets/ai_builder/what_is_reflex_build/chat_dark.png differ diff --git a/assets/ai_builder/what_is_reflex_build/chat_light.png b/assets/ai_builder/what_is_reflex_build/chat_light.png index 855a91b1c5..f687184afd 100644 Binary files a/assets/ai_builder/what_is_reflex_build/chat_light.png and b/assets/ai_builder/what_is_reflex_build/chat_light.png differ diff --git a/assets/ai_builder/what_is_reflex_build/code_dark.png b/assets/ai_builder/what_is_reflex_build/code_dark.png index 903e83ef81..a1ae5447af 100644 Binary files a/assets/ai_builder/what_is_reflex_build/code_dark.png and b/assets/ai_builder/what_is_reflex_build/code_dark.png differ diff --git a/assets/ai_builder/what_is_reflex_build/code_light.png b/assets/ai_builder/what_is_reflex_build/code_light.png index 2f52400a8f..dfe8cf70b8 100644 Binary files a/assets/ai_builder/what_is_reflex_build/code_light.png and b/assets/ai_builder/what_is_reflex_build/code_light.png differ diff --git a/assets/ai_builder/what_is_reflex_build/file_tree_dark.png b/assets/ai_builder/what_is_reflex_build/file_tree_dark.png index 41b5717f9c..0fbaa38c19 100644 Binary files a/assets/ai_builder/what_is_reflex_build/file_tree_dark.png and b/assets/ai_builder/what_is_reflex_build/file_tree_dark.png differ diff --git a/assets/ai_builder/what_is_reflex_build/file_tree_light.png b/assets/ai_builder/what_is_reflex_build/file_tree_light.png index 8600de52b6..f1be76f179 100644 Binary files a/assets/ai_builder/what_is_reflex_build/file_tree_light.png and b/assets/ai_builder/what_is_reflex_build/file_tree_light.png differ diff --git a/assets/ai_builder/what_is_reflex_build/preview_dark.png b/assets/ai_builder/what_is_reflex_build/preview_dark.png index 4e571dac51..b822b97855 100644 Binary files a/assets/ai_builder/what_is_reflex_build/preview_dark.png and b/assets/ai_builder/what_is_reflex_build/preview_dark.png differ diff --git a/assets/ai_builder/what_is_reflex_build/preview_light.png b/assets/ai_builder/what_is_reflex_build/preview_light.png index db0523cb39..541b200d8a 100644 Binary files a/assets/ai_builder/what_is_reflex_build/preview_light.png and b/assets/ai_builder/what_is_reflex_build/preview_light.png differ diff --git a/assets/ai_builder/what_is_reflex_build/project_bar_dark.png b/assets/ai_builder/what_is_reflex_build/project_bar_dark.png index d4c5d5fa36..66a5b50922 100644 Binary files a/assets/ai_builder/what_is_reflex_build/project_bar_dark.png and b/assets/ai_builder/what_is_reflex_build/project_bar_dark.png differ diff --git a/assets/ai_builder/what_is_reflex_build/project_bar_light.png b/assets/ai_builder/what_is_reflex_build/project_bar_light.png index f1a0bc9955..f549207e30 100644 Binary files a/assets/ai_builder/what_is_reflex_build/project_bar_light.png and b/assets/ai_builder/what_is_reflex_build/project_bar_light.png differ diff --git a/docs/ai_builder/app_lifecycle/copy_app.md b/docs/ai_builder/app_lifecycle/copy_app.md new file mode 100644 index 0000000000..347bf49c1e --- /dev/null +++ b/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. diff --git a/docs/ai_builder/app_lifecycle/deploy_app.md b/docs/ai_builder/app_lifecycle/deploy_app.md new file mode 100644 index 0000000000..4c0e3fc2c8 --- /dev/null +++ b/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. diff --git a/docs/ai_builder/app_lifecycle/download_app.md b/docs/ai_builder/app_lifecycle/download_app.md new file mode 100644 index 0000000000..d721b9a3fe --- /dev/null +++ b/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.) diff --git a/docs/ai_builder/app_lifecycle/fork_app.md b/docs/ai_builder/app_lifecycle/fork_app.md new file mode 100644 index 0000000000..3b2b38bd6c --- /dev/null +++ b/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. diff --git a/docs/ai_builder/app_lifecycle/general.md b/docs/ai_builder/app_lifecycle/general.md new file mode 100644 index 0000000000..b4b285dade --- /dev/null +++ b/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. diff --git a/docs/ai_builder/app_lifecycle/share_app.md b/docs/ai_builder/app_lifecycle/share_app.md new file mode 100644 index 0000000000..9ee055e460 --- /dev/null +++ b/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. diff --git a/docs/ai_builder/features/deploy_app.md b/docs/ai_builder/features/deploy_app.md deleted file mode 100644 index d909a3a0e6..0000000000 --- a/docs/ai_builder/features/deploy_app.md +++ /dev/null @@ -1,25 +0,0 @@ -# Deploy your 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 eval -rx.image( - src="/ai_builder/deploy_app.gif", - height="auto", - padding_bottom="2rem", -) -``` - -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 \ No newline at end of file diff --git a/docs/ai_builder/features/download_app.md b/docs/ai_builder/features/download_app.md deleted file mode 100644 index 82b1bd0f2f..0000000000 --- a/docs/ai_builder/features/download_app.md +++ /dev/null @@ -1,18 +0,0 @@ -# Download your App - -```python exec -import reflex as rx -``` - -It is easy to download your app to work on locally or self-host. (It is recommended to use the GitHub integration, but if this is not possible, you can download your app to work on locally.) - -Simply click the `Download` button in the bottom right corner of Reflex Build, as shown below: - - -```python eval -rx.image( - src="/ai_builder/download_app.gif", - height="auto", - padding_bottom="2rem", -) -``` \ No newline at end of file diff --git a/docs/ai_builder/features/editor_modes.md b/docs/ai_builder/features/editor_modes.md new file mode 100644 index 0000000000..4f225fa1d8 --- /dev/null +++ b/docs/ai_builder/features/editor_modes.md @@ -0,0 +1,92 @@ +# Editor Modes + +The AI Builder includes a powerful dual-mode editor that lets you view and edit your application code while tracking changes made by the AI. You can seamlessly switch between **Editor Mode** for manual code editing and **Diff Mode** for reviewing AI-generated changes. + + +```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/features/diff_light.png", + "/ai_builder/features/diff_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()) + +``` +## Modes: Editor vs Diff + +### Editor Mode +The standard code editor where you can: +- **Write and modify code** directly in the interface +- **Navigate through files** using the file tree +- **Make manual changes** to your application +- **Save your modifications** which persist across sessions + +### Diff Mode +A specialized view that highlights changes from the last AI prompt: +- **Green highlights** show code additions made by the AI +- **Red highlights** show code deletions made by the AI +- **Side-by-side comparison** of what changed +- **Line-by-line tracking** of modifications + +## Switching Between Modes + +### Toggle Controls +Located in the editor toolbar, you'll find: +- **Editor** button - Switch to normal editing mode +- **Diff** button - Switch to change tracking mode + +### When to Use Each Mode +- **Use Editor Mode when:** + - Making manual code changes + - Writing new functionality + - Debugging or fixing issues + - General code development + +- **Use Diff Mode when:** + - Reviewing what the AI changed after a prompt + - Understanding modifications before accepting them + - Tracking the impact of AI suggestions + - Learning from AI-generated code patterns + +## Understanding Diff Visualizations + +### Code Highlighting +**Additions (Green):** +- New code lines added by the AI +- New functions, components, or logic +- Enhanced features and improvements + +**Deletions (Red):** +- Code removed by the AI +- Replaced or refactored sections +- Deprecated functionality + +### File Tree Indicators +The file tree shows change statistics for each modified file: + +**Change Indicators:** +- **`+5`** - 5 lines added to this file +- **`-3`** - 3 lines removed from this file +- **`+12 -8`** - 12 lines added, 8 lines removed +- **No indicator** - File unchanged + +**Visual Cues:** +- **Green `+` symbol** indicates files with additions +- **Red `-` symbol** indicates files with deletions diff --git a/docs/ai_builder/features/environment_variables.md b/docs/ai_builder/features/environment_variables.md deleted file mode 100644 index 3b9bd6bd5d..0000000000 --- a/docs/ai_builder/features/environment_variables.md +++ /dev/null @@ -1,23 +0,0 @@ -# Environment Variables (Secrets) - -```python exec -import reflex as rx -``` - -It is possible to add environment variables to your app. This is useful for storing secrets such as API keys, and other sensitive information. - -## Adding Environment Variables - -You can add environment variables to your app by clicking the `Secrets` button at the bottom of the chat input box, as seen below: - -```python eval -rx.image( - src="/ai_builder/secrets_and_custom_packages.gif", - height="auto", - padding_bottom="2rem", -) -``` - -After you add the environment variables the AI now has context of these and you can prompt it to use them in your code. - -You can also add environment variables after your app is built, by again clicking the `Secrets` button at the bottom of the chat input box on the generation page. \ No newline at end of file diff --git a/docs/ai_builder/features/file_tree.md b/docs/ai_builder/features/file_tree.md new file mode 100644 index 0000000000..e09f76cda6 --- /dev/null +++ b/docs/ai_builder/features/file_tree.md @@ -0,0 +1,29 @@ +# File Tree + +The **File Tree** in Reflex Build lets you **view, organize, and manage all files and folders** in your project directly from the browser. It’s your central hub for navigating your app’s structure. + +## Key Features + +### Creating Folders +- Click the **New Folder** button to create a folder inside the currently selected directory. +- Enter a name and press **Enter** to confirm. +- Folders can be nested to organize your project hierarchically. + +### Creating Files +- Click the **New File** button to create a file inside the current folder. +- Enter a file name and extension (e.g., `main.py`) and press **Enter**. +- Files are immediately visible in the tree and ready for editing in the code editor. + +### Renaming Files or Folders +- Right-click on a file or folder and select **Rename**. +- Type the new name and press **Enter** to confirm. +- Renaming automatically updates references in your project where applicable. + +### Deleting Files or Folders +- Right-click on a file or folder and select **Delete**. +- Deleted items are permanently removed, so be careful when deleting important files. + +### Drag-and-Drop from System +- Drag files or folders from your computer directly into the File Tree. +- The editor will automatically import them into the selected folder. +- This works for individual files or entire folder structures, making adding assets or scripts quick and easy. diff --git a/docs/ai_builder/features/ide.md b/docs/ai_builder/features/ide.md index 6d7006dfac..5fef32dfc9 100644 --- a/docs/ai_builder/features/ide.md +++ b/docs/ai_builder/features/ide.md @@ -1,15 +1,12 @@ -# Reflex Build's IDE - -Reflex Build includes a powerful, in-browser IDE designed to streamline the entire development process—from writing code -to deploying your app. With an intuitive layout, real-time editing, and seamless integration with the rest of the -platform, the IDE empowers users to stay focused and productive without ever leaving the browser. +# Reflex Build IDE +Reflex Build includes a **powerful, in-browser IDE** built on **Monaco Editor**, designed to make coding fast, efficient, and enjoyable—all without leaving your browser.
-
- - -Reflex Build is an AI-powered platform that empowers users of all skill levels to create full-stack web applications -without writing any code—just by describing their ideas in plain English. Instead of hiring developers, users can -instantly generate web apps or websites, turning ideas into functional apps as quickly as possible. - - -Reflex Build provides everything you need to create stunning websites, front-end interfaces, and full-stack web -applications—all from a single browser tab, with no installation required. It includes AI-powered coding tools, -real-time collaboration (currently in beta), and easy project sharing to give you a head start on your app development -journey. - - +Reflex Build is an AI-powered platform that lets anyone create full-stack web apps just by describing ideas in plain English—no coding needed. It includes a full-fledged built-in IDE, real-time collaboration (beta), and project sharing—all in your browser, no installation required. ```python exec from typing import List, TypedDict diff --git a/docs/ai_builder/prompting/breaking_up_complex_prompts.md b/docs/ai_builder/prompting/breaking_up_complex_prompts.md deleted file mode 100644 index 2cfb3cdc6d..0000000000 --- a/docs/ai_builder/prompting/breaking_up_complex_prompts.md +++ /dev/null @@ -1,44 +0,0 @@ -# Breaking up complex prompts - -## Incremental Prompting - -Asking for incremental, smaller changes leads to better results, rather than asking for everything all in a single huge prompt. It's better to take it step-by-step rather than give the AI complex tasks all at once. - -### Example 1 -Too Complex: - -`Create a data visualization dashboard that includes user authentication, data integration, multiple charts, real-time updates, and export options.` - -Better Approach: - -Prompt 1: `Design a simple dashboard layout.` - -Prompt 2: `Now let's add a bar chart for visualizing sales data.` - -Prompt 3: `Now add user authentication.` - -Prompt 4: `Now integrate data from an external API.` - -Prompt 5: `Now add real-time updates for the chart.` - -Prompt 6: `Now add export options for the dashboard data.` - -### Example 2 -Too Complex: - -`Create an app that takes in data, processes it, generates reports, sends notifications, and allows users to filter results by various criteria.` - -Better Approach: - -Prompt 1: `Create an app that takes in data` - -Prompt 2: `Now add logic to process the data.` - -Prompt 3: `Now add a feature to generate reports.` - -Prompt 4: `Now add a feature to send notifications.` - -Prompt 5: `Now add a feature to filter results by various criteria.` - - - \ No newline at end of file diff --git a/docs/ai_builder/prompting/fixing_errors.md b/docs/ai_builder/prompting/fixing_errors.md deleted file mode 100644 index 11d7ab5926..0000000000 --- a/docs/ai_builder/prompting/fixing_errors.md +++ /dev/null @@ -1,4 +0,0 @@ -# Fixing Errors - - -Still to come! \ No newline at end of file diff --git a/pcweb/components/docpage/navbar/navbar.py b/pcweb/components/docpage/navbar/navbar.py index 90d6c92b54..57d9f5f3a4 100644 --- a/pcweb/components/docpage/navbar/navbar.py +++ b/pcweb/components/docpage/navbar/navbar.py @@ -406,7 +406,7 @@ def doc_section(): rx.el.ul( resource_item( "AI Builder Docs", - ai_builder.overview.what_is_reflex_build.path, + ai_builder.overview.best_practices.path, "bot", 0, ), diff --git a/pcweb/components/docpage/sidebar/sidebar.py b/pcweb/components/docpage/sidebar/sidebar.py index ca43b4b78d..49273e53b1 100644 --- a/pcweb/components/docpage/sidebar/sidebar.py +++ b/pcweb/components/docpage/sidebar/sidebar.py @@ -417,7 +417,7 @@ def sidebar_comp( rx.el.ul( sidebar_category( "Learn", - "/docs/ai-builder/overview/what-is-reflex-build", + "/docs/ai-builder/overview/best-practices", "bot", 0, ), @@ -503,7 +503,7 @@ def sidebar_comp( rx.el.ul( create_sidebar_section( "Overview", - ai_builder_pages.overview.what_is_reflex_build.path, + ai_builder_pages.overview.best_practices.path, ai_builder_overview_items, ai_builder_overview_index, url, diff --git a/pcweb/components/docpage/sidebar/sidebar_items/ai.py b/pcweb/components/docpage/sidebar/sidebar_items/ai.py index e30a3e5683..95badc1fa8 100644 --- a/pcweb/components/docpage/sidebar/sidebar_items/ai.py +++ b/pcweb/components/docpage/sidebar/sidebar_items/ai.py @@ -4,36 +4,40 @@ def get_sidebar_items_ai_builder_overview(): from pcweb.pages.docs import ai_builder - # !!! leave commented out sidebar items until they are filled out !!! - return [ create_item( "Overview", children=[ - ai_builder.overview.what_is_reflex_build, ai_builder.overview.best_practices, - # ai_builder.overview.use_cases, - # ai_builder.overview.quickstart, - # ai_builder.overview.frequently_asked_questions, + ai_builder.overview.what_is_reflex_build, + ai_builder.overview.tutorial, + ai_builder.overview.templates, ], ), create_item( "Features", children=[ - ai_builder.features.image_as_prompt, - ai_builder.features.templates, ai_builder.features.ide, - ai_builder.features.environment_variables, + ai_builder.features.editor_modes, + ai_builder.features.file_tree, + ai_builder.features.restore_checkpoint, + ai_builder.features.secrets, ai_builder.features.installing_external_packages, - ai_builder.features.download_app, - ai_builder.features.deploy_app, + ai_builder.features.integration_shortcut, + ai_builder.features.knowledge, + ai_builder.features.image_as_prompt, + ai_builder.features.interaction_modes, ], ), create_item( - "Prompting Guide", + "App Lifecycle", children=[ - # ai_builder.prompting.fixing_errors, - ai_builder.prompting.breaking_up_complex_prompts, + ai_builder.app_lifecycle.general, + ai_builder.app_lifecycle.fork_app, + ai_builder.app_lifecycle.deploy_app, + ai_builder.app_lifecycle.download_app, + ai_builder.app_lifecycle.copy_app, + ai_builder.app_lifecycle.share_app, ], ), create_item( @@ -41,6 +45,10 @@ def get_sidebar_items_ai_builder_overview(): children=[ ai_builder.integrations.github, ai_builder.integrations.database, + ai_builder.integrations.databricks, + ai_builder.integrations.azure, + ai_builder.integrations.google_auth, + ai_builder.integrations.open_ai, ], ), ] diff --git a/pcweb/components/docpage/sidebar/sidebar_items/item.py b/pcweb/components/docpage/sidebar/sidebar_items/item.py index d37a6842fd..b986c0f3d8 100644 --- a/pcweb/components/docpage/sidebar/sidebar_items/item.py +++ b/pcweb/components/docpage/sidebar/sidebar_items/item.py @@ -12,7 +12,12 @@ def create_item(route: Route, children=None): alt_name_for_next_prev = name else: alt_name_for_next_prev = "" - name = name.replace("Api", "API").replace("Cli", "CLI") + name = ( + name.replace("Api", "API") + .replace("Cli", "CLI") + .replace("Ai", "AI") + .replace("Ide", "IDE") + ) return SideBarItem( names=name, alt_name_for_next_prev=alt_name_for_next_prev, link=url )