useAgentIntegrations

Manage third-party integrations for AI agents.

useAgentIntegrations

The useAgentIntegrations hook manages third-party integrations (like Google Drive, Slack, etc.) for AI agents, including OAuth consent URL generation and integration removal.

Parameters

agentName · string | null

The name of the agent to fetch integrations for

Return Value

integrations · AgentIntegration[]

List of available integrations for the agent

loading · boolean

Whether integrations are loading

error · Error | null

Any error that occurred

generateConsentURL

Show Generate an OAuth consent URL for connecting an integration

integrationId · string

The integration ID to generate a consent URL for

returns · Promise<ConsentURLResponse>

The consent URL response containing the URL and state

removeIntegration

Show Disconnect and remove an integration

integrationId · string

The integration ID to remove

returns · Promise<void>

Resolves when the integration is removed

refetch

Show Refetch the integrations list

returns · Promise<void>

Resolves when the integrations list is refetched

Data Structures

Show AgentIntegration

interface AgentIntegration {
  id: string;                    // Unique identifier for the integration
  name: string;                  // Display name of the integration
  integration_type: string;      // Type of integration (e.g., "google_drive", "slack")
  agent_id: string;              // ID of the associated agent
  is_active: boolean;            // Whether the integration is currently connected
  connection_metadata?: Record<string, any>;  // Additional connection details
}

Show ConsentURLResponse

interface ConsentURLResponse {
  consent_url: string;  // URL to redirect user to for OAuth consent
  state: string;        // OAuth state parameter for security
  expires_in: number;   // Number of seconds until the consent URL expires
}

Examples

List Integrations

import { useAgentIntegrations } from "@wacht/react-router";

function IntegrationsList({ agentName }: { agentName: string }) {
  const { integrations, loading } = useAgentIntegrations(agentName);

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {integrations.map((integration) => (
        <li key={integration.id}>
          {integration.name}
          {integration.is_active && " ✓"}
        </li>
      ))}
    </ul>
  );
}

Connect Integration

import { useAgentIntegrations } from "@wacht/react-router";

function ConnectIntegration({ agentName }: { agentName: string }) {
  const { generateConsentURL } = useAgentIntegrations(agentName);
  const [integratingId, setIntegratingId] = useState<string | null>(null);

  const handleConnect = async (integrationId: string) => {
    setIntegratingId(integrationId);
    const result = await generateConsentURL(integrationId);
    // Redirect user to consent page
    window.location.href = result.consent_url;
  };

  return (
    <button onClick={() => handleConnect("google_drive")} disabled={integratingId !== null}>
      Connect Google Drive
    </button>
  );
}

Disconnect Integration

import { useAgentIntegrations } from "@wacht/react-router";

function IntegrationItem({ integration, agentName }: { integration: AgentIntegration; agentName: string }) {
  const { removeIntegration } = useAgentIntegrations(agentName);

  return (
    <li>
      {integration.name}
      {integration.is_active && (
        <button onClick={() => removeIntegration(integration.id)}>
          Disconnect
        </button>
      )}
    </li>
  );
}

Related

• useAgentContext - Agent chat context
• useAgentSession - Agent session management