diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml index d50385ce6..8ff87394b 100644 --- a/.github/workflows/deploy-dev.yml +++ b/.github/workflows/deploy-dev.yml @@ -27,6 +27,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v3 + with: + submodules: recursive - name: Install the latest version of uv uses: astral-sh/setup-uv@v6 diff --git a/.github/workflows/deploy-prd.yml b/.github/workflows/deploy-prd.yml index 22da844e0..aa6a022d8 100644 --- a/.github/workflows/deploy-prd.yml +++ b/.github/workflows/deploy-prd.yml @@ -25,6 +25,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v3 + with: + submodules: recursive - name: Install the latest version of uv uses: astral-sh/setup-uv@v6 diff --git a/.github/workflows/deploy-stg.yml b/.github/workflows/deploy-stg.yml index 06af9cb2e..3b325128f 100644 --- a/.github/workflows/deploy-stg.yml +++ b/.github/workflows/deploy-stg.yml @@ -27,6 +27,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v3 + with: + submodules: recursive - name: Install the latest version of uv uses: astral-sh/setup-uv@v6 diff --git a/.github/workflows/integration_tests.yml b/.github/workflows/integration_tests.yml index a2e7ba573..d880f2620 100644 --- a/.github/workflows/integration_tests.yml +++ b/.github/workflows/integration_tests.yml @@ -26,6 +26,8 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 + with: + submodules: recursive - name: Install the latest version of uv uses: astral-sh/setup-uv@v6 diff --git a/.github/workflows/unit_tests.yml b/.github/workflows/unit_tests.yml index 561709379..15c663e6b 100644 --- a/.github/workflows/unit_tests.yml +++ b/.github/workflows/unit_tests.yml @@ -38,6 +38,8 @@ jobs: runs-on: ${{ matrix.os }} steps: - uses: actions/checkout@v4 + with: + submodules: recursive - name: Install the latest version of uv uses: astral-sh/setup-uv@v6 diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 000000000..00cee9803 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "integrations-docs"] + path = integrations-docs + url = https://github.com/reflex-dev/integrations-docs diff --git a/assets/integrations/dark/ag_grid.svg b/assets/integrations/dark/ag_grid.svg deleted file mode 100644 index 2d321c4d9..000000000 --- a/assets/integrations/dark/ag_grid.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/assets/integrations/dark/airtable.svg b/assets/integrations/dark/airtable.svg deleted file mode 100644 index 8820eaf21..000000000 --- a/assets/integrations/dark/airtable.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/amazon_cognito.svg b/assets/integrations/dark/amazon_cognito.svg deleted file mode 100644 index b691023c1..000000000 --- a/assets/integrations/dark/amazon_cognito.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/anthropic.svg b/assets/integrations/dark/anthropic.svg deleted file mode 100644 index d2e0ee2d6..000000000 --- a/assets/integrations/dark/anthropic.svg +++ /dev/null @@ -1 +0,0 @@ -Anthropic \ No newline at end of file diff --git a/assets/integrations/dark/aws.svg b/assets/integrations/dark/aws.svg deleted file mode 100644 index d384987f4..000000000 --- a/assets/integrations/dark/aws.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/azure.svg b/assets/integrations/dark/azure.svg deleted file mode 100644 index 364c74468..000000000 --- a/assets/integrations/dark/azure.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/azure_auth.svg b/assets/integrations/dark/azure_auth.svg deleted file mode 100644 index 11c9ab56e..000000000 --- a/assets/integrations/dark/azure_auth.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/integrations/dark/azure_mssql.svg b/assets/integrations/dark/azure_mssql.svg deleted file mode 100644 index 364c74468..000000000 --- a/assets/integrations/dark/azure_mssql.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/azure_openai.svg b/assets/integrations/dark/azure_openai.svg deleted file mode 100644 index e9b133a6e..000000000 --- a/assets/integrations/dark/azure_openai.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/cartesia.svg b/assets/integrations/dark/cartesia.svg deleted file mode 100644 index 3bb0476cd..000000000 --- a/assets/integrations/dark/cartesia.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/cloudwatch.svg b/assets/integrations/dark/cloudwatch.svg deleted file mode 100644 index 6f966224d..000000000 --- a/assets/integrations/dark/cloudwatch.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/cohere.svg b/assets/integrations/dark/cohere.svg deleted file mode 100644 index c3dc5007a..000000000 --- a/assets/integrations/dark/cohere.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/database.svg b/assets/integrations/dark/database.svg deleted file mode 100644 index d938d4e7c..000000000 --- a/assets/integrations/dark/database.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/integrations/dark/databricks.svg b/assets/integrations/dark/databricks.svg deleted file mode 100644 index 91baf6483..000000000 --- a/assets/integrations/dark/databricks.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/integrations/dark/descope.svg b/assets/integrations/dark/descope.svg deleted file mode 100644 index 86811b7d3..000000000 --- a/assets/integrations/dark/descope.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/gemini.svg b/assets/integrations/dark/gemini.svg deleted file mode 100644 index ff9f5b1b6..000000000 --- a/assets/integrations/dark/gemini.svg +++ /dev/null @@ -1 +0,0 @@ -Gemini \ No newline at end of file diff --git a/assets/integrations/dark/github.svg b/assets/integrations/dark/github.svg deleted file mode 100644 index 73260d37f..000000000 --- a/assets/integrations/dark/github.svg +++ /dev/null @@ -1 +0,0 @@ - github [#142] Created with Sketch. diff --git a/assets/integrations/dark/google_auth.svg b/assets/integrations/dark/google_auth.svg deleted file mode 100644 index d738277ab..000000000 --- a/assets/integrations/dark/google_auth.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/integrations/dark/groq.svg b/assets/integrations/dark/groq.svg deleted file mode 100644 index cf90d287b..000000000 --- a/assets/integrations/dark/groq.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/hubspot.svg b/assets/integrations/dark/hubspot.svg deleted file mode 100644 index 4ab207374..000000000 --- a/assets/integrations/dark/hubspot.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/hugging_face.svg b/assets/integrations/dark/hugging_face.svg deleted file mode 100644 index 4553e9997..000000000 --- a/assets/integrations/dark/hugging_face.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - icon - - - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/integrations/dark/jira.svg b/assets/integrations/dark/jira.svg deleted file mode 100644 index 99f9b59e2..000000000 --- a/assets/integrations/dark/jira.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/langchain.svg b/assets/integrations/dark/langchain.svg deleted file mode 100644 index 34ec9b304..000000000 --- a/assets/integrations/dark/langchain.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/integrations/dark/linear.svg b/assets/integrations/dark/linear.svg deleted file mode 100644 index 99209b488..000000000 --- a/assets/integrations/dark/linear.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/mongodb.svg b/assets/integrations/dark/mongodb.svg deleted file mode 100644 index 2846535f4..000000000 --- a/assets/integrations/dark/mongodb.svg +++ /dev/null @@ -1 +0,0 @@ -file_type_mongo \ No newline at end of file diff --git a/assets/integrations/dark/notion.svg b/assets/integrations/dark/notion.svg deleted file mode 100644 index fd68d140f..000000000 --- a/assets/integrations/dark/notion.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/okta_auth.svg b/assets/integrations/dark/okta_auth.svg deleted file mode 100644 index 762407167..000000000 --- a/assets/integrations/dark/okta_auth.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/integrations/dark/openai.svg b/assets/integrations/dark/openai.svg deleted file mode 100644 index e9b133a6e..000000000 --- a/assets/integrations/dark/openai.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/perplexity.svg b/assets/integrations/dark/perplexity.svg deleted file mode 100644 index bc386f8a0..000000000 --- a/assets/integrations/dark/perplexity.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/replicate.svg b/assets/integrations/dark/replicate.svg deleted file mode 100644 index 75dde9bc4..000000000 --- a/assets/integrations/dark/replicate.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/assets/integrations/dark/resend.svg b/assets/integrations/dark/resend.svg deleted file mode 100644 index aec9f3643..000000000 --- a/assets/integrations/dark/resend.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/integrations/dark/roboflow.svg b/assets/integrations/dark/roboflow.svg deleted file mode 100644 index 4552ef0bb..000000000 --- a/assets/integrations/dark/roboflow.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/salesforce.svg b/assets/integrations/dark/salesforce.svg deleted file mode 100644 index d1c1ae1c1..000000000 --- a/assets/integrations/dark/salesforce.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/slack.svg b/assets/integrations/dark/slack.svg deleted file mode 100644 index 6d14c726c..000000000 --- a/assets/integrations/dark/slack.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - diff --git a/assets/integrations/dark/stripe.svg b/assets/integrations/dark/stripe.svg deleted file mode 100644 index 3e7061a49..000000000 --- a/assets/integrations/dark/stripe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/dark/supabase.svg b/assets/integrations/dark/supabase.svg deleted file mode 100644 index d3a062f8c..000000000 --- a/assets/integrations/dark/supabase.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/assets/integrations/dark/twilio.svg b/assets/integrations/dark/twilio.svg deleted file mode 100644 index 33198b819..000000000 --- a/assets/integrations/dark/twilio.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/ag_grid.svg b/assets/integrations/light/ag_grid.svg deleted file mode 100644 index 2d321c4d9..000000000 --- a/assets/integrations/light/ag_grid.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/assets/integrations/light/airtable.svg b/assets/integrations/light/airtable.svg deleted file mode 100644 index 8820eaf21..000000000 --- a/assets/integrations/light/airtable.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/amazon_cognito.svg b/assets/integrations/light/amazon_cognito.svg deleted file mode 100644 index b691023c1..000000000 --- a/assets/integrations/light/amazon_cognito.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/anthropic.svg b/assets/integrations/light/anthropic.svg deleted file mode 100644 index 8cc1f308b..000000000 --- a/assets/integrations/light/anthropic.svg +++ /dev/null @@ -1 +0,0 @@ -Anthropic \ No newline at end of file diff --git a/assets/integrations/light/aws.svg b/assets/integrations/light/aws.svg deleted file mode 100644 index b2d900571..000000000 --- a/assets/integrations/light/aws.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/azure.svg b/assets/integrations/light/azure.svg deleted file mode 100644 index 364c74468..000000000 --- a/assets/integrations/light/azure.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/azure_auth.svg b/assets/integrations/light/azure_auth.svg deleted file mode 100644 index 11c9ab56e..000000000 --- a/assets/integrations/light/azure_auth.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/integrations/light/azure_mssql.svg b/assets/integrations/light/azure_mssql.svg deleted file mode 100644 index 364c74468..000000000 --- a/assets/integrations/light/azure_mssql.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/azure_openai.svg b/assets/integrations/light/azure_openai.svg deleted file mode 100644 index bb6b12e39..000000000 --- a/assets/integrations/light/azure_openai.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/cartesia.svg b/assets/integrations/light/cartesia.svg deleted file mode 100644 index c2e3cccd5..000000000 --- a/assets/integrations/light/cartesia.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/cloudwatch.svg b/assets/integrations/light/cloudwatch.svg deleted file mode 100644 index 6f966224d..000000000 --- a/assets/integrations/light/cloudwatch.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/cohere.svg b/assets/integrations/light/cohere.svg deleted file mode 100644 index c3dc5007a..000000000 --- a/assets/integrations/light/cohere.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/database.svg b/assets/integrations/light/database.svg deleted file mode 100644 index bf3e7f989..000000000 --- a/assets/integrations/light/database.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/integrations/light/databricks.svg b/assets/integrations/light/databricks.svg deleted file mode 100644 index 91baf6483..000000000 --- a/assets/integrations/light/databricks.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/integrations/light/descope.svg b/assets/integrations/light/descope.svg deleted file mode 100644 index 86811b7d3..000000000 --- a/assets/integrations/light/descope.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/gemini.svg b/assets/integrations/light/gemini.svg deleted file mode 100644 index ff9f5b1b6..000000000 --- a/assets/integrations/light/gemini.svg +++ /dev/null @@ -1 +0,0 @@ -Gemini \ No newline at end of file diff --git a/assets/integrations/light/github.svg b/assets/integrations/light/github.svg deleted file mode 100644 index 6112ddc50..000000000 --- a/assets/integrations/light/github.svg +++ /dev/null @@ -1 +0,0 @@ - github [#142] Created with Sketch. diff --git a/assets/integrations/light/google_auth.svg b/assets/integrations/light/google_auth.svg deleted file mode 100644 index d738277ab..000000000 --- a/assets/integrations/light/google_auth.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/integrations/light/groq.svg b/assets/integrations/light/groq.svg deleted file mode 100644 index cf90d287b..000000000 --- a/assets/integrations/light/groq.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/hubspot.svg b/assets/integrations/light/hubspot.svg deleted file mode 100644 index 4ab207374..000000000 --- a/assets/integrations/light/hubspot.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/hugging_face.svg b/assets/integrations/light/hugging_face.svg deleted file mode 100644 index 4553e9997..000000000 --- a/assets/integrations/light/hugging_face.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - icon - - - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/integrations/light/jira.svg b/assets/integrations/light/jira.svg deleted file mode 100644 index 99f9b59e2..000000000 --- a/assets/integrations/light/jira.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/langchain.svg b/assets/integrations/light/langchain.svg deleted file mode 100644 index 746c553f7..000000000 --- a/assets/integrations/light/langchain.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/integrations/light/linear.svg b/assets/integrations/light/linear.svg deleted file mode 100644 index 99209b488..000000000 --- a/assets/integrations/light/linear.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/mongodb.svg b/assets/integrations/light/mongodb.svg deleted file mode 100644 index 2846535f4..000000000 --- a/assets/integrations/light/mongodb.svg +++ /dev/null @@ -1 +0,0 @@ -file_type_mongo \ No newline at end of file diff --git a/assets/integrations/light/notion.svg b/assets/integrations/light/notion.svg deleted file mode 100644 index fd68d140f..000000000 --- a/assets/integrations/light/notion.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/okta_auth.svg b/assets/integrations/light/okta_auth.svg deleted file mode 100644 index f0f03ba89..000000000 --- a/assets/integrations/light/okta_auth.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/openai.svg b/assets/integrations/light/openai.svg deleted file mode 100644 index bb6b12e39..000000000 --- a/assets/integrations/light/openai.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/perplexity.svg b/assets/integrations/light/perplexity.svg deleted file mode 100644 index bc386f8a0..000000000 --- a/assets/integrations/light/perplexity.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/replicate.svg b/assets/integrations/light/replicate.svg deleted file mode 100644 index b01f1d1ec..000000000 --- a/assets/integrations/light/replicate.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/assets/integrations/light/resend.svg b/assets/integrations/light/resend.svg deleted file mode 100644 index 67af6bf6d..000000000 --- a/assets/integrations/light/resend.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/integrations/light/roboflow.svg b/assets/integrations/light/roboflow.svg deleted file mode 100644 index 4552ef0bb..000000000 --- a/assets/integrations/light/roboflow.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/salesforce.svg b/assets/integrations/light/salesforce.svg deleted file mode 100644 index d1c1ae1c1..000000000 --- a/assets/integrations/light/salesforce.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/slack.svg b/assets/integrations/light/slack.svg deleted file mode 100644 index 6d14c726c..000000000 --- a/assets/integrations/light/slack.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - diff --git a/assets/integrations/light/stripe.svg b/assets/integrations/light/stripe.svg deleted file mode 100644 index 3e7061a49..000000000 --- a/assets/integrations/light/stripe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/integrations/light/supabase.svg b/assets/integrations/light/supabase.svg deleted file mode 100644 index d3a062f8c..000000000 --- a/assets/integrations/light/supabase.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/assets/integrations/light/twilio.svg b/assets/integrations/light/twilio.svg deleted file mode 100644 index 33198b819..000000000 --- a/assets/integrations/light/twilio.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/ai_builder/integrations/airtable.md b/docs/ai_builder/integrations/airtable.md deleted file mode 100644 index a268edd76..000000000 --- a/docs/ai_builder/integrations/airtable.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -tags: Data Infrastructure -description: Connect your apps to Airtable to read, create, and update records in real time. ---- -# Airtable Integration - -The **Airtable Integration** lets your apps interact with Airtable bases to **store, fetch, and update structured data** directly from workflows, user actions, or automated triggers. Perfect for managing dynamic content, customer data, or workflows without complex backend setup. - - -## What You Can Do - -With the Airtable Integration, your app can: - -* Read and display data from Airtable bases -* Create new records dynamically from user actions -* Update or delete records through workflows -* Power AI experiences with live database content -* Sync structured data without hosting your own database - -## Step 1: Get Your Airtable API Key - -1. Go to [Airtable](https://airtable.com/). -2. Log in or create a free account. -3. Navigate to [**Developer Hub**](https://airtable.com/create/tokens) from your account menu. -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: `patxxxxxxxxxxxxxxxxxxxx` - -## Step 2: Configure the Integration in Your App - - -1. Click the **Settings** gear icon and navigate to the **Integrations** tab. -2. Find and enable the **Airtable** integration. -3. Paste your **API Key** in the input field. -4. Click **Connect** to confirm the connection. - -## Step 3: Use in Your Workflows - -Once connected, you can use Airtable actions in your app to: - -* Fetch records to display dynamic lists -* Add user submissions as new rows -* Update status fields or metrics from AI workflows - -and more. - diff --git a/docs/ai_builder/integrations/anthropic.md b/docs/ai_builder/integrations/anthropic.md deleted file mode 100644 index caf869810..000000000 --- a/docs/ai_builder/integrations/anthropic.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -tags: AI -description: Connect your apps to Anthropic's Claude models for advanced AI capabilities. ---- -# Anthropic Integration - -The **Anthropic Integration** allows your app to use [Anthropic’s Claude models](https://www.anthropic.com/claude) for tasks such as text generation, summarization, reasoning, and other advanced AI capabilities. Once connected, you can call Claude directly from your workflows, UI actions, or automated triggers. - - -## Step 1: Obtain an Anthropic API Key - -1. Go to the [Anthropic Console](https://console.anthropic.com/). -2. Navigate to **API Keys** in your account settings. -3. Click **Create Key** and give it a descriptive name (e.g., “AI Builder”). -4. Copy the generated key. - - * **Example:** `sk-ant-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Anthropic** in your app settings. -2. Paste your **Anthropic API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can use Claude for AI-powered features across workflows and components. - - -## Step 3: Notes - -* **Keep your key secure:** Do not hardcode your Anthropic API key in public code repositories. -* **Use environment-specific keys:** Separate dev, staging, and production keys help manage access and security. -* **Secure API access:** The key allows your app to interact with Anthropic endpoints securely and efficiently. - - diff --git a/docs/ai_builder/integrations/azure_auth.md b/docs/ai_builder/integrations/azure_auth.md deleted file mode 100644 index 0fe6a9428..000000000 --- a/docs/ai_builder/integrations/azure_auth.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -tags: Authentication -description: Integrate Azure for secure authentication and access management within your application. ---- -# Azure Auth Manager Integration - -The **Azure Auth Manager Integration** allows your app to authenticate users through Microsoft Azure Active Directory (Azure AD). This integration provides secure OAuth 2.0 authentication and supports multi-tenant applications with customizable tenant access. - -```python exec -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="/ai_builder/integrations/azure_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", -) -``` - -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 - ``` - -```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", -) -``` - -4 - On the next page get your `client_id` (`AZURE_CLIENT_ID`) and `tenant_id` (`AZURE_VALID_TENANT_IDS`) from the **Overview** tab. - -```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", -) -``` - -5 - Next click `Add a certificate or secret` and copy the generated secret value (`AZURE_CLIENT_SECRET`). - -```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", -) -``` - - - -## 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. -3. Fill in the credential fields: - - Enter your Azure Client ID - - Enter your Azure Client Secret - - Enter valid tenant IDs (comma-separated for multiple tenants) -4. Click **Connect** to save the integration. - -Your app can now authenticate users through Azure AD with secure OAuth 2.0 flow. diff --git a/docs/ai_builder/integrations/cartesia.md b/docs/ai_builder/integrations/cartesia.md deleted file mode 100644 index 31413c279..000000000 --- a/docs/ai_builder/integrations/cartesia.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -tags: AI -description: Add Cartesia’s powerful text-to-speech capabilities for realistic, real-time voice output and audio experiences. ---- -# Cartesia Integration - -The **Cartesia Integration** allows your app to generate **high-quality, realistic speech from text** using Cartesia’s advanced voice models. Once connected, you can easily add real-time voice capabilities to workflows, user interactions, and automated experiences. - - -## Step 1: Obtain a Cartesia API Key - -1. Go to the [Cartesia Console](https://www.cartesia.ai/). -2. Log in or create an account. -3. Navigate to **API Keys** in your account settings. -4. Click **New**, give it a descriptive name (e.g., “AI Builder”), and copy it. - - Example: `sk_car_xxxxxxxxxxxxx` - - - -## Step 2: Configure the Integration in Your App - -1. Open your app and go to **Integrations → Add Cartesia**. -2. Paste your **Cartesia API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can convert text to speech seamlessly in real time or through workflows. - - - -## Step 3: Notes - -- **Secure API Access:** Keep your Cartesia API key safe. Do not hardcode it in public code. -- **Environment isolation:** Use different keys for dev, staging, and production to ensure clean separation. -- **Low latency:** Cartesia supports real-time streaming for conversational experiences. -- **Usage management:** Monitor your Cartesia dashboard for quotas, billing, and usage insights. - diff --git a/docs/ai_builder/integrations/cohere.md b/docs/ai_builder/integrations/cohere.md deleted file mode 100644 index a96851c3d..000000000 --- a/docs/ai_builder/integrations/cohere.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -tags: AI -description: Add Cohere’s language models for text generation, classification, retrieval, embeddings, and more. ---- -# Cohere Integration - -The **Cohere Integration** allows your app to use [Cohere’s](https://cohere.com) state-of-the-art language models for natural language understanding and generation. Once connected, your app can power search, summarization, embeddings, classification, and conversational AI features directly from workflows and triggers. - - -## Step 1: Obtain a Cohere API Key - -1. Go to the [Cohere Dashboard](https://dashboard.cohere.com/). -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. - - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Cohere** in your app settings. -2. Paste your **Cohere API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can access Cohere’s endpoints for language tasks like embeddings, classification, chat, and more. - - -## Step 3: Notes - -- **Secure API Access:** Keep your Cohere API key private — do not hardcode it in public repositories. -- **Environment separation:** Use different keys for development, staging, and production environments. -- **Performance:** Cohere’s models support fast inference for production-ready experiences. -- **Observability:** Use the Cohere dashboard to monitor usage, quotas, and request logs. - diff --git a/docs/ai_builder/integrations/database.md b/docs/ai_builder/integrations/database.md deleted file mode 100644 index 6c8c8bf8a..000000000 --- a/docs/ai_builder/integrations/database.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -tags: Data Infrastructure -description: Connect to SQL or NoSQL databases to query, store, and manage structured data. ---- -# Database Integration - -The Database Integration allows you to connect your AI-generated applications to real databases, automatically generating schemas and enabling data-driven functionality. - -```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/database_light.webp", - "/ai_builder/integrations/database_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", -) -``` - -## Supported Databases - -- **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 - -### Opening the Database Integration - -1. Navigate to your app in the AI Builder -2. Open the **Settings drawer** (gear icon) -3. Click on the **Integrations** tab -4. Find and enable the **Database** integration - -### Connection Methods - -The Database Integration offers two convenient ways to connect: - -#### 1. Connection Details (Recommended) - -This user-friendly form breaks down your database connection into individual fields: - -**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, MSSQL: 1433) or specify custom port -- **Username**: Your database username -- **Password**: Your database password (securely handled) -- **Database Name**: The specific database to connect to - -**For SQLite:** -- **Database Type**: Select "SQLite" from dropdown -- **SQLite Download URL**: Either a local file path or HTTP URL to download the database file - -#### 2. Database URI - -For advanced users who prefer the traditional connection string format: - -**PostgreSQL:** -``` -postgresql://username:password@hostname:port/database_name -``` - -**MySQL:** -``` -mysql://username:password@hostname:port/database_name -``` - -**MSSQL:** -``` -mssql://username:password@hostname:port/database_name -``` - -**SQLite:** -``` -sqlite:///path/to/database.sqlite -sqlite+https://example.com/database.sqlite -``` - -## Database URI Components - -Protocol (postgresql://) - Database type identifier -Username (admin) - Database user credentials -Password (secret123) - User password (kept secure) -Hostname (db.company.com) - Server address -Port (5432) - Connection port -Database (mydatabase) - Target database name - -## Connection Process - -1. **Choose your method**: Use either Connection Details form or Database URI -2. **Fill in credentials**: Provide your database connection information -3. **Click Connect**: The system will validate and test your connection -4. **Schema Generation**: Upon successful connection, the system automatically: - - Connects to your database - - 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. -``` \ No newline at end of file diff --git a/docs/ai_builder/integrations/databricks.md b/docs/ai_builder/integrations/databricks.md deleted file mode 100644 index 4149c2f70..000000000 --- a/docs/ai_builder/integrations/databricks.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -tags: Data Infrastructure -description: Connect with Databricks to run data pipelines and advanced analytics seamlessly. ---- - - -# Databricks Integration - -The **Databricks Integration** allows your app to connect to [Databricks](https://www.databricks.com/) for secure data access, querying, and analytics. Once connected, you can run SQL queries, retrieve results, and power data-driven workflows directly from your app. - -## What You Can Do - -With Databricks, your app can: -- Connect securely to your Databricks workspace. -- Run **SQL queries** or fetch data programmatically. -- Build **dashboards and data visualizations** on top of your Databricks tables. -- Automate workflows triggered by new or updated data. -- Combine Databricks with AI models for advanced analytics. - - -```python exec -import reflex as rx -from reflex_image_zoom import image_zoom -``` - - -## Step 1: Get Your Databricks Credentials - -1 - Log in to your [Databricks Workspace](https://databricks.com/). - -2 - Get your **DATABRICKS_HOST** and **DATABRICKS_WAREHOUSE_ID**: - - Go to `SQL Warehouses` from the sidebar. - - Select your desired warehouse. - - Click `Connection details`. - - Copy the Server hostname (this is your **DATABRICKS_HOST**). - - Copy the HTTP path removing the `/sql/1.0/warehouses/` prefix (this is your **DATABRICKS_WAREHOUSE_ID**). - - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_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", -) -``` - - -3 - Get your **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA**: - - Click the SQL Editor from the sidebar. - - Choose the **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA** from the dropdowns as shown below. - - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_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", -) -``` - -```python eval -rx.box(height="2rem") -``` - -4 - Obtain your authentication credentials: - -There are two methods to authenticate your app with Databricks: using a **Personal Access Token** or via **OAuth**. Choose one of the methods below to obtain the necessary credentials. - - ----md tabs - ---tab Personal Access Token -## Generate a Personal Access Token (DATABRICKS_TOKEN) - - - - Click on your profile icon → **Settings**. - - Click **Developer**. - - Click **Manage** in Access Tokens. - - Click **Generate New Token**, provide a name and expiration, then copy it (**DATABRICKS_TOKEN**). - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_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", -) -``` - - - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_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", -) -``` - - - - --- ---tab OAuth -## Use OAuth (DATABRICKS_CLIENT_ID and DATABRICKS_CLIENT_SECRET) - -- Open the dropdown in the top right corner and select **Manage Account**. - - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_oauth_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", -) -``` - -- Select `Users and Groups` - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_oauth_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", -) -``` - -- Select the `Service Principals` tab and click `Add Service Principal`. - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_oauth_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", -) -``` - -- Fill in the details and click `Add Service Principal`. - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_oauth_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", -) -``` - -- Click the `Credentials and Secrets` tab and click `Generate Secret`. - - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_oauth_5.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", -) -``` - -- Set a lifetime for the secrets and click `Generate`. - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_oauth_6.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", -) -``` - -- Copy the generated **DATABRICKS_CLIENT_ID** and **DATABRICKS_CLIENT_SECRET**. - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/databricks_integration_oauth_7.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. In your app, go to **Integrations** and **Add Databricks**. -2. Paste your - 1. **DATABRICKS_TOKEN** - 2. **DATABRICKS_HOST** - 3. **DATABRICKS_WAREHOUSE_ID** - 4. **DATABRICKS_CATALOG** - 5. **DATABRICKS_SCHEMA** -3. Click **Connect** to validate and save your integration. - -Once connected, the AI Builder can execute queries directly against your Databricks environment. - - -## Step 3: Notes - -* **Secure your token:** Never expose tokens in public code. -* **Permissions:** Ensure your token or service account has the required workspace and table permissions. -* **Combine with AI:** Use query outputs to power models, summaries, or alerts in real time. - diff --git a/docs/ai_builder/integrations/descope.md b/docs/ai_builder/integrations/descope.md deleted file mode 100644 index f8b5fc758..000000000 --- a/docs/ai_builder/integrations/descope.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -tags: Authentication -description: Add Descope’s identity and authentication platform to your apps to manage user sign-in, onboarding, MFA, SSO, and flows with ease. ---- -# Descope Integration - -The **Descope Integration** enables your app to leverage Descope’s full Customer Identity & Access Management (CIAM) features—visual authentication flows, identity management, SSO, MFA, tenant isolation, and more. Once set up, you can orchestrate secure user journeys across your application with minimal coding. - - -```md alert warning -# You must open your app in a new tab from the builder to test the Descope integration. - -![Open new tab to test Descope](/ai_builder/integrations/descope_new_tab.webp) -``` - -## What You Can Do - -With Descope Integration, your app can: -- Handle user sign-up, login, and passwordless flows seamlessly -- Enable multifactor authentication (MFA), passkeys, and social login -- Support single sign-on (SSO) via OIDC/SAML -- Manage users, roles, tenants, and permissions via management APIs -- Orchestrate onboarding, branding, and multi-tenant flows via drag-and-drop workflows -- Sync user data with tools like HubSpot or Segment via built-in connectors - - -## Step 1: Obtain Descope Credentials - -```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/descope.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", -) -``` - -1. Log in to the [**Descope Console** (or sign up)](https://www.descope.com/sign-up). -2. Create your first Project. -3. Go to the Project page under Settings. -4. Copy the `Project ID`. - - -## Step 2: Configure the Integration in Your App - -1. In your app’s settings or integration dashboard, select **Add Descope**. -2. Enter your **PROJECT_ID**. -3. (Optional) Pick a **DESCOPE_FLOW_ID** (e.g. “sign-up-or-login”) and **SESSION_SECRET_KEY** or press the Clipboard Copy to use default values. -4. Click **Connect** to validate credentials and enable Descope features. - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/descope_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", -) -``` - - diff --git a/docs/ai_builder/integrations/gemini.md b/docs/ai_builder/integrations/gemini.md deleted file mode 100644 index b0ed04f3f..000000000 --- a/docs/ai_builder/integrations/gemini.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -tags: AI -description: Connect your apps to Google’s Gemini models for advanced AI capabilities. ---- -# Gemini Integration - -The **Gemini Integration** allows your app to use [Google’s Gemini models](https://aistudio.google.com/) for text generation, reasoning, multimodal analysis, and other advanced AI capabilities. Once connected, you can call Gemini directly from your workflows, UI actions, or automated triggers. - -## Step 1: Obtain a Gemini API Key - -1. Go to [Google AI Studio](https://aistudio.google.com/). -2. Navigate to **Get API Key** or create a new key for your project. -3. Copy the generated key. - - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Gemini** in your app settings. -2. Paste your **Gemini API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can use Gemini for AI-powered features across workflows and components. - -## Step 3: Notes - -* **Keep your key secure:** Do not hardcode your Gemini API key in public code repositories. -* **Use environment-specific keys:** Separate dev, staging, and production keys help manage access and security. -* **Secure API access:** The key allows your app to interact with Gemini endpoints securely and efficiently. diff --git a/docs/ai_builder/integrations/github.md b/docs/ai_builder/integrations/github.md deleted file mode 100644 index 8e8e09a27..000000000 --- a/docs/ai_builder/integrations/github.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -tags: Developer Tools -description: Connect your app to GitHub to automate workflows, manage repositories, and integrate developer operations. ---- -# GitHub Integration - -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. - -## What You Can Do - -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 - -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:* -``` - -ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - -``` - -> 💡 Fine-grained tokens are recommended for better security. - -## Step 2: Configure the Integration in Your App - -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. - diff --git a/docs/ai_builder/integrations/google_auth.md b/docs/ai_builder/integrations/google_auth.md deleted file mode 100644 index 1e86e922b..000000000 --- a/docs/ai_builder/integrations/google_auth.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -tags: Authentication -description: Enable secure authentication using Google sign-in and OAuth 2.0 workflows. ---- - -# Google Auth Integration - -The **Google Auth Integration** allows your app to authenticate users using their Google accounts. This provides a secure, familiar login experience and simplifies user management. - -```python exec -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="/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)}", - ), - 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 Google Auth** in your app settings. -2. Enter your **Google Client ID** and **Google Client Secret**. -3. Save the integration. Your app is now configured to use Google Auth for login. - -## Step 3: Notes - -- The integration supports multiple environments (development, staging, production). Use environment-specific secrets for the client ID and secret. -- Google Auth handles token refresh automatically when users log in via OAuth. -- Users will see a standard Google login screen, ensuring familiarity and trust. -- Ensure your app domain matches the authorized JavaScript origin and redirect URIs; otherwise, authentication will fail. diff --git a/docs/ai_builder/integrations/groq.md b/docs/ai_builder/integrations/groq.md deleted file mode 100644 index 393c96fae..000000000 --- a/docs/ai_builder/integrations/groq.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -tags: AI -description: Connect your apps to Groq’s ultra-fast inference API for lightning-speed AI responses. ---- -# Groq Integration - -The **Groq Integration** allows your app to use [Groq’s API](https://groq.com/) for ultra-fast AI inference. Once connected, your app can leverage Groq’s hosted models (including open models like Llama 4 and Qwen) to power real-time workflows, chat experiences, and other AI-driven features. - -## Step 1: Obtain a Groq API Key - -1. Go to the [Groq Console](https://console.groq.com/). -2. Navigate to **API Keys** in your account settings. -3. Click **Create API Key** and give it a descriptive name (e.g., “AI Builder”). -4. Copy the generated key. - * **Example:** `gsk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Groq** in your app settings. -2. Paste your **Groq API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can use Groq to deliver ultra-low latency AI responses across workflows and components. - -## Step 3: Notes - -* **Keep your key secure:** Do not hardcode your Groq API key in public code repositories. -* **Use environment-specific keys:** Separate dev, staging, and production keys help manage access and security. -* **Secure API access:** The key allows your app to interact with Groq endpoints securely and efficiently. diff --git a/docs/ai_builder/integrations/hubspot.md b/docs/ai_builder/integrations/hubspot.md deleted file mode 100644 index 1484b6d11..000000000 --- a/docs/ai_builder/integrations/hubspot.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -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. - diff --git a/docs/ai_builder/integrations/hugging_face.md b/docs/ai_builder/integrations/hugging_face.md deleted file mode 100644 index dc2a77e26..000000000 --- a/docs/ai_builder/integrations/hugging_face.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -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. -``` diff --git a/docs/ai_builder/integrations/langchain.md b/docs/ai_builder/integrations/langchain.md deleted file mode 100644 index 40f799e8f..000000000 --- a/docs/ai_builder/integrations/langchain.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -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. - diff --git a/docs/ai_builder/integrations/linear.md b/docs/ai_builder/integrations/linear.md deleted file mode 100644 index 6fd8f6b99..000000000 --- a/docs/ai_builder/integrations/linear.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -tags: DevTools -description: Connect your apps to Linear to manage issues, projects, and sprints directly from workflows. ---- -# Linear Integration - -The **Linear Integration** allows your app to connect to [Linear](https://linear.app/) to create, update, and track issues and projects seamlessly. Once connected, your app can trigger Linear actions from user interactions or automated workflows. - -## What You Can Do - -With Linear, your app can: -- **Create and assign issues** automatically from user actions or AI workflows. -- **Update status and priority** of tickets and projects. -- **Sync with sprints and cycles** to keep work organized. -- **Fetch project and issue data** for dashboards, summaries, or automation. -- **Integrate with other tools** like Slack or GitHub through workflows. -- Power intelligent workflows (e.g., auto-triage or auto-summarize bug reports). - -## Step 1: Obtain a Linear API Key - -1. Go to your [Linear account](https://linear.app/). -2. Navigate to **Workspace Settings → API**. -3. Click **Create API Key**, give it a name, and copy the key. - - * **Example:** `lin_api_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Linear** in your app settings. -2. Paste your **Linear API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can interact with Linear to automate issue tracking and project management. - -## Step 3: Notes - -* **Keep your key secure:** Never expose your Linear API key in client-side code. -* **Use environment-specific keys:** Separate dev, staging, and production keys. -* **Streamlined workflows:** Automate ticket creation, status updates, and reporting directly from your app. -* **Real-time visibility:** Fetch and sync project data to power internal tools or dashboards. - diff --git a/docs/ai_builder/integrations/notion.md b/docs/ai_builder/integrations/notion.md deleted file mode 100644 index 2ae33124e..000000000 --- a/docs/ai_builder/integrations/notion.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -tags: Data Infrastructure -description: Connect your apps to Notion to create, update, and query pages, databases, and documents. ---- -# Notion Integration - -The **Notion Integration** allows your app to connect to [Notion](https://www.notion.so/) to manage content, automate workflows, and build dynamic interfaces on top of Notion workspaces. Once connected, your app can read and write pages, sync databases, and trigger actions based on user activity. - -## What You Can Do - -With Notion, your app can: -- **Create and update pages** in workspaces automatically. -- **Read and query databases** to power dashboards, workflows, or automations. -- **Sync structured content** like tasks, notes, or documentation with other tools. -- Trigger **actions from AI workflows** (e.g., creating meeting notes, logging issues). -- Integrate with other services (e.g., Slack, Linear, HubSpot) for seamless collaboration. - -## Step 1: Obtain a Notion API Token - -1. Go to the [Notion Developers](https://www.notion.so/my-integrations) page. -2. Click **+ New Integration**, give it a name, and copy the generated **Internal Integration Token**. -3. Share the integration with the relevant pages or databases in your workspace to grant access. - - * **Example:** `ntn_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Notion** in your app settings. -2. Paste your **Notion API Token** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can read and write to Notion directly from workflows and UI actions. - -## Step 3: Notes - -* **Keep your token secure:** Never expose your Notion token in client-side code. -* **Use environment-specific tokens:** Separate dev, staging, and production access. -* **Granular permissions:** Only share the integration with the pages or databases it needs to access. -* **Powerful building block:** Use Notion as a single source of truth for content, tasks, or structured data. - diff --git a/docs/ai_builder/integrations/okta_auth.md b/docs/ai_builder/integrations/okta_auth.md deleted file mode 100644 index f2d932539..000000000 --- a/docs/ai_builder/integrations/okta_auth.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -tags: Authentication -description: Use Okta for secure identity and access management via Single Sign-On provisioning. ---- - -# Okta Auth Manager Integration - -The **Okta Auth Manager Integration** allows your app to authenticate users through [Okta](https://okta.com). This integration provides secure OAuth 2.0 / OIDC authentication and supports multi-tenant environments with customizable access policies. - - -## What You Can Do - -With Okta, your app can: -- Authenticate users securely through Okta’s identity platform. -- Enable **SSO** for enterprise users. -- Manage user roles, groups, and access permissions. -- Protect sensitive data and actions with **OAuth 2.0** and **OpenID Connect (OIDC)**. -- Integrate with other identity workflows like MFA or adaptive policies. - - -```python exec -import reflex as rx -from reflex_image_zoom import image_zoom -``` - - - -## Step 1: Set Up Okta OIDC App - -Before connecting, you need to create an OIDC application in the Okta Admin Console: - -1 - Go to [Okta Admin Console](https://login.okta.com) → **Applications** → **Applications** - - -2 - Click **Create App Integration** - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/okta_auth_1.png", - 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", -) -``` - -3 - Select **OIDC – OpenID Connect** and choose **Web Application** - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/okta_auth_2.png", - 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 - Configure your app settings: - - **Allow wildcard * in sign-in redirect URIs** - - **Sign-in redirect URIs** found in the Okta Auth Manager integration settings in AI Builder: - `https://{your-sandbox}/authorization-code/callback` - - **Sign-out redirect URIs**: - `https://{your-sandbox}` - - Assign to the correct **Group** or **Everyone** depending on your access control - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/okta_auth_3.png", - 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 - Save the app integration. - -6 - Copy your **Client ID** (`OKTA_CLIENT_ID`) and **Client Secret** (`OKTA_CLIENT_SECRET`) from the app settings. - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/okta_auth_4.png", - 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: Finding Your Okta Issuer URI - -1. In the Okta Admin Console, go to **Security** → **API** → **Authorization Servers** -2. Click on the **default** server and copy the **Issuer URI**. -3. Remove the trailing `/oauth2/default` from the URI to get your **Okta Issuer URI** (`OKTA_ISSUER_URI`). - -Example: - -If your Issuer URI is `https://{yourOktaDomain}.okta.com/oauth2/default` - -Use `https://{yourOktaDomain}.okta.com` - - - -```python eval -rx.el.div( - image_zoom( - rx.image( - src="/ai_builder/integrations/okta_auth_5.png", - 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", -) -``` - - -> **Note:** Always use separate Okta apps for dev, staging, and production environments to avoid mixing credentials. - - -## Step 3: Configure the Integration - -1. Go to the **Integrations** section in your app settings by clicking **`@`** and then selecting the **Integrations** tab. -2. Click **Add** next to **Okta Auth Manager**. -3. Fill in the credential fields: - - Enter your Okta Client ID - - Enter your Okta Client Secret - - Enter your Okta Issuer URI -4. Click **Connect** to save the integration. - -Your app can now authenticate users through Okta using the secure OAuth 2.0 / OIDC flow. diff --git a/docs/ai_builder/integrations/openai.md b/docs/ai_builder/integrations/openai.md deleted file mode 100644 index e2392294f..000000000 --- a/docs/ai_builder/integrations/openai.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -tags: AI -description: Connect to OpenAI's powerful language models for text generation, analysis, and more. ---- -# OpenAI Integration - -The **OpenAI Integration** allows your app to use OpenAI APIs for features such as text generation, embeddings, and other AI-powered functionality. - - - -```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/open_ai_light.webp", - "/ai_builder/integrations/open_ai_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", -) -``` - -## Step 1: Obtain an OpenAI API Key - -1. Go to the [OpenAI Platform](https://platform.openai.com/). -2. Navigate to **API Keys** in your account settings. -3. Click **Create new secret key**. -4. Copy the generated key. - - Example: `sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add OpenAI Integration** in your app settings. -2. Enter your **OpenAI API Key** in the input field. -3. Save the integration. Your app is now ready to make OpenAI API requests. - ---- - -## Step 3: Notes - -- Keep your OpenAI key secure; do **not** hardcode it in public code repositories. -- Use environment-specific secrets if you have separate development, staging, and production environments. -- The key allows your app to interact with OpenAI endpoints securely and efficiently. diff --git a/docs/ai_builder/integrations/perplexity.md b/docs/ai_builder/integrations/perplexity.md deleted file mode 100644 index 8f5917941..000000000 --- a/docs/ai_builder/integrations/perplexity.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -tags: AI -description: Connect your apps to Perplexity to power real-time, retrieval-augmented AI experiences. ---- -# Perplexity Integration - -The **Perplexity Integration** allows your app to use [Perplexity](https://www.perplexity.ai/) to deliver fast, accurate, retrieval-augmented answers from the web and trusted sources. Once connected, you can use Perplexity to enhance search, summarization, and real-time knowledge in your workflows. - -## What You Can Do - -With Perplexity, your app can: -- **Retrieve real-time information** from the web to ground model outputs. -- **Generate concise summaries** and answers with citations. -- Power **search experiences**, research assistants, and contextual AI features. -- **Combine Perplexity with other models** for hybrid workflows (e.g., retrieval + reasoning). -- Enable **trusted, source-backed outputs** for more accurate responses. - -## Step 1: Obtain a Perplexity API Key - -1. Go to the [Perplexity](https://www.perplexity.ai/). -2. Log in or create an account. -3. Navigate to **Account → API → [API Keys](https://www.perplexity.ai/account/api/keys)**. -4. Click **Generate Key** and copy the generated key. - - * **Example:** `pplx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Perplexity** in your app settings. -2. Paste your **Perplexity API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can use Perplexity for retrieval-augmented AI features across workflows and components. - -## Step 3: Notes - -* **Keep your key secure:** Do not hardcode your Perplexity API key in public code repositories. -* **Use environment-specific keys:** Separate dev, staging, and production keys for better control. -* **Secure API access:** The key allows your app to interact with Perplexity endpoints securely and efficiently. -* **Real-time power:** Perplexity is ideal for use cases where freshness and factual grounding matter. diff --git a/docs/ai_builder/integrations/replicate.md b/docs/ai_builder/integrations/replicate.md deleted file mode 100644 index 5301e96ae..000000000 --- a/docs/ai_builder/integrations/replicate.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -tags: AI -description: Connect your apps to Replicate to run and deploy open-source machine learning models with ease. ---- -# Replicate Integration - -The **Replicate Integration** allows your app to use [Replicate](https://replicate.com/) to run open-source AI models in the cloud without managing infrastructure. Once connected, you can use Replicate to generate text, images, audio, and more — directly from workflows and UI actions. - -## What You Can Do - -With Replicate, your app can: -- Run open-source **AI models** without GPU or hosting setup. -- Access models for **text generation**, **image generation**, **audio**, and **multimodal tasks**. -- Automate workflows like content generation, data processing, or AI-powered features. -- Use prebuilt models or deploy your own custom models. -- Scale effortlessly with serverless infrastructure. - -## Step 1: Obtain a Replicate API Token - -1. Go to the [Replicate Dashboard](https://replicate.com/account). -2. Log in or create an account. -3. Navigate to the **API Tokens** section. -4. Copy your **API Token** from the account page. - - * **Example:** `r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Replicate** in your app settings. -2. Paste your **Replicate API Token** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can call Replicate models directly in workflows, UI actions, or automations. - -## Step 3: Notes - -* **Keep your token secure:** Do not hardcode your Replicate token in public code repositories. -* **Use environment-specific tokens:** Separate dev, staging, and production environments for security. -* **Secure API access:** The token allows your app to interact with Replicate endpoints safely and efficiently. -* **Model flexibility:** You can use community models or deploy your own for full control. diff --git a/docs/ai_builder/integrations/resend.md b/docs/ai_builder/integrations/resend.md deleted file mode 100644 index 74172b156..000000000 --- a/docs/ai_builder/integrations/resend.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -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. - - -## 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_xxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -## 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. diff --git a/docs/ai_builder/integrations/roboflow.md b/docs/ai_builder/integrations/roboflow.md deleted file mode 100644 index cb9309d40..000000000 --- a/docs/ai_builder/integrations/roboflow.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -tags: AI -description: Connect your apps to Roboflow to use computer vision models and datasets for image detection, classification, and segmentation. ---- -# Roboflow Integration - -The **Roboflow Integration** allows your app to use [Roboflow](https://roboflow.com/) to run and deploy computer vision models without complex infrastructure. Once connected, you can use Roboflow to power image detection, object tracking, classification, and segmentation workflows. - -## What You Can Do - -With Roboflow, your app can: -- Run **pre-trained computer vision models** for detection, classification, or segmentation. -- Deploy and use **custom-trained models** built in Roboflow. -- Automate workflows that rely on visual inputs — e.g., quality checks, object detection, image analysis. -- Ingest and process **images in real time**. -- Combine vision outputs with other integrations (e.g., AI reasoning, automation flows). - -```md alert -## This integration currently supports image inputs only. -Video and streaming inputs are not yet supported. -``` - -## Step 1: Obtain a Roboflow API Key - -1. Go to your [Roboflow Account](https://roboflow.com/). -2. Navigate to **Settings → API Keys**. -3. Copy your Private API Key. - - -## Step 2: Set up your Model in Roboflow - -1. Go to Workflows and create a new workflow. -2. Set up the workflow you want to use in your app, ensuring that it takes an image as input. -3. Click the `deploy` button, select `Images` and then select `Integrate with my app or website`. -4. Copy the `workspace_name` and `workflow_id` from the provided code snippet. - -```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/roboflow.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 3: Configure the Integration in Your App - -1. Go to **Integrations → Add Roboflow** in your app settings. -2. Paste your **Roboflow API Key**, **Workspace Name**, and **Workflow ID** in the input fields. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can call Roboflow models directly from workflows, UI actions, or automated triggers. - - -## Step 4: Notes - -* **Keep your key secure:** Never expose your Roboflow key in client-side code. -* **Use environment-specific keys:** Separate dev, staging, and production keys to control access. -* **Model flexibility:** Use community models or your own custom-trained models. -* **Real-time vision:** Ideal for applications involving cameras, inspection, monitoring, or visual AI. diff --git a/docs/ai_builder/integrations/stripe.md b/docs/ai_builder/integrations/stripe.md deleted file mode 100644 index 6d756688d..000000000 --- a/docs/ai_builder/integrations/stripe.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -description: Connect your apps to Stripe to accept payments, manage subscriptions, and handle billing securely. ---- -# Stripe Integration - -The **Stripe Integration** allows your app to use [Stripe](https://stripe.com/) to power secure payments, subscriptions, and billing workflows. Once connected, you can process transactions, manage customers, and trigger payment flows directly from your app. - -## What You Can Do - -With Stripe, your app can: -- **Accept one-time payments** or set up **recurring subscriptions**. -- **Manage customers**, payment methods, and invoices. -- Handle **refunds, payment confirmations**, and notifications. -- Automate billing flows and webhook-based actions. -- Build secure, PCI-compliant checkout experiences with ease. - -## Step 1: Obtain a Stripe API Key - -1. Go to your [Stripe Dashboard](https://dashboard.stripe.com/). -2. Navigate to **Developers → API Keys**. -3. Copy your **Secret Key** (or create a restricted key for added security). - - * **Example:** `sk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -> 💡 Use test keys in development environments and live keys in production. - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Stripe** in your app settings. -2. Paste your **Stripe API Key** in the input field. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can process payments and manage billing directly from workflows and UI actions. - -## Step 3: Notes - -* **Keep your API key secure:** Never expose your Stripe key in client-side code. -* **Use environment-specific keys:** Test keys for staging, live keys for production. -* **Secure transactions:** All payment processing is handled through Stripe’s PCI-compliant infrastructure. diff --git a/docs/ai_builder/integrations/supabase.md b/docs/ai_builder/integrations/supabase.md deleted file mode 100644 index 22f1d0fb9..000000000 --- a/docs/ai_builder/integrations/supabase.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -tags: Data Infrastructure -description: Connect your apps to Supabase to use a hosted Postgres database with real-time capabilities and powerful APIs. ---- -# Supabase Integration - -The **Supabase Integration** allows your app to connect to [Supabase](https://supabase.com/) — a hosted Postgres database with real-time subscriptions, authentication, and file storage. Once connected, your app can query and update data securely, power dashboards, and sync workflows in real time. - -## What You Can Do - -With Supabase, your app can: -- **Read and write data** using Postgres through a simple REST or client API. -- Enable **real-time updates** that sync automatically to your UI. -- Use **row-level security** and access control for safe data management. -- Store and retrieve files with Supabase Storage. -- Integrate seamlessly with AI, dashboards, or internal tools. - -## Step 1: Obtain Your Supabase URL and Key - -1. Go to your [Supabase Project](https://supabase.com/). -2. Choose the project you want to connect. -3. Navigate to **Project Settings**. -4. Go to **Data API** and copy your `Supabase_URL`. -5. Then go to **API Keys** and copy your `Supabase_Key` (the secret key). - - * **Example URL:** `https://your-project.supabase.co` - * **Example Key:** `sb_xxxxxxxxxxxxxxxxxxxxxxxxxxxx.` - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Supabase** in your app settings. -2. Paste your **Supabase URL** and **Supabase Key** into the fields. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can query and update your Supabase database directly from workflows and UI actions. - -## Step 3: Notes - -* **Keep your keys secure:** Never expose the `Supabase_Key` key in client-side code. -* **Use environment-specific keys:** Separate dev, staging, and production projects for clean access control. -* **Realtime support:** Supabase enables live syncing of data changes. -* **Row-level security:** Make sure to configure policies appropriately for your use case. diff --git a/docs/ai_builder/integrations/twilio.md b/docs/ai_builder/integrations/twilio.md deleted file mode 100644 index 1f5409723..000000000 --- a/docs/ai_builder/integrations/twilio.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -tags: Communication -description: Connect your apps to Twilio to send SMS, WhatsApp messages, and voice calls programmatically. ---- -# Twilio Integration - -The **Twilio Integration** allows your app to use [Twilio](https://www.twilio.com/) to send and receive SMS, WhatsApp messages, and voice calls. Once connected, your app can trigger messages or calls directly from workflows, user actions, or automated events. - -## What You Can Do - -With Twilio, your app can: -- **Send SMS** messages to users or customers globally. -- **Send and receive WhatsApp messages**. -- **Make and manage voice calls** programmatically. -- Automate **notifications**, **alerts**, and **transactional messages**. -- Integrate messaging into AI workflows for dynamic, real-time communication. - -## Step 1: Obtain Twilio Credentials - -1. Go to your [Twilio Console](https://www.twilio.com/console). -2. Copy your **Account SID** and **Auth Token** from the dashboard. - - * **Example Account SID:** `ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - * **Example Auth Token:** `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` - -## Step 2: Configure the Integration in Your App - -1. Go to **Integrations → Add Twilio** in your app settings. -2. Paste your **Account SID** and **Auth Token** in the input fields. -3. Click **Connect** to validate and save your integration. - -Once connected, your app can send messages or make calls through Twilio directly in workflows and components. - -## Step 3: Notes - -* **Keep your credentials secure:** Never expose your Auth Token in client-side code. -* **Use environment-specific credentials:** Separate dev, staging, and production credentials. -* **Phone number setup:** Ensure you’ve configured a valid Twilio number for sending messages or calls. -* **Regulatory compliance:** Review Twilio’s messaging and voice compliance requirements for your region. diff --git a/integrations-docs b/integrations-docs new file mode 160000 index 000000000..61f10db31 --- /dev/null +++ b/integrations-docs @@ -0,0 +1 @@ +Subproject commit 61f10db31fee26043a48d2b6cf2b0ce5645c8343 diff --git a/pcweb/components/docpage/sidebar/sidebar_items/ai.py b/pcweb/components/docpage/sidebar/sidebar_items/ai.py index ac6dcc590..34e5114a8 100644 --- a/pcweb/components/docpage/sidebar/sidebar_items/ai.py +++ b/pcweb/components/docpage/sidebar/sidebar_items/ai.py @@ -66,8 +66,8 @@ def get_ai_builder_integrations(): "First Class Integrations", children=[ ai_builder.integrations.overview, - # ai_builder.integrations.airtable, ai_builder.integrations.anthropic, + ai_builder.integrations.aws, ai_builder.integrations.azure_auth, ai_builder.integrations.cartesia, ai_builder.integrations.cohere, diff --git a/pcweb/constants.py b/pcweb/constants.py index 1dc0054e8..80f9745d9 100644 --- a/pcweb/constants.py +++ b/pcweb/constants.py @@ -67,6 +67,9 @@ # Cloudflare SCREENSHOT_BUCKET = "https://pub-c14a5dcf674640a6b73fded32bad72ca.r2.dev/" +# Integrations images +INTEGRATIONS_IMAGES_URL = "https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/logos/" + # Reflex Cloud Backend RX_CLOUD_BACKEND = os.getenv("RX_CLOUD_BACKEND", "https://cloud-backend.reflex.dev/") RX_BUILD_BACKEND = os.getenv("RX_BUILD_BACKEND", "https://build-backend.reflex.dev/") diff --git a/pcweb/flexdown.py b/pcweb/flexdown.py index bfb02ff79..9f88280c9 100644 --- a/pcweb/flexdown.py +++ b/pcweb/flexdown.py @@ -16,6 +16,7 @@ h2_comp_xd, h3_comp_xd, h4_comp_xd, + img_comp_xd, list_comp, ordered_list_comp, text_comp, @@ -602,6 +603,7 @@ def render(self, env) -> rx.Component: "a": doclink2, "code": lambda text: code_comp(text=text), "codeblock": code_block_markdown, + "img": lambda src: img_comp_xd(src=src), } comp2 = component_map.copy() comp2["codeblock"] = code_block_markdown_dark diff --git a/pcweb/pages/docs/__init__.py b/pcweb/pages/docs/__init__.py index 6015c298b..9b97f080b 100644 --- a/pcweb/pages/docs/__init__.py +++ b/pcweb/pages/docs/__init__.py @@ -95,6 +95,21 @@ def get_components_from_metadata(current_doc): str(doc).replace("\\", "/") for doc in flexdown.utils.get_flexdown_files("docs/") ] +# Add integration docs from the submodule +# Create a mapping from virtual path to actual path +doc_path_mapping = {} +integration_docs_path = Path("integrations-docs/docs") +if integration_docs_path.exists(): + for integration_doc in integration_docs_path.glob("*.md"): + # Map submodule docs to the ai_builder/integrations path structure + virtual_path = f"docs/ai_builder/integrations/{integration_doc.name}" + actual_path = str(integration_doc).replace("\\", "/") + if virtual_path.replace("\\", "/") not in flexdown_docs: + # Store the mapping + doc_path_mapping[virtual_path.replace("\\", "/")] = actual_path + # Add to flexdown_docs for processing + flexdown_docs.append(virtual_path.replace("\\", "/")) + graphing_components = defaultdict(list) component_list = defaultdict(list) recipes_list = defaultdict(list) @@ -155,10 +170,12 @@ def get_component(doc: str, title: str): if not _check_whitelisted_path(route): return - d = Document.from_file(doc) + # Use the actual file path if this is from the submodule + actual_doc_path = doc_path_mapping.get(doc, doc) + d = Document.from_file(actual_doc_path) if doc.startswith("docs/library/graphing"): - if should_skip_compile(doc): + if should_skip_compile(actual_doc_path): outblocks.append((d, route)) return clist = [title, *get_components_from_metadata(d)] @@ -167,17 +184,17 @@ def get_component(doc: str, title: str): if doc.startswith("docs/library"): clist = [title, *get_components_from_metadata(d)] component_list[category].append(clist) - if should_skip_compile(doc): + if should_skip_compile(actual_doc_path): outblocks.append((d, route)) return return multi_docs(path=route, comp=d, component_list=clist, title=title2) - if should_skip_compile(doc): + if should_skip_compile(actual_doc_path): outblocks.append((d, route)) return def comp(): - return (get_toc(d, doc), xd.render(d, doc)) + return (get_toc(d, actual_doc_path), xd.render(d, actual_doc_path)) doc_path = Path(doc) doc_module = ".".join(doc_path.parts[:-1]) diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index 3f82c35d2..03065d495 100644 --- a/pcweb/pages/gallery/gallery.py +++ b/pcweb/pages/gallery/gallery.py @@ -6,6 +6,7 @@ from pcweb.components.button import button from pcweb.components.r_svg_loader import r_svg_loader +from pcweb.constants import INTEGRATIONS_IMAGES_URL from pcweb.templates.webpage import webpage REFLEX_BUILD_TEMPLATES_PATH = "reflex_build_templates/" @@ -82,8 +83,8 @@ def integration_image(integration: str, class_name: str = ""): return ui.avatar.root( ui.avatar.image( src=rx.color_mode_cond( - f"/integrations/light/{integration_logo}.svg", - f"/integrations/dark/{integration_logo}.svg", + f"{INTEGRATIONS_IMAGES_URL}light/{integration_logo}.svg", + f"{INTEGRATIONS_IMAGES_URL}dark/{integration_logo}.svg", ), unstyled=True, class_name="size-full", @@ -101,9 +102,14 @@ def integrations_stack(integrations: list[str]) -> rx.Component: rx.foreach( integrations, lambda integration: rx.el.div( - integration_image(integration, class_name="size-4"), - title=integration, - class_name="size-8 shrink-0 flex justify-center items-center rounded-full shadow-small border border-secondary-a5 bg-white-1 dark:bg-secondary-1", + ui.tooltip( + trigger=rx.el.div( + integration_image(integration, class_name="size-4"), + class_name="size-8 shrink-0 flex justify-center items-center rounded-full shadow-small border border-secondary-a5 bg-white-1 dark:bg-secondary-1 cursor-default", + ), + side="bottom", + content=integration, + ), ), ), class_name="flex flex-row -space-x-2 flex-wrap gap-y-2", diff --git a/pcweb/pages/integrations/integration_gallery.py b/pcweb/pages/integrations/integration_gallery.py index ccdacc413..784218373 100644 --- a/pcweb/pages/integrations/integration_gallery.py +++ b/pcweb/pages/integrations/integration_gallery.py @@ -2,6 +2,8 @@ import reflex_ui as ui from reflex.experimental import ClientStateVar +from pcweb.constants import INTEGRATIONS_IMAGES_URL + from .integration_list import get_integration_path from .integration_request import request_integration_dialog @@ -41,14 +43,15 @@ def integration_filters(): def integration_gallery_cards(data): + integration_name = str(data["name"]).lower().replace(" ", "_") return rx.el.a( rx.el.div( rx.el.div( ui.avatar.root( ui.avatar.image( src=rx.color_mode_cond( - f"/integrations/light/{data['name']}.svg", - f"/integrations/dark/{data['name']}.svg", + f"{INTEGRATIONS_IMAGES_URL}light/{integration_name}.svg", + f"{INTEGRATIONS_IMAGES_URL}dark/{integration_name}.svg", ), unstyled=True, class_name="size-full", diff --git a/pcweb/pages/integrations/integration_list.py b/pcweb/pages/integrations/integration_list.py index 63b00a7c2..066d74c7a 100644 --- a/pcweb/pages/integrations/integration_list.py +++ b/pcweb/pages/integrations/integration_list.py @@ -5,7 +5,7 @@ # Get the paths for our integrations from the source docs/ def get_integration_path() -> list: - base_dir = "docs/ai_builder/integrations" + base_dir = "integrations-docs/docs" web_path_prefix = "/docs/ai-builder/integrations" result = [] diff --git a/pcweb/templates/docpage/blocks/headings.py b/pcweb/templates/docpage/blocks/headings.py index c7e4c05d7..0e4582ccb 100644 --- a/pcweb/templates/docpage/blocks/headings.py +++ b/pcweb/templates/docpage/blocks/headings.py @@ -118,3 +118,11 @@ def h4_comp_xd(text: list[str]) -> rx.Component: mt="2", class_name="font-md-smbold", ) + + +@rx.memo +def img_comp_xd(src: str) -> rx.Component: + return rx.image( + src=src, + class_name="rounded-lg border border-secondary-a4 mb-2", + ) diff --git a/reflex_build_templates/finance_dashboard.md b/reflex_build_templates/finance_dashboard.md index cc98b12fe..166d3b20b 100644 --- a/reflex_build_templates/finance_dashboard.md +++ b/reflex_build_templates/finance_dashboard.md @@ -9,7 +9,7 @@ meta: [ {"name": "keywords", "content": "factor risk model, portfolio analytics, equity factors, GPU analytics, risk management, Reflex app, finance dashboard"}, ] tags: ["Dashboard", "Finance", "Risk", "Analytics"] -integrations: ["Databricks", "AG Grid", "Slack"] +integrations: ["Databricks", "AGGrid", "Slack"] ---