Integrations updates

docs/ai_builder/features/connect_to_github.md

@@ -0,0 +1,36 @@
+---
+tags: DevTools
+description: Integrate with GitHub to automate workflows and interact with your code repositories.
+---
+
+# Connecting to Github
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+The Github integration is important to make sure that you don't lose your progress. It also allows you to revert to previous versions of your app.
+
+
+```python eval
+rx.image(
+    src="/ai_builder/connecting_to_github.gif",
+    height="auto",
+    padding_bottom="2rem",
+)
+```
+
+The GitHub integration allows you to:
+
+- Save your app progress
+- Work on your code locally and push your local changes back to Reflex.Build
+
+
+## Github Commit History
+
+The commit history is a great way to see the changes that you have made to your app. You can also revert to previous versions of your app from here.
+
+```python eval
+image_zoom(rx.image(src="/ai_builder/github_commit_history.png"))
+```

docs/ai_builder/integrations/airtable.md

@@ -25,7 +25,7 @@ With the Airtable Integration, your app can:
 4. Under **Personal access tokens**, click **Create token**.
 5. Add the appropriate scopes (e.g. `data.records:read` and `data.records:write`).
 6. Copy your API token.
-   * Example: `patl2IhDFoZK0Rabc12345xyz`
+   * Example: `patxxxxxxxxxxxxxxxxxxxx`
 
 ## Step 2: Configure the Integration in Your App
 

docs/ai_builder/integrations/azure_auth.md

@@ -11,14 +11,20 @@ import reflex as rx
 from reflex_image_zoom import image_zoom
 ```
 
+
+## Step 1: Set Up Azure App Registration
+
+Before connecting, you need to register your app in Azure Portal:
+
+1 - Go to [Azure Portal](https://portal.azure.com) → **App Registrations**
+
+2 - Click **New registration** as shown in the image below:
+
 ```python eval
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/integrations/azure_auth_light.webp",
-                "/ai_builder/integrations/azure_auth_dark.webp",
-            ),
+            src="/ai_builder/integrations/azure_auth_1.webp",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -28,31 +34,60 @@ rx.el.div(
 )
 ```
 
-## Step 1: Set Up Azure App Registration
-
-Before connecting, you need to register your app in Azure Portal:
+3 - Register your app. Ensure that for the Redirect URI you select **Web** and enter the following URI that you find in the Azure Auth Manager integration settings in AI Builder:
+   ```
+   https://{your-sandbox}/authorization-code/callback
+   ```
 
-1. Go to [Azure Portal](https://portal.azure.com) → **App Registrations**
-2. Click **New registration**
-3. Configure your app settings
-4. In **Authentication**, add the Web Redirect URI: `https://3a992b51-c34a-405a-b90c-4b3320eb3b6a.fly.dev/authorization-code/callback`
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/azure_auth_2.webp",
+            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",
+)
+```
 
-## Step 2: Gather Your Credentials
+4 - On the next page get your `client_id` (`AZURE_CLIENT_ID`) and `tenant_id` (`AZURE_VALID_TENANT_IDS`) from the **Overview** tab.
 
-After registering your app, collect the following information:
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/azure_auth_3.webp",
+            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",
+)
+```
 
-- **AZURE_CLIENT_ID**: `12345678-1234-1234-1234-123456789abc`
-  *Your application (client) ID from App Registration*
+5 - Next click `Add a certificate or secret` and copy the generated secret value (`AZURE_CLIENT_SECRET`).
 
-- **AZURE_CLIENT_SECRET**: `abcdef123456~ABCdef123456-ABCdef123456`
-  *Client secret generated in Certificates & secrets*
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/azure_auth_4.webp",
+            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",
+)
+```
 
-- **AZURE_VALID_TENANT_IDS**: `87654321-4321-4321-4321-210987654321`
-  *Comma-separated list of tenant IDs that can access your app*
 
-> **Note:** Keep your client secret secure and use different registrations for development, staging, and production environments.
 
-## Step 3: Configure the Integration
+## Step 2: Configure the Integration
 
 1. Go to the **Integrations** section in your app settings by clicking **`@`** and then clicking the **Integrations** tab at the top.
 2. Click **Add** next to Azure Auth Manager.

docs/ai_builder/integrations/cohere.md

@@ -13,7 +13,6 @@ The **Cohere Integration** allows your app to use [Cohere’s](https://cohere.co
 2. Log in or create an account.  
 3. Navigate to **API Keys** in your account settings.  
 4. Click **Create Key**, give it a descriptive name (e.g., “AI Builder”), and copy the key.  
-   - **Example:** `kY9y0xxxxxxxxxxxxxxxxxxxxxxxxxxx`
 
 
 ## Step 2: Configure the Integration in Your App

docs/ai_builder/integrations/database.md

@@ -33,6 +33,7 @@ rx.el.div(
 - **PostgreSQL** - Recommended for production applications
 - **MySQL** - Popular open-source database
 - **SQLite** - Lightweight database, perfect for development and small applications
+- **MSSQL** - Microsoft SQL Server support
 
 ## Getting Started
 
@@ -51,10 +52,10 @@ The Database Integration offers two convenient ways to connect:
 
 This user-friendly form breaks down your database connection into individual fields:
 
-**For PostgreSQL and MySQL:**
-- **Database Type**: Select from dropdown (PostgreSQL/MySQL)
+**For PostgreSQL, MySQL and MSSQL:**
+- **Database Type**: Select from dropdown (PostgreSQL/MySQL/MSSQL)
 - **Hostname**: Your database server address (e.g., `localhost`, `db.company.com`)
-- **Port**: Automatically filled (PostgreSQL: 5432, MySQL: 3306) or specify custom port
+- **Port**: Automatically filled (PostgreSQL: 5432, MySQL: 3306, MSSQL: 1433) or specify custom port
 - **Username**: Your database username
 - **Password**: Your database password (securely handled)
 - **Database Name**: The specific database to connect to
@@ -77,6 +78,11 @@ postgresql://username:password@hostname:port/database_name
 mysql://username:password@hostname:port/database_name
 ```
 
