hubspot, huggingface, langchain

Author: Tom Gotsman

assets/ai_builder/integrations/hubspot.webp

@@ -1,5 +1,5 @@
 ---
-tags: Database
+tags: Data Infrastructure
 description: Connect your apps to Airtable to read, create, and update records in real time.
 ---
 # Airtable Integration
@@ -25,7 +25,6 @@ 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`
 
 ## Step 2: Configure the Integration in Your App

docs/ai_builder/integrations/airtable.md

@@ -0,0 +1,49 @@
+---
+tags: Data Infrastructure
+description: Connect your apps to HubSpot to manage contacts, companies, deals, and marketing workflows.
+---
+# HubSpot Integration
+
+The **HubSpot Integration** allows your app to use [HubSpot](https://www.hubspot.com/) as a CRM and marketing automation platform. Once connected, your app can sync leads, manage contacts, update pipelines, and trigger workflows directly from user actions or automated events.
+
+## Step 1: Obtain a HubSpot Access Token
+
+1. Go to your [HubSpot Developer Account](https://developers.hubspot.com/).  
+2. Navigate to **App → Private Apps** in your account settings.  
+3. Click **Create Private App**, configure scopes (e.g., `crm.objects.contacts.read/write`, `crm.schemas.companies.read`), and save.  
+4. Copy the **Access Token** from the Auth tab.
+   * **Example:** `pat-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx`
+
+```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/integrations/hubspot.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: Configure the Integration in Your App
+
+1. Go to **Integrations → Add HubSpot** in your app settings.  
+2. Paste your **HubSpot Access Token** in the input field.  
+3. Click **Connect** to validate and save your integration.
+
+Once connected, your app can sync and manage HubSpot data directly from workflows and UI actions.
+
+## Step 3: Notes
+
+* **Keep your token secure:** Do not hardcode your HubSpot token in public code repositories.  
+* **Use environment-specific tokens:** Separate dev, staging, and production tokens to manage access.  
+* **Secure API access:** The token allows your app to interact with HubSpot endpoints securely and efficiently.
+

docs/ai_builder/integrations/hubspot.md

@@ -0,0 +1,42 @@
+---
+tags: AI
+description: Connect your apps to Hugging Face to access thousands of open models for text, vision, and multimodal tasks.
+---
+# Hugging Face Integration
+
+The **Hugging Face Integration** allows your app to use [Hugging Face](https://huggingface.co/) models for a wide range of AI tasks — including text generation, embeddings, translation, classification, image processing, and more. You can integrate both hosted models (via API) or local open-source models through the Transformers library.
+
+## What You Can Do
+
+With Hugging Face, your app can:
+- Access thousands of pre-trained **text, vision, and multimodal models**.  
+- Run **text generation**, summarization, translation, and classification tasks.  
+- Use **embeddings** for search, retrieval, and similarity.  
+- Deploy models locally with `transformers` or connect to hosted inference endpoints.  
+- Fine-tune or customize open models for your specific use cases.  
+- Integrate community and enterprise models seamlessly into workflows.
+
+## Step 1: Obtain a Hugging Face Access Token (Optional)
+
+1. Go to [Hugging Face](https://huggingface.co/).  
+2. Log in or create a free account.  
+3. Navigate to **Settings → Access Tokens**.  
+4. Click **Create New token**, set its scope, and copy it.
+   * **Example:** `hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`
+
+
+## Step 2: Configure the Integration in Your App
+
+1. Go to **Integrations → Add Hugging Face** in your app settings.  
+2. Paste your **Hugging Face Access Token** if required.  
+3. Click **Connect** to validate and save your integration.
+
+Once connected, your app can use Hugging Face models directly in workflows, UI actions, or automations.
+
+## Step 3: Notes
+
+* **Keep your token secure:** Never expose your Hugging Face token in client-side code.  
+* **Use environment-specific tokens:** Separate dev, staging, and production access.  
+* **Open-source flexibility:** Models can be run fully locally or through Hugging Face’s hosted endpoints.  
+* **Broad ecosystem:** Hugging Face supports thousands of community and commercial models for rapid prototyping and production use.
+```

docs/ai_builder/integrations/huggingface.md

@@ -0,0 +1,26 @@
+---
+tags: AI
+description: Connect your apps to Langchain for advanced AI capabilities.
+---
+# Langchain Integration
+The **LangChain Integration** allows your app to leverage the power of [LangChain](https://langchain.com/), a popular open-source framework for building applications with large language models (LLMs). Once connected, your app can orchestrate complex AI workflows, chain together multiple model calls, and integrate with various data sources and tools seamlessly.
+
+
+You can:
+
+* **Chain model calls together** to create multi-step reasoning flows.
+* **Connect multiple providers** (e.g., OpenAI, Anthropic, Gemini, Groq) through a single interface.
+* **Build intelligent agents** that can use tools, call APIs, or access external data sources dynamically.
+* **Work with structured data** by combining LLMs with databases, vector stores, and retrieval systems.
+* **Create RAG (Retrieval-Augmented Generation)** pipelines to ground model outputs in your own data.
+* **Integrate tools and memory** so models can reason over past interactions and context.
+* **Deploy reusable components** like prompt templates, chains, and agents for production-grade applications.
+
+LangChain essentially acts as a **“glue layer”** between language models, data, and logic — enabling teams to build more **powerful and reliable AI apps** without reinventing core orchestration features.
+
+
+## Configure the Integration in Your App
+
+1. Click the **Settings** gear icon and navigate to the **Integrations** tab.
+2. Find and enable the **LangChain** integration.
+

docs/ai_builder/integrations/langchain.md

@@ -65,12 +65,22 @@ def get_ai_builder_integrations():
             "Integrations",
             children=[
                 ai_builder.integrations.overview,
-                ai_builder.integrations.github,
+                ai_builder.integrations.airtable,
+                ai_builder.integrations.anthropic,
+                ai_builder.integrations.azure_auth,
+                ai_builder.integrations.cartesia,
+                ai_builder.integrations.cohere,
                 ai_builder.integrations.database,
                 ai_builder.integrations.databricks,
-                ai_builder.integrations.azure_auth,
-                ai_builder.integrations.okta_auth,
+                ai_builder.integrations.descope,
+                ai_builder.integrations.gemini,
+                ai_builder.integrations.github,
                 ai_builder.integrations.google_auth,
+                ai_builder.integrations.groq,
+                ai_builder.integrations.hubspot,
+                ai_builder.integrations.huggingface,
+                ai_builder.integrations.langchain,
+                ai_builder.integrations.okta_auth,
                 ai_builder.integrations.open_ai,
                 ai_builder.integrations.resend,
             ],