Non first class integrations

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/figma.md

@@ -0,0 +1 @@
+Integration Coming Soon!

docs/ai_builder/files.md

@@ -0,0 +1,34 @@
+# Files
+
+To upload a file to the AI Builder click the `📎 Attach` button and select the file you want to upload from your computer. You can also drag and drop files directly into the chat window.
+
+This section does not cover uploading images. Check out ..... to learn more about uploading images.
+
+```md alert
+## Supported File Types
+The AI Builder currently supports the following file types for upload and processing:
+1. `.pdf`
+2. `.doc`
+3. `.docx`
+4. `.xls`
+5. `.xlsx`
+6. `.ppt`
+7. `.pptx`
+8. `.odt`
+9. `.ods`
+10. `.odp`
+11. `.rtf`
+12. `.csv`
+13. `.txt`
+14. `.md`
+15. `.markdown`
+16. `.json`
+17. `.xml`
+18. `.yaml`
+19. `.yml`
+20. `.tsv`
+```
+
+The files you upload will automatically be added to the `assets/` folder of your app, and the AI Builder will be able to read and process their contents as part of your prompts.
+
+The maximum number of files you can upload at a time is `5`. The maximum file size for uploads is `5MB`. If you need to work with larger files, consider breaking them into smaller chunks or using external storage solutions and linking to them via APIs.

docs/ai_builder/images.md

