Integraciones listas para conectar

Aureform incluye 65 recetas de frontend en 17 familias de flujos. Abre el centro de integraciones o una receta concreta, como datos con Supabase, Stripe u OpenAI Responses.

Cada receta incluye configuración de cuenta, elección de proveedor, permisos lógicos, selección de recursos, estado de conexión, sincronización, actividad e interfaz de trabajo. La demo pública usa mocks locales funcionales. No solicita acceso a cuentas externas, envía correos, registra analítica, cobra pagos ni ejecuta modelos reales.

Qué incluye

Los SDK son dependencias opcionales del consumidor. Elegir un proveedor no instala un SDK ni crea una cuenta. El kit aporta la presentación y los contratos de transporte; tu aplicación aporta la conectividad y la autorización de su backend.

Conectar el centro completo

Construye los adaptadores en un Client Component. Contienen funciones y no pueden pasarse como props serializadas desde el servidor.

"use client";

import { useMemo } from "react";
import { Providers } from "@/components/providers";
import { IntegrationHub } from "@/components/integrations/integration-hub";
import { createHttpIntegrationSuite } from "@/lib/integrations/http-suite";
import { publicPath } from "@/lib/public-path";

type ConnectedWorkspaceProps = {
  applicationOrigin: string;
  approvedModelId: string;
  checkoutOrigin: string;
  getCsrfToken: () => Promise<string>;
};

export function ConnectedWorkspace({
  applicationOrigin,
  approvedModelId,
  checkoutOrigin,
  getCsrfToken,
}: ConnectedWorkspaceProps) {
  const suite = useMemo(
    () => createHttpIntegrationSuite({
      connections: {
        baseUrl: publicPath("/api/integrations"),
        getCsrfToken,
      },
      identity: {
        "better-auth": {
          basePath: publicPath("/api/identity/better-auth"),
          redirectPolicy: { origin: applicationOrigin },
          csrfToken: getCsrfToken,
        },
      },
      ai: {
        "openai-responses": {
          endpoint: publicPath("/api/ai/stream"),
          approvalEndpoint: publicPath("/api/ai/approvals"),
          models: [{
            id: approvedModelId,
            provider: "openai-responses",
            label: "Modelo autorizado de la aplicación",
          }],
          fetch: async (url, init) => {
            const headers = new Headers(init?.headers);
            headers.set("X-CSRF-Token", await getCsrfToken());
            return fetch(url, { ...init, headers });
          },
        },
      },
      commerce: {
        polar: {
          baseUrl: publicPath("/api/commerce"),
          trustedRedirectOrigins: [checkoutOrigin],
          getCsrfToken,
        },
      },
    }),
    [applicationOrigin, approvedModelId, checkoutOrigin, getCsrfToken],
  );
  return (
    <Providers locale="es">
      <IntegrationHub suite={suite} />
    </Providers>
  );
}

Las claves de identity, ai y commerce coinciden con el ID de opción de proveedor de la receta. También puedes usar el ID del candidato como fallback. Añade los proveedores que soporte tu aplicación. Si una conexión del consumidor no tiene su adaptador especializado, el centro muestra las instrucciones de configuración en lugar de ejecutar un mock local.

AppPage acepta integrationSuite, integrationsAdapter, aiAdapter, authWorkflowAdapter y los existentes commerceAdapter y callbacks de autenticación social. Puedes usar una interfaz individual sin incorporar toda la navegación de la demo.

Contrato HTTP común

createHttpIntegrationsAdapter envía la referencia del workspace en cada solicitud. Esa referencia no demuestra autorización: el backend comprueba identidad, membresía, conexión, recurso y acción.

Los DTO completos están en contracts.ts. Las acciones se declaran en definitions.ts. Los resultados incluyen registros, documentos, búsquedas, archivos, entregas, métricas, trabajos, ubicaciones, conocimiento y herramientas.

El transporte valida respuestas acotadas y rechaza workspaces, conexiones, opciones, revisiones y URL de presentación incoherentes. Admite cancelación, claves de idempotencia, conflictos de revisión, límites de solicitudes y orígenes HTTPS de backend autorizados explícitamente. Aporta orígenes exactos de autorización si tu backend devuelve un destino OAuth externo.

Para tiempo real, aporta el callback opcional subscribe. Recibe conexión y workspace, publica resultados/presencia/conexiones tipados y devuelve su limpieza. Tu SDK o transporte SSE autenticado gestiona la reconexión y el acceso a cuentas.

Transportes especializados

Identidad usa AuthWorkflowAdapter, mediante createAuthHttpAdapter o factories de callbacks para Better Auth, Clerk, Supabase Auth, Auth.js, WorkOS y Auth0. Contrato y ejemplos de identidad.

AI usa AiWorkspaceAdapter. HTTP espera el protocolo acotado NDJSON v1 de Aureform; el consumidor debe normalizar el SSE nativo del proveedor. Aceptar una herramienta y ejecutarla son pasos distintos, confirmados por los eventos posteriores del stream. Protocolo AI y ejemplos de callbacks.

Comercio usa el existente CommerceAdapter y factories para Stripe, Paddle, Polar y Lemon Squeezy. Tu backend mapea el catálogo de la aplicación a productos/precios del proveedor, concilia suscripciones y verifica webhooks. Transporte de comercio y límites de proveedores.

Los editores y la colaboración pueden usar los puntos de extensión de la interfaz de producto; el consumidor aporta su editor o transporte de suscripción. Recetas de producto. Recetas operativas.

Usa suite.ui o AppPage.integrationUi para bindings de editores nativos, suscripciones de datos por consulta, transporte de colaboración, búsqueda conectada en la paleta, mapas, Google Drive Picker, colecciones de imágenes públicas y acciones empresariales. La composición de bindings, las recetas de SDK de editores y el Mapbox nativo opcional incluyen los contratos completos. La demo no carga SDK externos para estas vistas.

Instalar código seleccionado

npx shadcn@latest add https://aureformui.com/r/integration-hub.json
npx shadcn@latest add https://aureformui.com/r/integrations-suite.json

También están integrations-http, integrations-demo, identity-integration-panel, operational-integration-workbench, product-integration-workbench, auth-integration, ai-integration y commerce-providers. Cada entrada incluye imports locales, dependencias necesarias y recursos portables.

Puedes instalar connected-map, drive-picker-panel, media-collection-panel, enterprise-diagnostics, product-editor-controls o search-bridge-command por separado para integrar esos controles. Las entradas drive-picker y media-collection aportan sus helpers de transporte.

El manifiesto de cobertura de proveedores relaciona cada candidato y opción de proveedor con su receta de frontend. El research fechado de integraciones conserva la evidencia de selección, licencias y límites de servicio; no certifica compatibilidad nativa de SDK.