How to Build Integration hub with V0

1// Paste this prompt into V0's AI chat:
2// Build an integration hub. Create a Supabase schema with:
3// 1. connectors: id (uuid PK), name (text), slug (text unique), description (text), icon_url (text), auth_type (text check in 'oauth2','api_key','webhook'), oauth_config (jsonb), base_url (text), is_active (boolean default true)
4// 2. user_connections: id (uuid PK), user_id (uuid FK to auth.users), connector_id (uuid FK to connectors), credentials_encrypted (text), status (text default 'active' check in 'active','expired','revoked'), metadata (jsonb), connected_at (timestamptz), expires_at (timestamptz)
5// 3. flows: id (uuid PK), user_id (uuid FK to auth.users), name (text), description (text), is_active (boolean default false), trigger_connection_id (uuid FK to user_connections), trigger_config (jsonb), created_at (timestamptz), updated_at (timestamptz)
6// 4. flow_steps: id (uuid PK), flow_id (uuid FK to flows), position (int), connection_id (uuid FK to user_connections), action_type (text), action_config (jsonb), transform_code (text)
7// 5. flow_executions: id (uuid PK), flow_id (uuid FK to flows), status (text check in 'running','completed','failed'), started_at (timestamptz), completed_at (timestamptz), steps_log (jsonb), error_message (text)
8// 6. webhook_endpoints: id (uuid PK), flow_id (uuid FK to flows), token (text unique), is_active (boolean default true), last_triggered_at (timestamptz)
9// Seed connectors table with 5 entries: GitHub, Slack, Stripe, Gmail, Notion with their base_urls and auth_types
10// Add RLS: users see only their own connections, flows, and executions.

1// Paste this prompt into V0's AI chat:
2// Build connector marketplace and OAuth:
3// 1. app/connectors/page.tsx — marketplace:
4//    - Grid of Card components showing each connector with icon, name, description, auth_type Badge
5//    - Search Input filtering by name
6//    - "Connect" Button per connector that either:
7//      - Opens OAuth2 authorization URL (for oauth2 type)
8//      - Opens Dialog with API key Input (for api_key type)
9//    - Already-connected services show a green "Connected" Badge and "Disconnect" Button
10//
11// 2. app/api/oauth/[connector]/callback/route.ts:
12//    - Receives code and state from OAuth provider
13//    - Exchanges authorization code for access_token and refresh_token
14//    - Encrypts tokens using AES-256-GCM with ENCRYPTION_KEY from env vars
15//    - Stores encrypted tokens in user_connections.credentials_encrypted
16//    - Sets expires_at based on token expiry
17//    - Redirects to /connections with success message
18//
19// 3. app/connections/page.tsx — my connections:
20//    - Card per connected service showing connector icon, name, status Badge, connected_at
21//    - "Refresh" Button for expired OAuth tokens
22//    - AlertDialog for disconnection confirmation
23//    - Server Action to revoke connection (set status='revoked')

1// Paste this prompt into V0's AI chat:
2// Build a flow builder at app/flows/new/page.tsx as a 'use client' component.
3// Requirements:
4// - Flow name Input at the top
5// - Trigger selection: Select a connected service as trigger, configure trigger event (e.g., GitHub: push, Slack: message, Stripe: payment_intent.succeeded) via Select
6// - Steps list below trigger, each step as a Card showing:
7//   - Step number and connection icon
8//   - Select for connected service
9//   - Select for action type (e.g., Slack: send_message, GitHub: create_issue)
10//   - Action config: Textarea for JSON template with {{trigger.data.field}} placeholders
11//   - Optional transform_code: Textarea for JavaScript transform
12//   - Remove step Button (trash icon)
13// - "+ Add Step" Button to append a new step
14// - Sheet sidebar for step configuration details
15// - "Save & Activate" Button that creates the flow, flow_steps, and if trigger is webhook, creates a webhook_endpoint with a unique token
16// - Switch for flow active/inactive toggle
17// - Use Card for steps, Sheet for config sidebar, Select for dropdowns, Accordion for advanced settings

1// Paste this prompt into V0's AI chat:
2// Build the execution engine and webhooks:
3// 1. app/api/flows/[id]/execute/route.ts:
4//    - POST handler that creates a flow_execution with status='running'
5//    - Iterates through flow_steps ordered by position
6//    - For each step: decrypt the connection credentials, call the external API with the action_config (replacing {{}} placeholders with trigger data), log the step result (success/failure, response data, timing) in steps_log jsonb array
7//    - If a step fails: set execution status='failed', store error_message, stop execution
8//    - On completion: set status='completed', completed_at=now()
9//    - Return the execution result
10//
11// 2. app/api/webhooks/[token]/route.ts:
12//    - POST handler that receives incoming webhook payloads
13//    - Looks up the flow by webhook_endpoint.token
14//    - Checks flow.is_active and webhook_endpoint.is_active
15//    - Updates webhook_endpoint.last_triggered_at
16//    - Calls the execute API with the webhook payload as trigger data
17//    - Returns 200 immediately, execution runs in background
18//
19// 3. Create a helper lib/encryption.ts:
20//    - encrypt(plaintext: string): string — AES-256-GCM with ENCRYPTION_KEY
21//    - decrypt(ciphertext: string): string — decrypts back to plaintext
22//    - ENCRYPTION_KEY from process.env (never NEXT_PUBLIC_)

1// Paste this prompt into V0's AI chat:
2// Build dashboard and logs:
3// 1. app/page.tsx — dashboard:
4//    - Stats Cards: active flows count, connected services count, executions today, failure rate
5//    - Recent executions Table: flow name, trigger source, status Badge, duration, timestamp
6//    - Active flows list with quick toggle Switch per flow
7//    - "Create Flow" Button linking to /flows/new
8//
9// 2. app/flows/[id]/page.tsx — flow detail:
10//    - Flow name, description, active Switch, trigger info Card
11//    - Steps list showing the flow configuration
12//    - Execution history Table for this flow with status, timing, started_at
13//    - "Run Now" Button that manually triggers execution
14//    - Webhook URL display (if trigger type is webhook) with copy Button
15//
16// 3. app/flows/[id]/logs/page.tsx — execution detail:
17//    - Execution header: status Badge, duration, started_at → completed_at
18//    - Accordion showing each step's result: step name, connection icon, status, response data preview, timing
19//    - If failed: error_message highlighted in red Card
20//    - JSON viewer for step input/output data
21//    - "Re-run" Button to retry the execution