@@ -0,0 +1,47 @@
+# Images
+
+## Upload an image as context for AI Builder
+
+To upload an image to the AI Builder that will be used as context for the AI builder to build an app that is similar to the image click the `📎 Attach` button and select the file you want to upload from your computer. You can also drag and drop files directly into the chat window.
+
+```md alert
+## Supported Image Types
+The AI Builder currently supports the following image types for upload and processing:
+1. `.png`
+2. `.jpg`
+3. `.jpeg`
+4. `.webp`
+5. `.gif`
+6. `.svg`
+7. `.bmp`
+8. `.tiff`
+9. `.tif`
+10. `.ico`
+```
+
+
+## Upload an image to be used within the app
+
+If you want to upload an image to be used within the app, such as a company logo, then you can manually upload it to the `assets/` folder within the `code` tab, as shown below.
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/add_images_to_assets.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",
+)
+```
+
+
+Video uploads are not currently supported but are coming soon!

docs/ai_builder/integrations/database.md

@@ -102,3 +102,10 @@ Database (mydatabase) - Target database name
    - Analyzes the database structure
    - Generates SQLAlchemy models
    - Makes schema available to the AI for queries
+
+
+```md alert
+# NoSQL Databases
+
+NoSQL databases (e.g., MongoDB, DynamoDB) can be accessed via Python SDKs which the AI Builder can install if you prompt for it. The first class Database integration currently supports only SQL databases.
+```

docs/ai_builder/python_libraries.md

@@ -0,0 +1,36 @@
+# Python Libraries
+
+
+Not every service or tool has a first-class integration — but your app can still connect to **any Python library** directly. By leveraging the built-in Python runtime, the AI Builder can install packages, import libraries, and call their functions from workflows or components. This gives you maximum flexibility to extend your app with the broader Python ecosystem.
+
+When you ask for a certain functionality the AI Builder will first check if there is a `first-class integration` available. If not, it will `search the web` to try and find a relevant Python library to fulfill your request. If it finds one, it will install the package and ask you to set any `API keys` that are required.
+
+
+## Example Use Cases
+
+### Slack 
+
+There is no built-in integration for Slack. But if you ask the AI Builder to send a message to a Slack channel, it will research itself the best implementation and then use the `slack_sdk` Python package to send the message.
+
+
+### Scikit-learn
+
+There is no built-in integration for Scikit-learn. But if you ask the AI Builder to classify some text using scikit-learn, it will research itself the best implementation and then use the `scikit-learn` Python package to load a pre-trained model and classify the text.
+
+
+
+
+## Adding Custom Knowledge
+
+If you are working with a specialized / less well-known library, you can add custom knowledge to help the AI Builder understand how to use it. Simply provide a brief description of the library, its purpose, and example usage in the **Knowledge** section of your app settings. This will guide the AI Builder when it attempts to call functions from that library.
+
+```md alert warning
+# Where to find the Knowledge Section
+
+![Where to find the Knowledge Section](/ai_builder/find_knowledge_tab.webp)
+```
+
+
+## What is Not Supported
+
+There are a very small number of libraries that are not supported due to their size. For example, large machine learning frameworks like `torch` or `tensorflow` are not supported directly. In these cases, we recommend using a first-class integration that can emulate similar functionality (e.g., the Replicate integration for running ML models in the cloud).

docs/ai_builder/urls.md

@@ -0,0 +1,31 @@
+# URLs
+
+When you **paste a URL directly into the AI Builder chat**, the AI will automatically decide how to handle it depending on your prompt.
+
+You can use URLs to **copy a page’s design** or **extract its content**, without needing to set up any integration.
+
+## How It Works
+
+* If you say something like **“copy the design”** or **“use this layout”**, the AI will:
+
+  * Take a **screenshot** of the page.
+  * Use it as a **visual reference** to recreate the UI in your app.
+  * Allow you to **customize** the generated design afterward.
+
+* 🪄 If you say something like **“get the content”**, **“scrape this page”**, or just paste the URL without mentioning design, the AI will:
+
+  * **Scrape the content** of the page (text, links, images, metadata).
+  * Return it as structured data that can be used in components, workflows, or AI actions.
+
+## Example Prompts
+
+* “Copy the design of this page.”
+* “Scrape the content from this blog post.”
+* “Get all the product details from this URL.”
+* (Paste the URL alone) → AI will assume content scraping by default.
+
+## Notes
+
+* **Public pages only:** The AI can only process URLs that are publicly accessible.
+* **Editable:** Both the generated design and scraped content can be modified after processing.
+

docs/ai_builder/webhooks.md

@@ -0,0 +1,44 @@
+# Webhooks
+
+Webhooks allow your app to **send data to external services** in real time. You provide the AI Builder with a **webhook URL** created in another platform, and it can **automatically send payloads** to that URL when workflows are triggered.
+
+This is a simple and powerful way to integrate with services that support incoming webhooks, even if there’s no first-class integration.
+
+## What You Can Do
+
+With outgoing webhooks, your app can:
+
+* **Send structured payloads** to any service that supports incoming webhooks (e.g., Slack, Zapier, Make, Discord).
+* **Trigger external workflows** when events happen in your app.
+* **Push real-time updates** to third-party systems without writing custom backend code.
+* Chain webhook calls with other integrations or AI actions.
+
+## Step 1: Create a Webhook in the External Service
+
+1. Go to the external service you want to connect (e.g., Slack, Zapier, Discord, Make).
+2. Create a new **incoming webhook** in that service.
+3. Copy the **webhook URL** it provides.
+
+
+## Step 2: Add the Webhook URL to AI Builder
+
+1. In the AI Builder chat paste the **webhook URL** you created in the external service.
+2. You can then instruct the AI to **send data to this URL** whenever a workflow is triggered.
+3. Optionally define the **payload structure** (e.g., JSON body) and when it should be sent.
+
+> 💡 Example: “Send user signup data to this webhook whenever a user signs up.”
+
+## Step 3: Sending Payloads
+
+* The AI Builder will write the code to send a `POST` request to the webhook URL with the payload you define.
+* The payload can include **dynamic data** from your app — such as user info, state variables, or model outputs.
+* You can trigger these webhook calls from buttons, events, workflows, or automations.
+
+
+## Step 4: Notes
+
+* **Security:** Only use webhook URLs from trusted services — they will receive your data as-is.
+* **Formatting:** Make sure the payload matches the expected format of the external service.
+* **Chaining:** You can use multiple webhooks or combine them with other integrations.
+* **Use cases:** Slack alerts, CRM updates, triggering automations in Zapier or Make, notifying custom systems.
+

pcweb/components/docpage/sidebar/sidebar.py

@@ -423,7 +423,7 @@ def sidebar_comp(
                 rx.State.router.page.path.startswith("/docs/ai-builder/"),
                 rx.el.ul(
                     sidebar_category(
-                        "Learn",
+                        "AI Builder",
                         ai_builder_pages.overview.best_practices.path,
                         "bot",
                         0,
@@ -434,12 +434,12 @@ def sidebar_comp(
                         "plug",
                         1,
                     ),
-                    sidebar_category(
-                        "Integrations",
-                        ai_builder_pages.integrations.overview.path,
-                        "codesandbox",
-                        2,
-                    ),
+                    # sidebar_category(
+                    #     "Integrations",
+                    #     ai_builder_pages.integrations.overview.path,
+                    #     "codesandbox",
+                    #     2,
+                    # ),
                     class_name="flex flex-col items-start gap-1 w-full list-none",
                 ),
                 # If the path doesn't start with /docs/cloud, check for general docs
@@ -521,6 +521,13 @@ def sidebar_comp(
                                 ai_builder_overview_index,
                                 url,
                             ),
+                            create_sidebar_section(
+                                "Integrations",
+                                ai_builder_pages.integrations.overview.path,
+                                ai_builder_integrations,
+                                ai_builder_integrations_index,
+                                url,
+                            ),
                             class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
                         ),
                     ),
@@ -537,19 +544,19 @@ def sidebar_comp(
                             class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
                         ),
                     ),
-                    (
-                        2,
-                        rx.el.ul(
-                            create_sidebar_section(
-                                "Integration",
-                                ai_builder_pages.integrations.overview.path,
-                                ai_builder_integrations,
-                                ai_builder_integrations_index,
-                                url,
-                            ),
-                            class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
-                        ),
-                    ),
+                    # (
+                    #     2,
+                    #     rx.el.ul(
+                    #         create_sidebar_section(
+                    #             "Integration",
+                    #             ai_builder_pages.integrations.overview.path,
+                    #             ai_builder_integrations,
+                    #             ai_builder_integrations_index,
+                    #             url,
+                    #         ),
+                    #         class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                    #     ),
+                    # ),
                 ),
                 rx.cond(  # pyright: ignore [reportCallIssue]
                     rx.State.router.page.path.startswith("/docs/"),