Skip to main content

​
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
​
removeIntegration
​
refetch

​
Data Structures

​
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>
  );
}