add resend + move integration into docs + fixes

Author: LineIndent

assets/ai_builder/integrations/resend_dark.webp

@@ -0,0 +1,7 @@
+```python exec
+from pcweb.pages.integrations.integration import integration_page
+```
+
+```python eval
+integration_page()
+```

assets/ai_builder/integrations/resend_light.webp

@@ -0,0 +1,53 @@
+---
+tags: Communication
+description: Send transactional and automated emails directly from your AI-generated applications using Resend.
+---
+# Resend Integration
+
+The **Resend Integration** allows your AI-generated apps to send emails directly from workflows, user actions, or automated triggers — perfect for notifications, confirmations, or any email-based communication your app needs.
+
+```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/integrations/resend_light.webp",
+                "/ai_builder/integrations/resend_dark.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",
+)
+```
+
+## What You Can Do
+
+With the Resend Integration, your app can:
+- Send automated transactional emails
+- Notify users of important events (signups, job completions, etc.)
+- Integrate email sending into AI workflows
+- Use dynamic variables in your message body (e.g. user name, order ID)
+
+## Step 1: Get Your Resend API Key
+
+1. Go to [Resend](https://resend.com/).
+2. Log in or create a free account.
+3. Navigate to **API Keys** from the dashboard sidebar.
+4. Click **Create API Key**, give it a name (e.g. “AI Builder”), and copy it.
+   - Example: `re_1234567890abcdefghijklmn`
+
+## Step 2: Configure the Integration in Your App
+
+1. Open your app in the **AI Builder**.
+2. Click the **Settings** gear icon and navigate to the **Integrations** tab.
+3. Find and enable the **Resend** integration.
+4. Paste your **API Key** in the input field.
+5. Click **Connect** to confirm the connection.

assets/integrations/resend.svg

@@ -8,7 +8,7 @@
 from pcweb.constants import ENTERPRISE_DOCS_URL
 from pcweb.styles.colors import c_color
 
-from .sidebar_items.ai import ai_builder_overview_items, mcp_items
+from .sidebar_items.ai import ai_builder_overview_items, mcp_items, ai_builder_integrations
 from .sidebar_items.component_lib import component_lib, graphing_libs
 from .sidebar_items.enterprise import (
     enterprise_items,
@@ -255,6 +255,7 @@ def append_to_items(items, flat_items):
     + graphing_libs
     + recipes
     + ai_builder_overview_items
+    + ai_builder_integrations
     + api_reference
     + enterprise_items,
     flat_items,
@@ -390,6 +391,7 @@ def sidebar_comp(
     #
     cli_ref_index: list[int],
     ai_builder_overview_index: list[int],
+    ai_builder_integrations_index: list[int],
     tutorials_index: list[int],
     width: str = "100%",
 ):
@@ -432,9 +434,9 @@ def sidebar_comp(
                     ),
                     sidebar_category(
                         "Integrations",
-                        "/integrations",
+                        ai_builder_pages.integrations.overview.path,
                         "codesandbox",
-                        3,
+                        2,
                     ),
                     class_name="flex flex-col items-start gap-1 w-full list-none",
                 ),
@@ -533,6 +535,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",
+                        ),
+                    ),
                 ),
                 rx.cond(  # pyright: ignore [reportCallIssue]
                     rx.State.router.page.path.startswith("/docs/"),
@@ -678,6 +693,7 @@ def sidebar(url=None, width: str = "100%") -> rx.Component:
 
     cli_ref_index = calculate_index(cli_ref, url)
     ai_builder_overview_index = calculate_index(ai_builder_overview_items, url)
+    ai_builder_integrations_index = calculate_index(ai_builder_integrations, url)
     mcp_index = calculate_index(mcp_items, url)
 
     return rx.box(
@@ -694,9 +710,9 @@ def sidebar(url=None, width: str = "100%") -> rx.Component:
             enterprise_usage_index=enterprise_usage_index,
             enterprise_component_index=enterprise_component_index,
             ai_builder_overview_index=ai_builder_overview_index,
+            ai_builder_integrations_index=ai_builder_integrations_index,
             cli_ref_index=cli_ref_index,
             mcp_index=mcp_index,
-            #
             width=width,
         ),
         on_mount=rx.call_script(Scrollable_SideBar),

assets/integrations/resend_light.svg

@@ -42,16 +42,37 @@ def get_sidebar_items_ai_builder_overview():
                 ai_builder.app_lifecycle.share_app,
             ],
         ),
+        # create_item(
+        #     "Integrations",
+        #     children=[
+        #         ai_builder.integrations.overview,
+        #         ai_builder.integrations.github,
+        #         ai_builder.integrations.database,
+        #         ai_builder.integrations.databricks,
+        #         ai_builder.integrations.azure_auth,
+        #         ai_builder.integrations.okta_auth,
+        #         ai_builder.integrations.google_auth,
+        #         ai_builder.integrations.open_ai,
+        #     ],
+        # ),
+    ]
+
+def get_ai_builder_integrations():
+    from pcweb.pages.docs import ai_builder
+
+    return [
         create_item(
             "Integrations",
             children=[
+                ai_builder.integrations.overview,
                 ai_builder.integrations.github,
                 ai_builder.integrations.database,
                 ai_builder.integrations.databricks,
                 ai_builder.integrations.azure_auth,
                 ai_builder.integrations.okta_auth,
                 ai_builder.integrations.google_auth,
                 ai_builder.integrations.open_ai,
+                ai_builder.integrations.resend,
             ],
         ),
     ]
@@ -72,4 +93,5 @@ def get_sidebar_items_mcp():
 
 
 ai_builder_overview_items = get_sidebar_items_ai_builder_overview()
+ai_builder_integrations = get_ai_builder_integrations()
 mcp_items = get_sidebar_items_mcp()

docs/ai_builder/integrations/overview.md

@@ -21,7 +21,6 @@
 from .demo.book_demo import book_demo as book_demo
 from .booked import booked as booked
 from .to_be_booked import to_be_booked as to_be_booked
-from .integrations.integration import integration_page
 
 routes = [
     *[r for r in locals().values() if isinstance(r, Route) and r.add_as_page],

docs/ai_builder/integrations/resend.md

@@ -6,7 +6,7 @@
 from .integration_header import integration_header
 from .integration_gallery import integration_filters, integration_gallery, integration_request_form
 
-@mainpage(path="/integrations", title="Reflex · Integrations", meta=meta_tags)
+# @mainpage(path="/integrations", title="Reflex · Integrations", meta=meta_tags)
 def integration_page():
     return rx.el.div(
         integration_header(),