connect-google-services

Let each user connect Google and use the sub-services their scopes actually grant (analytics, ads, drive, youtube)

Plane: oauth_connection · Requires: capability external_integration, end-user connection google

Steps: 1. useConnections — Call connect('google', ['drive', 'analytics']) with ONLY the sub-services the app needs; scopes gate what the agent can do. 2. useConnections — After connect, read the connection's services list — render features per granted sub-service, not per connected=true. 3. useAgent — With capabilities ['external_integration','data_access'], prompt the agent to sync the sub-service's data (e.g. Drive file metadata) into its collection in the declared doc_schema shape. 4. useCollection — Read the synced collection reactively ({ layer: 'user' }, refreshOnAgentComplete: true).

Examples

import { useConnections, useAgent, useCollection } from '@flowstack/sdk';

export function DrivePanel() {
  const { connections, connect } = useConnections();
  const google = connections.find(c => c.provider === 'google');
  const hasDrive = google?.connected && google.services?.includes('drive');
  const { query } = useAgent(undefined, {
    capabilities: ['external_integration', 'data_access'],
  });
  const { documents: files } = useCollection('drive_files', {
    layer: 'user',
    sort: { modified_at: -1 },
    refreshOnAgentComplete: true,
  });

  if (!hasDrive) {
    return <button onClick={() => connect('google', ['drive'])}>Connect Google Drive</button>;
  }
  return (
    <>
      <button onClick={() => query('Sync my recent Drive files into drive_files (upsert on file_id).')}>
        Sync Drive
      </button>
      <ul>{files.map(f => <li key={f.file_id}>{f.name}</li>)}</ul>
    </>
  );
}

See also

connect-strava · connect-oauth-service · useConnections · useAgent · useCollection

Source: sync-recipes.mjs ← https://sage-api.flowstack.fun/recipes.json · Also available in llms-full.txt and registry.json.