useConnections

hook

Manage a user's external service connections (Google, Reddit, Strava, Twitter/X) so the AI agent can access their data.

import { useConnections } from 'flowstack-sdk'

Every built app should include a Settings page where users connect external services. Without connecting, the AI agent cannot access Google Analytics, Drive, Ads, YouTube, Reddit, Strava, or Twitter data.

Include this Settings page in every built app's navigation — the AI chat agent can only access services the user has connected.

Signature

const { connections, connect, disconnect, isLoading } = useConnections()

Returns

Field	Type	Description
`connections`	`ConnectionStatus`	Per-provider status, e.g. `connections.google.connected` (boolean), `connections.google.analytics` (boolean — specific service), `connections.google.email` (string if connected), `connections.reddit.connected`, `connections.strava.connected`, `connections.twitter.connected`.
`connect`	`(provider: string, services?: string[]) => void`	Open the OAuth popup for a provider. For Google pass specific services (`['analytics', 'drive']`) or `['all']`; other providers take no services arg.
`disconnect`	`(provider: string) => void`	Disconnect a provider, e.g. `disconnect('google')`.
`isLoading`	`boolean`	Connection request in flight.

Examples

Check status and connect/disconnect

import { useConnections } from 'flowstack-sdk';

const { connections, connect, disconnect, isLoading } = useConnections();

// Check status
connections.google.connected     // true | false
connections.google.analytics     // true | false (specific service)
connections.google.email         // "user@gmail.com" if connected
connections.reddit.connected     // true | false
connections.strava.connected     // true | false
connections.twitter.connected    // true | false

// Connect — opens OAuth popup
connect('google', ['analytics', 'drive']);  // specific Google services
connect('google', ['all']);                  // all Google services
connect('reddit');                           // Reddit
connect('strava');                           // Strava
connect('twitter');                          // Twitter/X

// Disconnect
disconnect('google');
disconnect('reddit');

Settings page pattern

function SettingsPage() {
  const { connections, connect, disconnect } = useConnections();

  const services = [
    { key: 'google', label: 'Google', sublabel: 'Analytics, Ads, Drive, YouTube', services: ['all'] as const },
    { key: 'reddit', label: 'Reddit', sublabel: 'Feed access' },
    { key: 'strava', label: 'Strava', sublabel: 'Activity data' },
    { key: 'twitter', label: 'Twitter / X', sublabel: 'Timeline and bookmarks' },
  ];

  return (
    <div>
      <h2>Connected Services</h2>
      <p>Connect your accounts so the AI assistant can access your data.</p>
      {services.map(({ key, label, sublabel, services: svc }) => {
        const status = connections[key as keyof typeof connections];
        return (
          <div key={key} className="connection-card">
            <div>
              <h3>{label}</h3>
              <p className="muted">{sublabel}</p>
            </div>
            {status.connected
              ? <button onClick={() => disconnect(key as any)}>Disconnect</button>
              : <button onClick={() => connect(key as any, svc as any)}>Connect</button>}
          </div>
        );
      })}
    </div>
  );
}

NoteInclude a Settings page using this hook in every built app's navigation. The AI chat agent can only access services the user has connected.

useConnections

Signature

Returns

Examples

See also