ENG-9277: Add AI builder, Entreprise and hosting docs (#6277)

* add docs

* update tool build

* update video

* add deploy workflow

* style those two

* add margins

* move docs

* revert that

* remove cursor and padding

Author: carlosabadia

.github/workflows/deploy_docs.yml

@@ -0,0 +1,63 @@
+name: Deploy to production
+
+on:
+  push:
+    branches: ["main"]
+    paths:
+      - "reflex/docs/**"
+  workflow_dispatch:
+    # This allows manual triggering of the workflow
+
+concurrency:
+  group: deploy-prod
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+
+defaults:
+  run:
+    shell: bash
+
+env:
+  NODE_OPTIONS: "--max-old-space-size=8192"
+  FLY_API_TOKEN: ${{ secrets.PRD_FLY_API_TOKEN }}
+
+jobs:
+  deploy:
+    name: Deploy to Reflex Cloud
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    environment: production
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Clone Reflex Website Repo
+        uses: actions/checkout@v6
+        with:
+          repository: reflex-dev/reflex-web
+          ref: main
+          path: reflex-web
+          submodules: recursive
+
+      - name: Install the latest version of uv
+        uses: astral-sh/setup-uv@v7
+        with:
+          python-version: "3.12"
+          activate-environment: true
+
+      - name: Install the project
+        working-directory: ./reflex-web
+        run: uv sync --locked --no-dev
+
+      - name: Install local reflex with updated docs
+        run: uv pip install .
+
+      - name: Update Reflex CLI
+        run: uv pip install reflex-hosting-cli -U
+
+      - name: Deploy to Reflex
+        working-directory: ./reflex-web
+        run: |
+          reflex deploy --token ${{ secrets.PRD_TOKEN }} --no-interactive --config cloud-prod.yml

reflex/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.
+
+

reflex/docs/ai_builder/app_lifecycle/copy_app.md

@@ -0,0 +1,50 @@
+# 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="rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="w-full flex flex-col rounded-md",
+    )
+```
+
+```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.

reflex/docs/ai_builder/app_lifecycle/deploy_app.md

@@ -0,0 +1,39 @@
+# 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="rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="w-full flex flex-col rounded-md",
+    )
+```
+
+```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.

reflex/docs/ai_builder/app_lifecycle/download_app.md

@@ -0,0 +1,33 @@
+# 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="rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="w-full flex flex-col rounded-md",
+    )
+```
+
+```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.)

reflex/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="rounded-md h-auto",
+        border=f"0.81px solid {rx.color('slate', 5)}",
+    ),
+    class_name="w-full flex flex-col rounded-md",
+)
+```
+
+
+## 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.

reflex/docs/ai_builder/app_lifecycle/general.md

@@ -0,0 +1,49 @@
+# 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="rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="w-full flex flex-col rounded-md",
+    )
+```
+
+```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.

reflex/docs/ai_builder/app_lifecycle/share_app.md

@@ -0,0 +1,48 @@
+# 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="rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="w-full flex flex-col rounded-md",
+    )
+```
+
+```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.