Examples

Real-world integration patterns for the FlowStack Embedding SDK.

SaaS Dashboard Integration

Embed the automation builder in your product's settings page:

import { FlowStackEmbed } from '@flowstack/embed-sdk';
import { useAuth } from './auth';

function AutomationSettings() {
  const { user } = useAuth();
  const [token, setToken] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'builder' | 'runs'>('builder');

  useEffect(() => {
    fetch('/api/flowstack-token', {
      headers: { Authorization: `Bearer ${user.accessToken}` },
    })
      .then(res => res.json())
      .then(data => setToken(data.token));
  }, [user]);

  if (!token) return <LoadingSpinner />;

  return (
    <div className="automation-settings">
      <h2>Automations</h2>
      <div className="tabs">
        <button onClick={() => setActiveTab('builder')}>Builder</button>
        <button onClick={() => setActiveTab('runs')}>Run History</button>
      </div>
      <FlowStackEmbed
        token={token}
        view={activeTab === 'builder' ? 'flows' : 'runs'}
        hideNavigation={true}
        branding={{
          primaryColor: '#6366F1',
          appName: 'MyApp Automations',
        }}
        onFlowCreated={(flow) => {
          trackEvent('automation_created', { flowId: flow.id });
        }}
        onFlowRun={(run) => {
          if (run.status === 'FAILED') {
            showNotification('Automation failed', 'error');
          }
        }}
        style={{ width: '100%', height: 'calc(100vh - 200px)' }}
      />
    </div>
  );
}

E-Commerce Notification Builder

Let merchants create automated notifications:

function NotificationBuilder({ storeId }: { storeId: string }) {
  const token = useFlowStackToken(storeId);

  return (
    <FlowStackEmbed
      token={token}
      view="builder"
      hideNavigation={true}
      hideSidebar={true}
      allowedPieces={[
        'gmail',
        'slack',
        'twilio',
        'sendgrid',
        'discord',
        'http',
      ]}
      branding={{
        appName: 'Store Notifications',
        primaryColor: '#059669',
      }}
      onFlowCreated={(flow) => {
        saveFlowToStore(storeId, flow.id);
      }}
      style={{ width: '100%', height: '600px' }}
    />
  );
}

Webhook-Only Integration

For apps that only need webhook-triggered automations:

function WebhookManager() {
  const token = useFlowStackToken();

  return (
    <FlowStackEmbed
      token={token}
      view="flows"
      hideNavigation={true}
      allowedPieces={['webhook', 'http', 'code', 'gmail', 'slack']}
      onFlowCreated={async (flow) => {
        // Fetch the webhook URL for the new flow
        const res = await fetch(`/api/flowstack/flows/${flow.id}/webhook`);
        const { webhookUrl } = await res.json();
        // Register the webhook URL with your system
        await registerWebhook(webhookUrl);
      }}
      style={{ width: '100%', height: '100vh' }}
    />
  );
}

Backend Token Endpoint (Express)

Complete backend implementation for token generation:

import express from 'express';
import jwt from 'jsonwebtoken';
import { authenticateUser } from './middleware';

const router = express.Router();

router.get('/api/flowstack-token', authenticateUser, (req, res) => {
  const token = jwt.sign(
    {
      sub: req.user.id,
      email: req.user.email,
      name: req.user.name,
      projectId: process.env.FLOWSTACK_PROJECT_ID,
      role: req.user.isAdmin ? 'admin' : 'editor',
      iat: Math.floor(Date.now() / 1000),
      exp: Math.floor(Date.now() / 1000) + 3600,
    },
    process.env.FLOWSTACK_SIGNING_SECRET
  );

  res.json({ token });
});

export default router;