add docs

Author: carlosabadia

docs/ai_builder/apis.md

@@ -0,0 +1,41 @@
+# API Integration
+
+Not every service has a first-class integration — but your app can connect to **any external API** directly. By using standard HTTP requests, you can integrate with virtually any platform, fetch or send data, and trigger workflows without needing a prebuilt connector.
+
+This gives you full flexibility to work with modern REST, GraphQL, or other web APIs.
+
+## What You Can Do
+
+With custom API calls, your app can:
+- Connect to **any REST or GraphQL API** on the web.  
+- **Send and receive data** from external services.  
+- Trigger actions like creating records, sending messages, or fetching analytics.  
+- Build **custom automations** and workflows around APIs.  
+- Chain API calls with other integrations or AI actions for powerful flows.
+
+## Step 1: Get API Access
+
+1. Identify the service you want to connect to.  
+2. Check its developer documentation for API access requirements.  
+3. Obtain the necessary credentials (e.g., **API key**, **token**, or **OAuth**).  
+4. Store credentials securely using environment variables — **never** hardcode secrets.
+
+   *Example:*  
+   - **API Key:** `sk-xxxxxxxxxxxxxxxx`  
+   - **Base URL:** `https://api.example.com/v1/`
+
+## Step 2: Hook up with your App
+
+1. In the AI Builder navigate to the `secrets` tab and add your API credentials as secrets.
+2. Then prompt the AI to use these secrets to do what you want and it will install the necessary libraries and set up the API calls for you.
+
+## Step 3: Notes
+
+* **Keep secrets safe:** Use environment variables or secret storage for API keys.
+* **Check rate limits:** Many APIs have request limits — build accordingly.
+* **Combine with AI or other integrations:** For example, fetch data via API and summarize it using an LLM.
+
+
+With API integrations, you can connect your app to **almost any modern platform or service**, giving you unlimited extensibility beyond native integrations.
+
+

docs/ai_builder/app_lifecycle/copy_app.md

@@ -0,0 +1,51 @@
+# 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
+
+def render_image():
+    return rx.el.div(
+        rx.image(
+                src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/copy_light.avif",
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+        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 on the arrow down icon next to the deploy button and click on the **Copy** button. You can also do this in the Settings tab.
+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,40 @@
+# 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 top right corner of Reflex Build, as shown below:
+
+
+
+```python exec
+import reflex as rx
+
+def render_image():
+    return rx.el.div(
+        rx.image(
+                src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/deploy_light.avif",
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+        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,34 @@
+# 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
+
+def render_image():
+    return rx.el.div(
+        rx.image(
+                src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/download_light.avif",
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+        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, click on the arrow down icon next to the deploy button and click on the **Download** button. You can also do this in the Settings tab.
+2. 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,43 @@
+# 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
+```
+
+```python eval
+rx.el.div(
+    rx.image(
+            src="https://web.reflex-assets.dev/ai_builder/overview/fork_template_light.avif",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+    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 top 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,50 @@
+# 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
+
+def render_image():
+    return rx.el.div(
+        rx.image(
+                src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/general_light.avif",
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+        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, on the top bar click the more 3 dots icon and then click the **Settings** tab.
+2. This will open the **Settings** 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.
+
+- **Change App Visibility**
+  Update the visibility of your app to public or private.
+
+- **View App ID**
+  Find the unique identifier for your app, which can be used for integrations or support.
+
+- **Fork App**
+  Fork your app to create a copy of it.
+
+-- **Download App**
+  Download your app to your local machine.
+
+- **Delete App**
+  Permanently remove an app you no longer need. **Warning:** This action cannot be undone.

docs/ai_builder/app_lifecycle/share_app.md

@@ -0,0 +1,49 @@
+# 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
+
+def render_image():
+    return rx.el.div(
+        rx.image(
+                src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/share_light.avif",
+                class_name="p-2 rounded-md h-auto",
+                border=f"0.81px solid {rx.color('slate', 5)}",
+            ),
+        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 on the arrow down icon next to the deploy button and click on the **Share** button.
+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.

docs/ai_builder/features/automated_testing.md

@@ -0,0 +1,55 @@
+# AI Testing Feature
+
+## Overview
+
+The Testing feature allows you to automatically test your generated applications for common issues and functionality problems. The AI will analyze your app and identify potential bugs, broken links, navigation issues, and other problems.
+
+
+```python exec
+import reflex as rx
+```
+
+```python eval
+rx.el.div(
+    rx.image(
+            src=rx.color_mode_cond(
+                "https://web.reflex-assets.dev/ai_builder/features/test_light.webp",
+                "https://web.reflex-assets.dev/ai_builder/features/test_dark.webp",
+            ),
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+## How to Use
+
+1. **Start Testing**: Type "test this app" or similar command to activate testing mode
+2. **AI Analysis**: The AI will automatically switch to testing mode and begin analyzing your application
+3. **Review Results**: The preview tab switches to "Testing" mode to show the testing process and results
+
+## What Gets Tested
+
+The AI automatically checks for:
+
+- **Broken Navigation**: Links that don't work or lead to missing pages
+- **Non-functional Buttons**: Buttons that don't respond or trigger errors
+- **Broken Links**: External or internal links that return errors
+- **UI/UX Issues**: Interface elements that don't function as expected
+- **Data Flow Problems**: Issues with forms, inputs, and data handling
+- **Layout Issues**: Visual or structural problems with the interface
+
+## Testing Interface
+
+When testing is active:
+- The preview tab changes to "Testing" mode
+- You can see the AI interact with your application in real-time
+- Issues and results are reported as they're discovered
+- The testing process is visual and interactive
+
+## Benefits
+
+- **Quality Assurance**: Catch issues before deployment
+- **Time Saving**: Automated testing is faster than manual checking
+- **Comprehensive Coverage**: Tests multiple aspects of your application