+**MSSQL:**
+```
+mssql://username:password@hostname:port/database_name
+```
+
 **SQLite:**
 ```
 sqlite:///path/to/database.sqlite

docs/ai_builder/integrations/gemini.md

@@ -12,7 +12,6 @@ The **Gemini Integration** allows your app to use [Google’s Gemini models](htt
 2. Navigate to **Get API Key** or create a new key for your project.
 3. Copy the generated key.
 
-   * **Example:** `AIzaSyDxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`
 
 ## Step 2: Configure the Integration in Your App
 

docs/ai_builder/integrations/github.md

@@ -1,36 +1,48 @@
 ---
-tags: DevTools
-description: Integrate with GitHub to automate workflows and interact with your code repositories.
+tags: Developer Tools
+description: Connect your app to GitHub to automate workflows, manage repositories, and integrate developer operations.
 ---
+# GitHub Integration
 
-# Connecting to Github
+The **GitHub Integration** lets your app connect directly to [GitHub](https://github.com) to automate actions, fetch data, and build powerful developer workflows. Once connected, your app can interact with repositories, issues, pull requests, and more.
 
-```python exec
-import reflex as rx
-from reflex_image_zoom import image_zoom
-```
+## What You Can Do
 
-The Github integration is important to make sure that you don't lose your progress. It also allows you to revert to previous versions of your app.
+With GitHub, your app can:
+- Fetch and display repository data (commits, branches, issues, etc.).  
+- Create or update issues, pull requests, and discussions.  
+- Trigger workflows or CI/CD pipelines.  
+- Sync GitHub activity into your app’s dashboards or automations.  
+- Build custom developer tools using GitHub’s API.
 
+## Step 1: Generate a Personal Access Token
 
-```python eval
-rx.image(
-    src="/ai_builder/connecting_to_github.gif",
-    height="auto",
-    padding_bottom="2rem",
-)
+1. Go to your [GitHub Settings](https://github.com/settings/tokens).  
+2. Navigate to **Developer settings → Personal access tokens**.  
+3. Click **Generate new token** (classic or fine-grained).  
+4. Select the required scopes (e.g., `repo`, `workflow`, `read:user`).  
+5. Copy the token.  
+   *Example:*  
 ```
 
-The GitHub integration allows you to:
+ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
-- Save your app progress
-- Work on your code locally and push your local changes back to Reflex.Build
+```
 
+> 💡 Fine-grained tokens are recommended for better security.
 
-## Github Commit History
+## Step 2: Configure the Integration in Your App
 
-The commit history is a great way to see the changes that you have made to your app. You can also revert to previous versions of your app from here.
+1. In your app, go to **Integrations → Add GitHub**.  
+2. Paste your **GitHub Personal Access Token** in the input field.  
+3. Click **Connect** to validate and save your integration.
+
+Once connected, your app can start interacting with GitHub through workflows and actions.
+
+## Step 3: Notes
+
+* **Keep your token secure:** Never expose your GitHub token in public code.  
+* **Use fine-grained permissions:** Limit access to only what’s needed.  
+* **API rate limits:** GitHub imposes API limits, so plan automations accordingly.  
+* **Combine with AI:** For example, auto-generate release notes from commits or summarize PRs with LLMs.
 
-```python eval
-image_zoom(rx.image(src="/ai_builder/github_commit_history.png"))
-```

docs/ai_builder/integrations/google_auth.md

@@ -12,14 +12,69 @@ import reflex as rx
 from reflex_image_zoom import image_zoom
 ```
 
+
+## Step 1: Create a Google OAuth Client
+
+1 - Go to the [Google Cloud Console](https://console.cloud.google.com/)
+
+2 - Navigate to **APIs & Services → Credentials**
+
+3 - Click **Create Credentials**
+
+
 ```python eval
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/integrations/google_light.webp",
-                "/ai_builder/integrations/google_dark.webp",
-            ),
+            src="/ai_builder/integrations/google_auth_1.webp",
+            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",
+)
+```
+
+4 - Choose **OAuth client ID**.
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/google_auth_2.webp",
+            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",
+)
+```
+
+5 - Choose **Web Application** as the application type, name the application and enter your sandbox URL, which you get from the Google Auth integration panel, as the **Authorized JavaScript Origin** and **Authorized Redirect URIs**.
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/google_auth_3.webp",
+            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",
+)
+```
+
+6 - Copy the generated **Client ID** (`GOOGLE_CLIENT_ID`) and **Client Secret** (`GOOGLE_CLIENT_SECRET`).
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/google_auth_4.webp",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -29,19 +84,7 @@ rx.el.div(
 )
 ```
 
-## Step 1: Create a Google OAuth Client
 
-1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
-2. Navigate to **APIs & Services → Credentials**.
-3. Click **Create Credentials → OAuth Client ID**.
-4. Select **Web Application** as the application type.
-5. Add the following **Authorized JavaScript Origin**:
-   - https://3a992b51-c34a-405a-b90c-4b3320eb3b6a.fly.dev
-   - The URL can be copied directly from the Google Auth integration panel.
-6. Set your authorized redirect URIs to match your app environment.
-7. Save the client and copy the following credentials:
-   - **Client ID**: `YOUR_GOOGLE_CLIENT_ID`
-   - **Client Secret**: `YOUR_GOOGLE_CLIENT_SECRET`
 
 ## Step 2: Configure the Integration in Your App