e4a40298e4
- Built from scratch: apollo, chargebee, datadog, greenhouse, lever, loom, pandadoc, salesloft, sendgrid, supabase, typeform, webflow, zoho-crm, twilio, reonomy - TSC fixes: brevo, google-console, housecall-pro, meta-ads, rippling, bamboohr, close, fieldedge, freshdesk, helpscout, toast, touchbistro, hubspot, notion, quickbooks, airtable, gusto, intercom, linear, monday, salesforce, shopify, square, wave, xero - Entry points added: close, touchbistro - All 65 active servers compile with 0 TypeScript errors - 4 specialty servers skipped (competitor-research, compliance-grc, n8n-apps, product-analytics)
1649 lines
83 KiB
JavaScript
1649 lines
83 KiB
JavaScript
// Landing page generator for MCP sites
|
|
// Usage: node site-generator.js calendly zendesk trello
|
|
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
|
|
const siteConfigs = {
|
|
calendly: {
|
|
name: 'Calendly',
|
|
tagline: 'AI-Power Your Scheduling in 2 Clicks',
|
|
color: '#006BFF',
|
|
tools: '47',
|
|
description: 'The complete Calendly MCP server. Manage events, availability, and bookings with AI.',
|
|
features: [
|
|
{ title: 'Event Management', desc: 'Create, update, cancel events. Full control over your calendar.' },
|
|
{ title: 'Availability', desc: 'Check slots, set buffers, manage scheduling rules automatically.' },
|
|
{ title: 'Invitee Data', desc: 'Access booking details, custom questions, and attendee info.' },
|
|
{ title: 'Webhooks', desc: 'React to bookings in real-time. Trigger automations instantly.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Manual calendar juggling', good: 'AI books optimal slots for you' },
|
|
{ bad: 'Copy-pasting meeting details', good: 'Auto-extract and act on booking data' },
|
|
{ bad: 'Missed follow-ups', good: 'Instant post-meeting actions triggered' }
|
|
]
|
|
},
|
|
zendesk: {
|
|
name: 'Zendesk',
|
|
tagline: 'AI-Power Your Support in 2 Clicks',
|
|
color: '#03363D',
|
|
tools: '156',
|
|
description: 'The complete Zendesk MCP server. Tickets, users, and automations — all AI-accessible.',
|
|
features: [
|
|
{ title: 'Ticket Management', desc: 'Create, update, resolve tickets. Full CRUD on your queue.' },
|
|
{ title: 'User & Org Data', desc: 'Access customer history, tags, and organization details.' },
|
|
{ title: 'Automations', desc: 'Trigger macros, update fields, route tickets intelligently.' },
|
|
{ title: 'Analytics', desc: 'Pull satisfaction scores, response times, agent performance.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Drowning in ticket queues', good: 'AI triages and prioritizes automatically' },
|
|
{ bad: 'Slow first response times', good: 'Instant AI-drafted replies' },
|
|
{ bad: 'Context switching constantly', good: 'AI surfaces relevant ticket history' }
|
|
]
|
|
},
|
|
trello: {
|
|
name: 'Trello',
|
|
tagline: 'AI-Power Your Boards in 2 Clicks',
|
|
color: '#0079BF',
|
|
tools: '89',
|
|
description: 'The complete Trello MCP server. Boards, cards, and lists — fully automated.',
|
|
features: [
|
|
{ title: 'Card Management', desc: 'Create, move, update cards. Full control over your workflow.' },
|
|
{ title: 'Board Operations', desc: 'Manage lists, labels, and board settings programmatically.' },
|
|
{ title: 'Checklists & Due Dates', desc: 'Track progress, set deadlines, manage subtasks.' },
|
|
{ title: 'Member Actions', desc: 'Assign cards, manage permissions, coordinate teams.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Manual card shuffling', good: 'AI moves cards based on status' },
|
|
{ bad: 'Forgetting due dates', good: 'Proactive deadline reminders' },
|
|
{ bad: 'Scattered project updates', good: 'AI summarizes board activity' }
|
|
]
|
|
},
|
|
gusto: {
|
|
name: 'Gusto',
|
|
tagline: 'AI-Power Your Payroll in 2 Clicks',
|
|
color: '#F45D48',
|
|
tools: '72',
|
|
description: 'The complete Gusto MCP server. Payroll, benefits, and HR — AI-automated.',
|
|
features: [
|
|
{ title: 'Payroll Management', desc: 'Run payroll, check statuses, manage pay schedules.' },
|
|
{ title: 'Employee Data', desc: 'Access profiles, compensation, and employment details.' },
|
|
{ title: 'Benefits Admin', desc: 'Manage enrollments, deductions, and plan information.' },
|
|
{ title: 'Compliance', desc: 'Track tax filings, W-2s, and regulatory requirements.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Payroll deadline stress', good: 'AI reminds and preps everything' },
|
|
{ bad: 'Manual onboarding tasks', good: 'Automated new hire workflows' },
|
|
{ bad: 'Scattered employee requests', good: 'AI handles common HR queries' }
|
|
]
|
|
},
|
|
mailchimp: {
|
|
name: 'Mailchimp',
|
|
tagline: 'AI-Power Your Email Marketing in 2 Clicks',
|
|
color: '#FFE01B',
|
|
colorText: '#000',
|
|
tools: '94',
|
|
description: 'The complete Mailchimp MCP server. Campaigns, audiences, and automations.',
|
|
features: [
|
|
{ title: 'Campaign Management', desc: 'Create, send, schedule campaigns. Full email control.' },
|
|
{ title: 'Audience Data', desc: 'Manage subscribers, segments, and tags intelligently.' },
|
|
{ title: 'Automations', desc: 'Trigger journeys, manage workflows, optimize timing.' },
|
|
{ title: 'Analytics', desc: 'Track opens, clicks, revenue. AI-powered insights.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Writer\'s block on emails', good: 'AI drafts high-converting copy' },
|
|
{ bad: 'Guessing send times', good: 'AI optimizes for engagement' },
|
|
{ bad: 'Manual list hygiene', good: 'Auto-clean and segment lists' }
|
|
]
|
|
},
|
|
clickup: {
|
|
name: 'ClickUp',
|
|
tagline: 'AI-Power Your Projects in 2 Clicks',
|
|
color: '#7B68EE',
|
|
tools: '134',
|
|
description: 'The complete ClickUp MCP server. Tasks, docs, and goals — AI-managed.',
|
|
features: [
|
|
{ title: 'Task Management', desc: 'Create, update, assign tasks. Full project control.' },
|
|
{ title: 'Space & Folder Ops', desc: 'Organize workspaces, manage hierarchies automatically.' },
|
|
{ title: 'Time Tracking', desc: 'Log time, generate reports, track productivity.' },
|
|
{ title: 'Custom Fields', desc: 'Access and update any custom data on tasks.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Task overload paralysis', good: 'AI prioritizes your day' },
|
|
{ bad: 'Status update meetings', good: 'AI generates progress reports' },
|
|
{ bad: 'Scattered project info', good: 'AI finds anything instantly' }
|
|
]
|
|
},
|
|
acuity: {
|
|
name: 'Acuity Scheduling',
|
|
tagline: 'AI-Power Your Bookings in 2 Clicks',
|
|
color: '#315B7D',
|
|
tools: '38',
|
|
description: 'The complete Acuity MCP server. Appointments, availability, and clients.',
|
|
features: [
|
|
{ title: 'Appointment Management', desc: 'Book, reschedule, cancel appointments automatically.' },
|
|
{ title: 'Availability Control', desc: 'Set hours, block time, manage calendars.' },
|
|
{ title: 'Client Data', desc: 'Access intake forms, history, and preferences.' },
|
|
{ title: 'Payment Integration', desc: 'Track payments, packages, and gift certificates.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Phone tag with clients', good: 'AI handles all booking comms' },
|
|
{ bad: 'No-show revenue loss', good: 'Smart reminders reduce no-shows' },
|
|
{ bad: 'Manual intake processing', good: 'AI extracts and acts on form data' }
|
|
]
|
|
},
|
|
squarespace: {
|
|
name: 'Squarespace',
|
|
tagline: 'AI-Power Your Website in 2 Clicks',
|
|
color: '#000000',
|
|
tools: '67',
|
|
description: 'The complete Squarespace MCP server. Pages, products, and analytics.',
|
|
features: [
|
|
{ title: 'Content Management', desc: 'Update pages, blogs, and galleries programmatically.' },
|
|
{ title: 'Commerce', desc: 'Manage products, inventory, orders, and fulfillment.' },
|
|
{ title: 'Form Submissions', desc: 'Access and process contact form data automatically.' },
|
|
{ title: 'Analytics', desc: 'Pull traffic, sales, and engagement metrics.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Manual content updates', good: 'AI keeps your site fresh' },
|
|
{ bad: 'Inventory headaches', good: 'Auto-sync stock levels' },
|
|
{ bad: 'Missed form leads', good: 'Instant AI follow-up on submissions' }
|
|
]
|
|
},
|
|
brevo: {
|
|
name: 'Brevo',
|
|
tagline: 'AI-Power Your Marketing in 2 Clicks',
|
|
color: '#0B996E',
|
|
tools: '82',
|
|
description: 'The complete Brevo MCP server. Email, SMS, and automation — unified.',
|
|
features: [
|
|
{ title: 'Email Campaigns', desc: 'Create, send, and track email marketing at scale.' },
|
|
{ title: 'SMS Marketing', desc: 'Send texts, manage opt-ins, track deliverability.' },
|
|
{ title: 'Contact Management', desc: 'Sync lists, manage attributes, segment audiences.' },
|
|
{ title: 'Transactional', desc: 'Trigger order confirmations, receipts, notifications.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Disconnected channels', good: 'Unified email + SMS from AI' },
|
|
{ bad: 'Low engagement rates', good: 'AI optimizes content and timing' },
|
|
{ bad: 'Manual campaign setup', good: 'AI builds campaigns from briefs' }
|
|
]
|
|
},
|
|
wrike: {
|
|
name: 'Wrike',
|
|
tagline: 'AI-Power Your Workflows in 2 Clicks',
|
|
color: '#08CF65',
|
|
tools: '98',
|
|
description: 'The complete Wrike MCP server. Projects, tasks, and collaboration.',
|
|
features: [
|
|
{ title: 'Task Management', desc: 'Create, assign, track tasks across projects.' },
|
|
{ title: 'Project Ops', desc: 'Manage folders, timelines, and dependencies.' },
|
|
{ title: 'Time & Budget', desc: 'Track hours, expenses, and project budgets.' },
|
|
{ title: 'Approvals', desc: 'Route reviews, collect feedback, manage sign-offs.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Project status chaos', good: 'AI dashboards everything' },
|
|
{ bad: 'Approval bottlenecks', good: 'AI routes and reminds reviewers' },
|
|
{ bad: 'Resource conflicts', good: 'AI optimizes team allocation' }
|
|
]
|
|
},
|
|
bamboohr: {
|
|
name: 'BambooHR',
|
|
tagline: 'AI-Power Your HR in 2 Clicks',
|
|
color: '#73C41D',
|
|
tools: '56',
|
|
description: 'The complete BambooHR MCP server. Employees, time-off, and performance.',
|
|
features: [
|
|
{ title: 'Employee Directory', desc: 'Access profiles, org charts, and contact info.' },
|
|
{ title: 'Time-Off Management', desc: 'Request, approve, track PTO automatically.' },
|
|
{ title: 'Onboarding', desc: 'Manage new hire tasks, documents, and training.' },
|
|
{ title: 'Performance', desc: 'Track goals, reviews, and feedback cycles.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'PTO request chaos', good: 'AI handles approvals instantly' },
|
|
{ bad: 'Onboarding checklists', good: 'Automated new hire workflows' },
|
|
{ bad: 'Scattered employee data', good: 'AI answers HR questions fast' }
|
|
]
|
|
},
|
|
freshbooks: {
|
|
name: 'FreshBooks',
|
|
tagline: 'AI-Power Your Invoicing in 2 Clicks',
|
|
color: '#0075DD',
|
|
tools: '64',
|
|
description: 'The complete FreshBooks MCP server. Invoices, expenses, and clients.',
|
|
features: [
|
|
{ title: 'Invoice Management', desc: 'Create, send, track invoices automatically.' },
|
|
{ title: 'Expense Tracking', desc: 'Log expenses, attach receipts, categorize spending.' },
|
|
{ title: 'Client Portal', desc: 'Manage client info, payment methods, and history.' },
|
|
{ title: 'Reports', desc: 'Generate P&L, tax summaries, and cash flow reports.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Chasing late payments', good: 'AI sends perfect follow-ups' },
|
|
{ bad: 'Manual expense entry', good: 'AI categorizes automatically' },
|
|
{ bad: 'Tax season panic', good: 'Reports ready year-round' }
|
|
]
|
|
},
|
|
clover: {
|
|
name: 'Clover',
|
|
tagline: 'AI-Power Your POS in 2 Clicks',
|
|
color: '#43B02A',
|
|
tools: '78',
|
|
description: 'The complete Clover MCP server. Orders, inventory, and payments.',
|
|
features: [
|
|
{ title: 'Order Management', desc: 'Access transactions, refunds, and order history.' },
|
|
{ title: 'Inventory Control', desc: 'Track stock, set alerts, manage items.' },
|
|
{ title: 'Customer Data', desc: 'Build profiles, track purchases, manage loyalty.' },
|
|
{ title: 'Reporting', desc: 'Sales trends, peak hours, product performance.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'End-of-day reconciliation', good: 'AI balances automatically' },
|
|
{ bad: 'Stockout surprises', good: 'Proactive inventory alerts' },
|
|
{ bad: 'No customer insights', good: 'AI identifies your VIPs' }
|
|
]
|
|
},
|
|
servicetitan: {
|
|
name: 'ServiceTitan',
|
|
tagline: 'AI-Power Your Field Service in 2 Clicks',
|
|
color: '#FF6B00',
|
|
tools: '124',
|
|
description: 'The complete ServiceTitan MCP server. Jobs, dispatch, and invoicing.',
|
|
features: [
|
|
{ title: 'Job Management', desc: 'Create, schedule, track jobs end-to-end.' },
|
|
{ title: 'Dispatch', desc: 'Optimize routes, assign techs, manage capacity.' },
|
|
{ title: 'Estimates & Invoices', desc: 'Generate quotes, convert to invoices, collect payments.' },
|
|
{ title: 'Customer Management', desc: 'Track equipment, history, and service agreements.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Dispatch phone chaos', good: 'AI optimizes routes instantly' },
|
|
{ bad: 'Missed upsell opportunities', good: 'AI suggests relevant services' },
|
|
{ bad: 'Paper-based job tracking', good: 'Real-time digital updates' }
|
|
]
|
|
},
|
|
rippling: {
|
|
name: 'Rippling',
|
|
tagline: 'AI-Power Your Workforce in 2 Clicks',
|
|
color: '#FEC400',
|
|
colorText: '#000',
|
|
tools: '89',
|
|
description: 'The complete Rippling MCP server. HR, IT, and Finance unified.',
|
|
features: [
|
|
{ title: 'Employee Management', desc: 'Onboard, offboard, manage the full lifecycle.' },
|
|
{ title: 'Device Management', desc: 'Provision laptops, manage software, track assets.' },
|
|
{ title: 'Payroll & Benefits', desc: 'Run payroll, manage benefits, handle compliance.' },
|
|
{ title: 'App Provisioning', desc: 'Auto-provision SaaS access based on role.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Onboarding takes days', good: 'AI sets up in minutes' },
|
|
{ bad: 'Offboarding security gaps', good: 'Instant access revocation' },
|
|
{ bad: 'Manual app provisioning', good: 'Role-based auto-setup' }
|
|
]
|
|
},
|
|
freshdesk: {
|
|
name: 'Freshdesk',
|
|
tagline: 'AI-Power Your Helpdesk in 2 Clicks',
|
|
color: '#25C16F',
|
|
tools: '92',
|
|
description: 'The complete Freshdesk MCP server. Tickets, agents, and automations.',
|
|
features: [
|
|
{ title: 'Ticket Management', desc: 'Create, update, resolve tickets with AI assistance.' },
|
|
{ title: 'Agent Workspace', desc: 'Manage assignments, workload, and performance.' },
|
|
{ title: 'Knowledge Base', desc: 'Search articles, suggest solutions, update docs.' },
|
|
{ title: 'Automations', desc: 'Trigger scenarios, dispatch rules, SLA management.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Repetitive ticket responses', good: 'AI drafts perfect replies' },
|
|
{ bad: 'SLA breaches', good: 'Proactive escalation alerts' },
|
|
{ bad: 'Knowledge silos', good: 'AI surfaces relevant articles' }
|
|
]
|
|
},
|
|
keap: {
|
|
name: 'Keap',
|
|
tagline: 'AI-Power Your CRM in 2 Clicks',
|
|
color: '#2D9F2D',
|
|
tools: '76',
|
|
description: 'The complete Keap MCP server. Contacts, campaigns, and commerce.',
|
|
features: [
|
|
{ title: 'Contact Management', desc: 'Create, tag, segment contacts automatically.' },
|
|
{ title: 'Sales Pipeline', desc: 'Track deals, move stages, forecast revenue.' },
|
|
{ title: 'Campaign Automation', desc: 'Trigger sequences, send emails, track engagement.' },
|
|
{ title: 'E-commerce', desc: 'Manage products, orders, and subscriptions.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Cold lead follow-up', good: 'AI nurtures automatically' },
|
|
{ bad: 'Manual pipeline updates', good: 'AI moves deals on signals' },
|
|
{ bad: 'Missed sales opportunities', good: 'AI alerts on hot leads' }
|
|
]
|
|
},
|
|
constantcontact: {
|
|
name: 'Constant Contact',
|
|
tagline: 'AI-Power Your Email Lists in 2 Clicks',
|
|
color: '#1856A8',
|
|
tools: '58',
|
|
description: 'The complete Constant Contact MCP server. Lists, campaigns, and events.',
|
|
features: [
|
|
{ title: 'List Management', desc: 'Create, segment, clean lists automatically.' },
|
|
{ title: 'Email Campaigns', desc: 'Design, send, track email marketing at scale.' },
|
|
{ title: 'Event Marketing', desc: 'Promote events, manage RSVPs, send reminders.' },
|
|
{ title: 'Reporting', desc: 'Track opens, clicks, bounces, and conversions.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'List growth plateau', good: 'AI optimizes signup flows' },
|
|
{ bad: 'Low open rates', good: 'AI writes better subject lines' },
|
|
{ bad: 'Event no-shows', good: 'Smart reminder sequences' }
|
|
]
|
|
},
|
|
lightspeed: {
|
|
name: 'Lightspeed',
|
|
tagline: 'AI-Power Your Retail in 2 Clicks',
|
|
color: '#E4002B',
|
|
tools: '86',
|
|
description: 'The complete Lightspeed MCP server. Sales, inventory, and analytics.',
|
|
features: [
|
|
{ title: 'Sales Management', desc: 'Access transactions, refunds, and sales data.' },
|
|
{ title: 'Inventory Control', desc: 'Track stock, manage vendors, automate reorders.' },
|
|
{ title: 'Customer Profiles', desc: 'Build loyalty programs, track purchase history.' },
|
|
{ title: 'Multi-Location', desc: 'Manage inventory and sales across all stores.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Stockouts on bestsellers', good: 'AI predicts and reorders' },
|
|
{ bad: 'No cross-location visibility', good: 'Unified inventory view' },
|
|
{ bad: 'Generic customer service', good: 'AI personalizes every interaction' }
|
|
]
|
|
},
|
|
bigcommerce: {
|
|
name: 'BigCommerce',
|
|
tagline: 'AI-Power Your Store in 2 Clicks',
|
|
color: '#34313F',
|
|
tools: '112',
|
|
description: 'The complete BigCommerce MCP server. Products, orders, and customers.',
|
|
features: [
|
|
{ title: 'Product Management', desc: 'Create, update, manage catalog at scale.' },
|
|
{ title: 'Order Processing', desc: 'Track orders, manage fulfillment, handle returns.' },
|
|
{ title: 'Customer Data', desc: 'Access profiles, order history, and preferences.' },
|
|
{ title: 'Promotions', desc: 'Create coupons, discounts, and special offers.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Manual product updates', good: 'AI syncs catalog changes' },
|
|
{ bad: 'Cart abandonment', good: 'AI recovers lost sales' },
|
|
{ bad: 'Generic promotions', good: 'AI personalizes offers' }
|
|
]
|
|
},
|
|
toast: {
|
|
name: 'Toast',
|
|
tagline: 'AI-Power Your Restaurant in 2 Clicks',
|
|
color: '#FF4C00',
|
|
tools: '94',
|
|
description: 'The complete Toast MCP server. Orders, menu, and operations.',
|
|
features: [
|
|
{ title: 'Order Management', desc: 'Access tickets, modifiers, and order flow.' },
|
|
{ title: 'Menu Control', desc: 'Update items, prices, availability in real-time.' },
|
|
{ title: 'Labor Management', desc: 'Track shifts, manage schedules, monitor labor cost.' },
|
|
{ title: 'Reporting', desc: 'Sales mix, peak hours, server performance.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: '86\'d item confusion', good: 'AI updates menu instantly' },
|
|
{ bad: 'Labor cost overruns', good: 'AI optimizes scheduling' },
|
|
{ bad: 'No sales insights', good: 'AI identifies profit drivers' }
|
|
]
|
|
},
|
|
jobber: {
|
|
name: 'Jobber',
|
|
tagline: 'AI-Power Your Service Business in 2 Clicks',
|
|
color: '#7AC143',
|
|
tools: '68',
|
|
description: 'The complete Jobber MCP server. Quotes, jobs, and invoicing.',
|
|
features: [
|
|
{ title: 'Quote Management', desc: 'Create, send, track quotes automatically.' },
|
|
{ title: 'Job Scheduling', desc: 'Assign work, optimize routes, track progress.' },
|
|
{ title: 'Invoicing', desc: 'Generate invoices, collect payments, send reminders.' },
|
|
{ title: 'Client Management', desc: 'Track properties, service history, and preferences.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Quote follow-up gaps', good: 'AI chases every lead' },
|
|
{ bad: 'Scheduling conflicts', good: 'AI optimizes crew allocation' },
|
|
{ bad: 'Late invoice payments', good: 'Automated payment reminders' }
|
|
]
|
|
},
|
|
wave: {
|
|
name: 'Wave',
|
|
tagline: 'AI-Power Your Accounting in 2 Clicks',
|
|
color: '#165DFF',
|
|
tools: '42',
|
|
description: 'The complete Wave MCP server. Invoices, receipts, and reports.',
|
|
features: [
|
|
{ title: 'Invoice Management', desc: 'Create, send, track invoices automatically.' },
|
|
{ title: 'Receipt Scanning', desc: 'Capture expenses, categorize, attach to records.' },
|
|
{ title: 'Banking', desc: 'Connect accounts, categorize transactions, reconcile.' },
|
|
{ title: 'Reports', desc: 'P&L, balance sheet, cash flow — on demand.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Shoebox of receipts', good: 'AI categorizes everything' },
|
|
{ bad: 'Inconsistent invoicing', good: 'Automated billing cycles' },
|
|
{ bad: 'Accounting anxiety', good: 'AI keeps books clean' }
|
|
]
|
|
},
|
|
closecrm: {
|
|
name: 'Close CRM',
|
|
tagline: 'AI-Power Your Sales in 2 Clicks',
|
|
color: '#3D5AFE',
|
|
tools: '84',
|
|
description: 'The complete Close MCP server. Leads, calls, and pipeline.',
|
|
features: [
|
|
{ title: 'Lead Management', desc: 'Create, qualify, nurture leads automatically.' },
|
|
{ title: 'Communication', desc: 'Log calls, emails, SMS — all in one place.' },
|
|
{ title: 'Pipeline', desc: 'Track opportunities, forecast, manage deals.' },
|
|
{ title: 'Sequences', desc: 'Automate outreach, follow-ups, and cadences.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Leads falling through cracks', good: 'AI tracks every opportunity' },
|
|
{ bad: 'Manual activity logging', good: 'Auto-captured communications' },
|
|
{ bad: 'Inconsistent follow-up', good: 'AI-powered sequences' }
|
|
]
|
|
},
|
|
pipedrive: {
|
|
name: 'Pipedrive',
|
|
tagline: 'AI-Power Your Pipeline in 2 Clicks',
|
|
color: '#017737',
|
|
tools: '76',
|
|
description: 'The complete Pipedrive MCP server. Deals, contacts, and activities.',
|
|
features: [
|
|
{ title: 'Deal Management', desc: 'Create, move, track deals through your pipeline.' },
|
|
{ title: 'Contact Sync', desc: 'Manage people, organizations, and relationships.' },
|
|
{ title: 'Activity Tracking', desc: 'Log calls, meetings, tasks — stay organized.' },
|
|
{ title: 'Insights', desc: 'Win rates, velocity, forecast accuracy.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Stale deals in pipeline', good: 'AI nudges on inactivity' },
|
|
{ bad: 'Missed follow-up tasks', good: 'Automated activity reminders' },
|
|
{ bad: 'Inaccurate forecasts', good: 'AI-powered predictions' }
|
|
]
|
|
},
|
|
helpscout: {
|
|
name: 'Help Scout',
|
|
tagline: 'AI-Power Your Support in 2 Clicks',
|
|
color: '#1292EE',
|
|
tools: '54',
|
|
description: 'The complete Help Scout MCP server. Conversations, docs, and beacons.',
|
|
features: [
|
|
{ title: 'Conversation Management', desc: 'Handle emails, chats, and messages unified.' },
|
|
{ title: 'Docs', desc: 'Search and surface knowledge base articles.' },
|
|
{ title: 'Customer Profiles', desc: 'Access history, properties, and context.' },
|
|
{ title: 'Workflows', desc: 'Automate tagging, assignment, and responses.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Repetitive support queries', good: 'AI drafts from your docs' },
|
|
{ bad: 'No customer context', good: 'Full history at a glance' },
|
|
{ bad: 'Manual ticket routing', good: 'AI assigns intelligently' }
|
|
]
|
|
},
|
|
basecamp: {
|
|
name: 'Basecamp',
|
|
tagline: 'AI-Power Your Projects in 2 Clicks',
|
|
color: '#1D2D35',
|
|
tools: '62',
|
|
description: 'The complete Basecamp MCP server. Projects, todos, and messages.',
|
|
features: [
|
|
{ title: 'Project Management', desc: 'Create projects, manage access, organize work.' },
|
|
{ title: 'To-dos', desc: 'Create lists, assign tasks, track completion.' },
|
|
{ title: 'Message Boards', desc: 'Post updates, discussions, and announcements.' },
|
|
{ title: 'Schedule', desc: 'Manage milestones, events, and deadlines.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Project status meetings', good: 'AI summarizes progress' },
|
|
{ bad: 'Lost in message threads', good: 'AI finds what you need' },
|
|
{ bad: 'Forgotten deadlines', good: 'Proactive milestone alerts' }
|
|
]
|
|
},
|
|
housecallpro: {
|
|
name: 'Housecall Pro',
|
|
tagline: 'AI-Power Your Home Services in 2 Clicks',
|
|
color: '#FF5722',
|
|
tools: '72',
|
|
description: 'The complete Housecall Pro MCP server. Jobs, dispatch, and payments.',
|
|
features: [
|
|
{ title: 'Job Management', desc: 'Schedule, dispatch, track jobs end-to-end.' },
|
|
{ title: 'Estimates & Invoicing', desc: 'Generate quotes, convert, and collect payment.' },
|
|
{ title: 'Customer Portal', desc: 'Manage profiles, property info, and history.' },
|
|
{ title: 'Marketing', desc: 'Send postcards, emails, and review requests.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Dispatch chaos', good: 'AI optimizes routes' },
|
|
{ bad: 'Slow estimate turnaround', good: 'Instant AI-generated quotes' },
|
|
{ bad: 'No online reviews', good: 'Automated review requests' }
|
|
]
|
|
},
|
|
fieldedge: {
|
|
name: 'FieldEdge',
|
|
tagline: 'AI-Power Your Field Ops in 2 Clicks',
|
|
color: '#0066B2',
|
|
tools: '68',
|
|
description: 'The complete FieldEdge MCP server. Work orders, dispatch, and service.',
|
|
features: [
|
|
{ title: 'Work Order Management', desc: 'Create, assign, track service calls.' },
|
|
{ title: 'Dispatch Board', desc: 'Optimize tech schedules, manage capacity.' },
|
|
{ title: 'Service Agreements', desc: 'Track memberships, renewals, and maintenance.' },
|
|
{ title: 'Invoicing', desc: 'Generate invoices, process payments on-site.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Missed service renewals', good: 'AI tracks and reminds' },
|
|
{ bad: 'Inefficient dispatch', good: 'AI-optimized routing' },
|
|
{ bad: 'Paper work orders', good: 'Fully digital job tracking' }
|
|
]
|
|
},
|
|
touchbistro: {
|
|
name: 'TouchBistro',
|
|
tagline: 'AI-Power Your Restaurant POS in 2 Clicks',
|
|
color: '#F26522',
|
|
tools: '58',
|
|
description: 'The complete TouchBistro MCP server. Orders, reservations, and reports.',
|
|
features: [
|
|
{ title: 'Order Management', desc: 'Access tickets, mods, and transaction data.' },
|
|
{ title: 'Reservations', desc: 'Manage bookings, waitlists, and table turns.' },
|
|
{ title: 'Menu Management', desc: 'Update items, prices, and availability.' },
|
|
{ title: 'Reporting', desc: 'Sales, labor, and inventory analytics.' }
|
|
],
|
|
painPoints: [
|
|
{ bad: 'Reservation no-shows', good: 'AI confirms and reminds' },
|
|
{ bad: 'Menu update delays', good: 'Instant 86 management' },
|
|
{ bad: 'End-of-day reporting', good: 'Real-time dashboards' }
|
|
]
|
|
}
|
|
};
|
|
|
|
// Chat demo data — platform-specific conversations with embedded data widgets
|
|
const chatDemoData = {
|
|
calendly: {
|
|
initials: 'CL',
|
|
messages: [
|
|
{ type: 'user', text: 'What does my schedule look like this week? Any double-bookings?' },
|
|
{ type: 'ai', text: 'Here\'s your week at a glance:', widget: 'scheduling',
|
|
widgetData: {
|
|
type: 'schedule',
|
|
rows: [
|
|
{ day: 'Mon', count: 4, status: 'green', label: 'Light' },
|
|
{ day: 'Tue', count: 7, status: 'amber', label: 'Busy' },
|
|
{ day: 'Wed', count: 9, status: 'red', label: 'Full' },
|
|
{ day: 'Thu', count: 3, status: 'green', label: 'Light' },
|
|
{ day: 'Fri', count: 6, status: 'amber', label: 'Busy' }
|
|
],
|
|
alert: '⚠ 1 conflict: Tue 2-3pm overlap'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Fix the Tuesday conflict and block Friday afternoon for deep work' },
|
|
{ type: 'ai', text: 'Done! Rescheduled the 2pm to 3:30pm and blocked Fri 1-5pm. The invitee has been notified automatically.', action: '✓ Conflict resolved · 1 rescheduled · 1 block created' }
|
|
]
|
|
},
|
|
zendesk: {
|
|
initials: 'ZD',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me the current ticket backlog. Anything about to breach SLA?' },
|
|
{ type: 'ai', text: 'Here\'s your real-time queue:', widget: 'support',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: '#4281', subject: 'Login failures - Enterprise', priority: 'red', label: 'Urgent', time: '12m left' },
|
|
{ id: '#4279', subject: 'Billing discrepancy Q4', priority: 'amber', label: 'High', time: '2h left' },
|
|
{ id: '#4277', subject: 'API rate limit questions', priority: 'green', label: 'Normal', time: '6h left' },
|
|
{ id: '#4275', subject: 'Feature request: SSO', priority: 'green', label: 'Low', time: '1d left' }
|
|
],
|
|
summary: '34 open · 3 breaching · Avg response: 1.4h'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Auto-respond to #4281 with our login troubleshooting guide and escalate to Tier 2' },
|
|
{ type: 'ai', text: 'Done! Sent the KB article "Login Troubleshooting (Enterprise)" to the customer and escalated to Tier 2 with full context attached.', action: '✓ Auto-reply sent · Escalated to Tier 2 · SLA preserved' }
|
|
]
|
|
},
|
|
trello: {
|
|
initials: 'TR',
|
|
messages: [
|
|
{ type: 'user', text: 'What\'s the status of our Q1 launch board? Any blockers?' },
|
|
{ type: 'ai', text: 'Here\'s your sprint board:', widget: 'project',
|
|
widgetData: {
|
|
type: 'board',
|
|
columns: [
|
|
{ name: 'To Do', count: 5, color: '#6B7280' },
|
|
{ name: 'In Progress', count: 8, color: '#F59E0B' },
|
|
{ name: 'Review', count: 3, color: '#8B5CF6' },
|
|
{ name: 'Done', count: 14, color: '#10B981' }
|
|
],
|
|
alert: '⚠ 2 cards overdue · 1 blocked on design approval'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Move the 3 review cards to done and assign next sprint\'s top priority to Sarah' },
|
|
{ type: 'ai', text: 'All 3 review cards moved to Done. Assigned "API Integration v2" to Sarah with a Monday deadline. Board completion is now at 57%.', action: '✓ 3 cards moved · 1 assigned · Sprint updated' }
|
|
]
|
|
},
|
|
gusto: {
|
|
initials: 'GU',
|
|
messages: [
|
|
{ type: 'user', text: 'Payroll is due Friday. What\'s the status and are there any issues?' },
|
|
{ type: 'ai', text: 'Here\'s your payroll summary:', widget: 'payroll',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Gross Payroll', value: '$184,230', change: '+3.2%' },
|
|
{ label: 'Employees', value: '47', change: '0' },
|
|
{ label: 'Pending Items', value: '3', change: 'action' }
|
|
],
|
|
alert: '⚠ 3 items need attention: 2 missing timesheets, 1 address change'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Send reminders to the 2 missing timesheets and approve the address change' },
|
|
{ type: 'ai', text: 'Reminders sent to Jake M. and Lisa T. for timesheet submission. Address change for Marcus W. approved and updated in tax records.', action: '✓ 2 reminders sent · 1 address change approved · Payroll on track' }
|
|
]
|
|
},
|
|
mailchimp: {
|
|
initials: 'MC',
|
|
messages: [
|
|
{ type: 'user', text: 'How did last week\'s campaign perform? Compare to our averages.' },
|
|
{ type: 'ai', text: 'Here\'s your campaign breakdown:', widget: 'marketing',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Open Rate', value: '34.2%', change: '+8.1%' },
|
|
{ label: 'Click Rate', value: '4.7%', change: '+2.3%' },
|
|
{ label: 'Revenue', value: '$12,840', change: '+41%' }
|
|
],
|
|
alert: '🏆 Best performing campaign this quarter'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Create a follow-up campaign for people who opened but didn\'t click' },
|
|
{ type: 'ai', text: 'Created "Re-engagement - Product Focus" targeting 1,847 subscribers who opened without clicking. Subject line A/B test ready with send time optimized for Thursday 10am.', action: '✓ Campaign created · 1,847 recipients · A/B test ready' }
|
|
]
|
|
},
|
|
clickup: {
|
|
initials: 'CU',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me our sprint progress and who\'s overloaded this week' },
|
|
{ type: 'ai', text: 'Here\'s your sprint overview:', widget: 'project',
|
|
widgetData: {
|
|
type: 'board',
|
|
columns: [
|
|
{ name: 'Backlog', count: 12, color: '#6B7280' },
|
|
{ name: 'Active', count: 9, color: '#3B82F6' },
|
|
{ name: 'Review', count: 4, color: '#F59E0B' },
|
|
{ name: 'Complete', count: 18, color: '#10B981' }
|
|
],
|
|
alert: '⚠ Alex: 14 tasks (over capacity) · Sprint: 62% done'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Redistribute Alex\'s lower-priority tasks to team members with capacity' },
|
|
{ type: 'ai', text: 'Moved 5 tasks from Alex: 2 to Jordan, 2 to Sam, 1 to Maya. All assignees notified. Alex is now at 9 tasks (within capacity).', action: '✓ 5 tasks redistributed · Team rebalanced · Notifications sent' }
|
|
]
|
|
},
|
|
acuity: {
|
|
initials: 'AC',
|
|
messages: [
|
|
{ type: 'user', text: 'How\'s booking volume looking for this month? Any patterns?' },
|
|
{ type: 'ai', text: 'Here\'s your booking dashboard:', widget: 'scheduling',
|
|
widgetData: {
|
|
type: 'schedule',
|
|
rows: [
|
|
{ day: 'Week 1', count: 34, status: 'green', label: '34 appts' },
|
|
{ day: 'Week 2', count: 41, status: 'green', label: '41 appts' },
|
|
{ day: 'Week 3', count: 28, status: 'amber', label: '28 appts' },
|
|
{ day: 'Week 4', count: 18, status: 'red', label: '18 appts' }
|
|
],
|
|
alert: '📉 Booking drop-off in Weeks 3-4 · 4 no-shows this month'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Send reminder emails for all upcoming appointments and offer discounts to fill slow days' },
|
|
{ type: 'ai', text: 'Sent 24-hour reminders to all 46 upcoming appointments. Created a 15% off promotion for Week 4 slots and emailed to 230 past clients.', action: '✓ 46 reminders queued · Promo campaign sent to 230 clients' }
|
|
]
|
|
},
|
|
squarespace: {
|
|
initials: 'SQ',
|
|
messages: [
|
|
{ type: 'user', text: 'How\'s the store performing? What are our top products this week?' },
|
|
{ type: 'ai', text: 'Here\'s your store dashboard:', widget: 'ecommerce',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Revenue', value: '$8,420', change: '+12%' },
|
|
{ label: 'Orders', value: '127', change: '+8%' },
|
|
{ label: 'Avg Order', value: '$66.30', change: '+3.5%' }
|
|
],
|
|
alert: '🔥 Top seller: "Minimalist Desk Lamp" — 43 units this week'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'The desk lamp is almost out of stock. Mark it limited edition and update the homepage banner' },
|
|
{ type: 'ai', text: 'Updated "Minimalist Desk Lamp" with "Limited Edition - Only 12 Left" badge. Homepage banner now features it with urgency messaging. SEO meta updated too.', action: '✓ Product badge added · Homepage updated · SEO refreshed' }
|
|
]
|
|
},
|
|
brevo: {
|
|
initials: 'BV',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me our email + SMS performance this month. Which channel converts better?' },
|
|
{ type: 'ai', text: 'Here\'s your multi-channel breakdown:', widget: 'marketing',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Email Conv.', value: '3.2%', change: '+0.4%' },
|
|
{ label: 'SMS Conv.', value: '7.8%', change: '+1.2%' },
|
|
{ label: 'Total Rev.', value: '$24,150', change: '+18%' }
|
|
],
|
|
alert: '📱 SMS outperforms email 2.4x on conversion rate'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Shift 30% of next campaign budget to SMS and create a flash sale sequence' },
|
|
{ type: 'ai', text: 'Created "Flash Friday" campaign: 3-SMS sequence over 6 hours with email backup for non-openers. Budget reallocated: 70/30 email-to-SMS split.', action: '✓ Campaign built · Budget split 70/30 · Launches Friday 9am' }
|
|
]
|
|
},
|
|
wrike: {
|
|
initials: 'WR',
|
|
messages: [
|
|
{ type: 'user', text: 'We have a client deliverable Thursday. Where are we on the project?' },
|
|
{ type: 'ai', text: 'Here\'s the project status:', widget: 'project',
|
|
widgetData: {
|
|
type: 'board',
|
|
columns: [
|
|
{ name: 'Not Started', count: 2, color: '#EF4444' },
|
|
{ name: 'In Progress', count: 5, color: '#F59E0B' },
|
|
{ name: 'In Review', count: 3, color: '#8B5CF6' },
|
|
{ name: 'Approved', count: 11, color: '#10B981' }
|
|
],
|
|
alert: '⚠ 2 tasks not started · Deadline: 48 hours · At risk'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Assign the 2 unstarted tasks to available team members and fast-track the reviews' },
|
|
{ type: 'ai', text: 'Assigned "Asset Export" to Chris (available) and "QA Checklist" to Dana. Sent review nudges to 3 approvers with Thursday deadline flagged.', action: '✓ 2 tasks assigned · 3 review reminders sent · Deadline tracked' }
|
|
]
|
|
},
|
|
bamboohr: {
|
|
initials: 'BH',
|
|
messages: [
|
|
{ type: 'user', text: 'We have 3 new hires starting Monday. What\'s their onboarding status?' },
|
|
{ type: 'ai', text: 'Here\'s the onboarding tracker:', widget: 'hr',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: 'Sarah K.', subject: 'Engineering - 8/12 tasks done', priority: 'amber', label: '67%', time: 'Laptop pending' },
|
|
{ id: 'Marcus L.', subject: 'Sales - 11/12 tasks done', priority: 'green', label: '92%', time: 'Ready' },
|
|
{ id: 'Priya R.', subject: 'Design - 5/12 tasks done', priority: 'red', label: '42%', time: '7 items left' }
|
|
],
|
|
summary: 'Mon start date · 2 of 3 on track'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Rush Priya\'s remaining items and order Sarah\'s laptop' },
|
|
{ type: 'ai', text: 'Sent IT ticket for Sarah\'s MacBook Pro (expedited). Notified Priya\'s 4 task owners with urgent flags. Benefits enrollment link sent to all 3.', action: '✓ Laptop ordered · 4 urgent reminders · Benefits links sent' }
|
|
]
|
|
},
|
|
freshbooks: {
|
|
initials: 'FB',
|
|
messages: [
|
|
{ type: 'user', text: 'How\'s cash flow looking? Any overdue invoices I should worry about?' },
|
|
{ type: 'ai', text: 'Here\'s your financial snapshot:', widget: 'accounting',
|
|
widgetData: {
|
|
type: 'pnl',
|
|
rows: [
|
|
{ label: 'Revenue (MTD)', value: '$42,800', trend: 'up' },
|
|
{ label: 'Outstanding', value: '$18,350', trend: 'neutral' },
|
|
{ label: 'Overdue (>30d)', value: '$7,200', trend: 'down' },
|
|
{ label: 'Expenses (MTD)', value: '$24,100', trend: 'neutral' }
|
|
],
|
|
alert: '⚠ 3 invoices overdue >30 days totaling $7,200'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Send follow-ups on the 3 overdue invoices. Firm but professional tone.' },
|
|
{ type: 'ai', text: 'Sent personalized follow-ups to all 3: Acme Corp ($3,200), TechFlow ($2,800), and Bright Solutions ($1,200). Each includes a direct payment link and 5-day grace period.', action: '✓ 3 follow-ups sent · Payment links included · 5-day deadline set' }
|
|
]
|
|
},
|
|
clover: {
|
|
initials: 'CV',
|
|
messages: [
|
|
{ type: 'user', text: 'How did lunch service go today? Any items running low?' },
|
|
{ type: 'ai', text: 'Here\'s your lunch service report:', widget: 'restaurant',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Lunch Rev.', value: '$2,840', change: '+11%' },
|
|
{ label: 'Transactions', value: '94', change: '+7%' },
|
|
{ label: 'Avg Ticket', value: '$30.21', change: '+3.8%' }
|
|
],
|
|
alert: '⚠ Low stock: Chicken Parm (4 left), Caesar Wrap (6 left)'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Mark Chicken Parm as 86\'d when it hits 2 and reorder wraps for tomorrow' },
|
|
{ type: 'ai', text: 'Set auto-86 trigger on Chicken Parm at 2 remaining. Submitted reorder for Caesar Wrap ingredients — delivery confirmed for 7am tomorrow.', action: '✓ Auto-86 set · Reorder placed · Delivery: tomorrow 7am' }
|
|
]
|
|
},
|
|
servicetitan: {
|
|
initials: 'ST',
|
|
messages: [
|
|
{ type: 'user', text: 'How\'s the dispatch board looking for tomorrow? Any gaps or overloads?' },
|
|
{ type: 'ai', text: 'Here\'s tomorrow\'s dispatch overview:', widget: 'fieldservice',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: 'Mike T.', subject: '6 jobs · HVAC installs', priority: 'red', label: 'Over', time: '10h scheduled' },
|
|
{ id: 'Sarah K.', subject: '4 jobs · Maintenance', priority: 'green', label: 'Good', time: '7h scheduled' },
|
|
{ id: 'Dave R.', subject: '2 jobs · Plumbing', priority: 'amber', label: 'Light', time: '4h scheduled' }
|
|
],
|
|
summary: '12 jobs total · 1 tech overloaded · $14,200 est. revenue'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Move Mike\'s afternoon install to Dave and optimize all routes' },
|
|
{ type: 'ai', text: 'Reassigned the 2pm install to Dave (now 3 jobs, 6.5h). Routes optimized for all techs — saving 47 minutes total drive time. Customers notified of updated ETAs.', action: '✓ Job reassigned · Routes optimized · 47 min saved · Customers notified' }
|
|
]
|
|
},
|
|
rippling: {
|
|
initials: 'RP',
|
|
messages: [
|
|
{ type: 'user', text: 'We\'re offboarding Tom from engineering. What needs to happen?' },
|
|
{ type: 'ai', text: 'Here\'s Tom\'s access footprint:', widget: 'hr',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: 'SaaS Apps', subject: '14 apps: Slack, GitHub, AWS, Jira...', priority: 'red', label: 'Active', time: 'Revoke' },
|
|
{ id: 'Devices', subject: 'MacBook Pro M3 + Monitor', priority: 'amber', label: 'Return', time: 'Ship label' },
|
|
{ id: 'Payroll', subject: 'Final paycheck + PTO payout: $4,820', priority: 'green', label: 'Calc\'d', time: 'Ready' }
|
|
],
|
|
summary: '14 app licenses · 2 devices · Last day: Friday'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Revoke all access at 5pm Friday and process the final paycheck' },
|
|
{ type: 'ai', text: 'Scheduled access revocation for all 14 apps at 5:00 PM Friday. Return shipping label generated for devices. Final paycheck of $4,820 queued for next pay cycle.', action: '✓ 14 apps scheduled for revocation · Shipping label sent · Payroll queued' }
|
|
]
|
|
},
|
|
freshdesk: {
|
|
initials: 'FD',
|
|
messages: [
|
|
{ type: 'user', text: 'What\'s the support queue looking like? Any recurring issues this week?' },
|
|
{ type: 'ai', text: 'Here\'s your support dashboard:', widget: 'support',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: '#8842', subject: 'Password reset loop (x12)', priority: 'red', label: 'Critical', time: '12 reports' },
|
|
{ id: '#8838', subject: 'Slow dashboard loading', priority: 'amber', label: 'High', time: '7 reports' },
|
|
{ id: '#8835', subject: 'Invoice PDF formatting', priority: 'green', label: 'Medium', time: '3 reports' },
|
|
{ id: '#8831', subject: 'Mobile app crash on iOS 18', priority: 'amber', label: 'High', time: '5 reports' }
|
|
],
|
|
summary: '42 open · 12 trending issues · CSAT: 87%'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Merge the duplicate password reset tickets and send a known-issue update to affected users' },
|
|
{ type: 'ai', text: 'Merged 12 tickets into parent #8842. Sent status update to all 12 customers with workaround steps. Flagged to engineering with priority escalation.', action: '✓ 12 tickets merged · Customers notified · Engineering escalated' }
|
|
]
|
|
},
|
|
keap: {
|
|
initials: 'KP',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me the sales pipeline. Where are my hottest leads?' },
|
|
{ type: 'ai', text: 'Here\'s your pipeline snapshot:', widget: 'crm',
|
|
widgetData: {
|
|
type: 'deals',
|
|
rows: [
|
|
{ name: 'Acme Corp', stage: 'Proposal', value: '$24,000', status: 'green', prob: '80%' },
|
|
{ name: 'TechVentures', stage: 'Demo', value: '$18,500', status: 'amber', prob: '50%' },
|
|
{ name: 'GreenLeaf Co', stage: 'Qualified', value: '$31,000', status: 'amber', prob: '35%' },
|
|
{ name: 'Spark Digital', stage: 'Negotiation', value: '$12,800', status: 'green', prob: '90%' }
|
|
],
|
|
summary: '$86,300 pipeline · $36,800 likely to close this month'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Send a follow-up sequence to TechVentures and a contract to Spark Digital' },
|
|
{ type: 'ai', text: 'Started 3-email nurture sequence for TechVentures (Demo follow-up). Generated and sent contract to Spark Digital for $12,800. E-signature link included.', action: '✓ Nurture sequence started · Contract sent · E-sign ready' }
|
|
]
|
|
},
|
|
constantcontact: {
|
|
initials: 'CC',
|
|
messages: [
|
|
{ type: 'user', text: 'How are our email lists growing? Which signup source converts best?' },
|
|
{ type: 'ai', text: 'Here\'s your list health:', widget: 'marketing',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Total Subs', value: '14,280', change: '+340 this mo' },
|
|
{ label: 'Best Source', value: 'Webinar', change: '42% conv.' },
|
|
{ label: 'Churn Rate', value: '1.8%', change: '-0.3%' }
|
|
],
|
|
alert: '📈 Webinar signups convert 3x better than popup forms'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Create a segment of webinar attendees and send them our premium content offer' },
|
|
{ type: 'ai', text: 'Created segment "Webinar Attendees (Last 90 Days)" with 892 contacts. Drafted premium content email with personalized subject lines. Ready to send.', action: '✓ Segment created (892) · Email drafted · Ready for review' }
|
|
]
|
|
},
|
|
lightspeed: {
|
|
initials: 'LS',
|
|
messages: [
|
|
{ type: 'user', text: 'Compare sales across our 3 locations this week. Who\'s winning?' },
|
|
{ type: 'ai', text: 'Here\'s your multi-location breakdown:', widget: 'retail',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Downtown', value: '$18,420', change: '+14%' },
|
|
{ label: 'Mall', value: '$24,100', change: '+6%' },
|
|
{ label: 'Airport', value: '$11,300', change: '-3%' }
|
|
],
|
|
alert: '📍 Downtown growing fastest · Airport needs attention'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Transfer slow-moving Airport inventory to Downtown where it\'s selling' },
|
|
{ type: 'ai', text: 'Generated transfer order: 34 items from Airport to Downtown based on velocity analysis. Estimated revenue uplift: $2,400/week. Transfer manifest ready for printing.', action: '✓ Transfer order created · 34 items · Est. +$2,400/wk revenue' }
|
|
]
|
|
},
|
|
bigcommerce: {
|
|
initials: 'BC',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me abandoned cart stats. How much revenue are we leaving on the table?' },
|
|
{ type: 'ai', text: 'Here\'s your cart recovery dashboard:', widget: 'ecommerce',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Abandoned', value: '$34,200', change: '68 carts' },
|
|
{ label: 'Recovered', value: '$8,100', change: '23.7%' },
|
|
{ label: 'Still Open', value: '$26,100', change: 'recoverable' }
|
|
],
|
|
alert: '💰 $26,100 recoverable · 12 carts have items >$500'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Send a 10% discount to the high-value abandoned carts (over $500)' },
|
|
{ type: 'ai', text: 'Sent personalized recovery emails to 12 high-value carts with unique 10% discount codes. Expiry set to 48 hours for urgency. Expected recovery: $3,800.', action: '✓ 12 recovery emails sent · 10% codes generated · 48hr expiry' }
|
|
]
|
|
},
|
|
toast: {
|
|
initials: 'TT',
|
|
messages: [
|
|
{ type: 'user', text: 'How\'s service going tonight? Table status and any kitchen bottlenecks?' },
|
|
{ type: 'ai', text: 'Here\'s your floor status:', widget: 'restaurant',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Seated', value: '18/24', change: '75% full' },
|
|
{ label: 'Avg Turn', value: '48 min', change: '-4 min' },
|
|
{ label: 'Kitchen Q', value: '12 items', change: '~18 min' }
|
|
],
|
|
alert: '⚠ Table 7: waiting 22min for entrees · 4 tables on dessert'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Flag Table 7 as priority in kitchen and prep the 4 dessert tables for turnover' },
|
|
{ type: 'ai', text: 'Table 7 bumped to priority — kitchen ETA now 8 min. Dessert tables 3, 9, 14, 21 flagged for check drop. Waitlist notified: 4 parties ready to seat.', action: '✓ Kitchen priority set · 4 tables prepped for turn · Waitlist alerted' }
|
|
]
|
|
},
|
|
jobber: {
|
|
initials: 'JB',
|
|
messages: [
|
|
{ type: 'user', text: 'What quotes are pending? Any that are about to go cold?' },
|
|
{ type: 'ai', text: 'Here\'s your quote pipeline:', widget: 'fieldservice',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: 'Q-284', subject: 'Johnson - Full reno ($8,400)', priority: 'red', label: '14 days', time: 'Going cold' },
|
|
{ id: 'Q-291', subject: 'Park Residence - Repair ($1,200)', priority: 'amber', label: '7 days', time: 'Follow up' },
|
|
{ id: 'Q-298', subject: 'Maple St - Maintenance ($450)', priority: 'green', label: '2 days', time: 'Fresh' },
|
|
{ id: 'Q-301', subject: 'Oakwood - Install ($3,200)', priority: 'green', label: '1 day', time: 'Fresh' }
|
|
],
|
|
summary: '$13,250 in pending quotes · 1 going cold · 67% avg close rate'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Call Johnson about the reno quote and send a reminder to Park Residence' },
|
|
{ type: 'ai', text: 'Logged callback for Johnson at 2pm with quote details pre-loaded. Sent Park Residence an email reminder with an updated availability calendar for scheduling.', action: '✓ Callback scheduled · Email reminder sent · Calendar link included' }
|
|
]
|
|
},
|
|
wave: {
|
|
initials: 'WV',
|
|
messages: [
|
|
{ type: 'user', text: 'Pull up my P&L for this quarter. How are we tracking against budget?' },
|
|
{ type: 'ai', text: 'Here\'s your Q2 P&L summary:', widget: 'accounting',
|
|
widgetData: {
|
|
type: 'pnl',
|
|
rows: [
|
|
{ label: 'Revenue', value: '$128,400', trend: 'up' },
|
|
{ label: 'COGS', value: '$38,520', trend: 'neutral' },
|
|
{ label: 'Gross Profit', value: '$89,880', trend: 'up' },
|
|
{ label: 'Net Income', value: '$34,200', trend: 'up' }
|
|
],
|
|
alert: '📈 12% above budget · Net margin: 26.6%'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Export this as PDF for our investor meeting and flag any unusual expenses' },
|
|
{ type: 'ai', text: 'Generated Q2 P&L report (PDF). Flagged 2 anomalies: Software subscriptions up 34% ($2,100 over budget) and travel up 28%. Both itemized in the appendix.', action: '✓ PDF exported · 2 anomalies flagged · Investor-ready format' }
|
|
]
|
|
},
|
|
closecrm: {
|
|
initials: 'CL',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me my pipeline. What deals are closing this month?' },
|
|
{ type: 'ai', text: 'Here\'s your sales pipeline:', widget: 'crm',
|
|
widgetData: {
|
|
type: 'deals',
|
|
rows: [
|
|
{ name: 'DataSync Inc', stage: 'Negotiation', value: '$42,000', status: 'green', prob: '85%' },
|
|
{ name: 'FlowLogic', stage: 'Proposal', value: '$28,500', status: 'green', prob: '70%' },
|
|
{ name: 'NexGen Solutions', stage: 'Demo', value: '$35,000', status: 'amber', prob: '40%' },
|
|
{ name: 'Meridian Corp', stage: 'Qualified', value: '$52,000', status: 'amber', prob: '25%' }
|
|
],
|
|
summary: '$157,500 pipeline · $70,500 weighted · 2 likely this month'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Draft a contract for DataSync and schedule a follow-up call with NexGen' },
|
|
{ type: 'ai', text: 'Generated contract for DataSync ($42,000, annual terms) with e-sign link. Booked NexGen call for Thursday 3pm — agenda includes ROI analysis and case studies.', action: '✓ Contract drafted · Call booked Thu 3pm · Materials prepped' }
|
|
]
|
|
},
|
|
pipedrive: {
|
|
initials: 'PD',
|
|
messages: [
|
|
{ type: 'user', text: 'What does our pipeline look like? Any deals stuck in a stage too long?' },
|
|
{ type: 'ai', text: 'Here\'s your deal pipeline:', widget: 'crm',
|
|
widgetData: {
|
|
type: 'deals',
|
|
rows: [
|
|
{ name: 'Horizon Tech', stage: 'Proposal', value: '$38,000', status: 'red', prob: '60%' },
|
|
{ name: 'BluePeak', stage: 'Negotiation', value: '$22,400', status: 'green', prob: '80%' },
|
|
{ name: 'Vertex Group', stage: 'Demo', value: '$56,000', status: 'amber', prob: '45%' },
|
|
{ name: 'Catalyst AI', stage: 'Won', value: '$18,200', status: 'green', prob: '100%' }
|
|
],
|
|
summary: '$134,600 total · Horizon stuck 18 days in Proposal'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Nudge Horizon with a value-add case study and mark Catalyst as closed-won' },
|
|
{ type: 'ai', text: 'Sent Horizon the enterprise case study with ROI breakdown. Catalyst marked won — revenue recorded at $18,200. Win notification sent to team Slack.', action: '✓ Case study sent · Deal won ($18,200) · Team notified' }
|
|
]
|
|
},
|
|
helpscout: {
|
|
initials: 'HS',
|
|
messages: [
|
|
{ type: 'user', text: 'What\'s the conversation queue looking like? Any unhappy customers?' },
|
|
{ type: 'ai', text: 'Here\'s your support overview:', widget: 'support',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: '#2041', subject: 'Migration data loss concern', priority: 'red', label: 'Upset', time: '3 replies' },
|
|
{ id: '#2038', subject: 'Can\'t export reports', priority: 'amber', label: 'Waiting', time: '4h ago' },
|
|
{ id: '#2035', subject: 'Feature question: webhooks', priority: 'green', label: 'Easy', time: '1h ago' },
|
|
{ id: '#2033', subject: 'Billing cycle change request', priority: 'green', label: 'Simple', time: '30m ago' }
|
|
],
|
|
summary: '18 active · 1 unhappy customer · Avg response: 52min'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Draft a recovery response for the migration issue and auto-reply to the easy ones' },
|
|
{ type: 'ai', text: 'Drafted empathetic response for #2041 with data recovery steps and a direct meeting link with engineering. Auto-replied to #2035 (docs link) and #2033 (billing portal link).', action: '✓ Recovery response drafted · 2 auto-replies sent · Meeting link included' }
|
|
]
|
|
},
|
|
basecamp: {
|
|
initials: 'BC',
|
|
messages: [
|
|
{ type: 'user', text: 'Give me a status update on all active projects. Any deadlines coming up?' },
|
|
{ type: 'ai', text: 'Here\'s your project overview:', widget: 'project',
|
|
widgetData: {
|
|
type: 'board',
|
|
columns: [
|
|
{ name: 'Website v2', count: 8, color: '#10B981' },
|
|
{ name: 'Q3 Campaign', count: 14, color: '#F59E0B' },
|
|
{ name: 'API Docs', count: 5, color: '#10B981' },
|
|
{ name: 'Mobile App', count: 22, color: '#EF4444' }
|
|
],
|
|
alert: '⚠ Mobile App: 22 open to-dos · Deadline in 5 days'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Post a status update to the Mobile App project and flag overdue items' },
|
|
{ type: 'ai', text: 'Posted status update to Mobile App message board with progress summary. Flagged 6 overdue to-dos and notified assignees. Added a milestone check-in for Wednesday.', action: '✓ Status posted · 6 overdue items flagged · Check-in scheduled Wed' }
|
|
]
|
|
},
|
|
housecallpro: {
|
|
initials: 'HC',
|
|
messages: [
|
|
{ type: 'user', text: 'How many estimates are pending? What\'s our conversion rate this month?' },
|
|
{ type: 'ai', text: 'Here\'s your estimate dashboard:', widget: 'fieldservice',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: 'E-442', subject: 'Wilson - HVAC replacement ($6,200)', priority: 'red', label: '12 days', time: 'Stale' },
|
|
{ id: 'E-451', subject: 'Roberts - Plumbing fix ($890)', priority: 'green', label: '3 days', time: 'Warm' },
|
|
{ id: 'E-455', subject: 'Chen - Full service ($2,400)', priority: 'green', label: '1 day', time: 'Hot' }
|
|
],
|
|
summary: '$9,490 pending · 58% conversion rate (↑ from 52%)'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Follow up with Wilson, and convert Chen\'s estimate to a job for next week' },
|
|
{ type: 'ai', text: 'Sent Wilson a follow-up with financing options for the $6,200 HVAC job. Converted Chen\'s estimate to a scheduled job — Tuesday 9am. Confirmation text sent to the customer.', action: '✓ Follow-up sent · Job created (Tue 9am) · Customer confirmed' }
|
|
]
|
|
},
|
|
fieldedge: {
|
|
initials: 'FE',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me today\'s dispatch board. Any service agreements up for renewal?' },
|
|
{ type: 'ai', text: 'Here\'s your operations dashboard:', widget: 'fieldservice',
|
|
widgetData: {
|
|
type: 'tickets',
|
|
rows: [
|
|
{ id: 'WO-881', subject: 'Emergency - AC unit down (Commercial)', priority: 'red', label: 'Emergency', time: 'Unassigned' },
|
|
{ id: 'WO-879', subject: 'Quarterly maintenance - Suite 400', priority: 'green', label: 'Scheduled', time: '10:30am' },
|
|
{ id: 'WO-877', subject: 'Water heater install', priority: 'green', label: 'In Progress', time: 'ETA 2pm' }
|
|
],
|
|
summary: '8 work orders today · 1 emergency · 5 agreements expiring this month'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Assign the emergency to our closest available tech and send renewal offers to the 5 expiring agreements' },
|
|
{ type: 'ai', text: 'Dispatched Tom B. (4 miles away, next available at 11am) to the emergency call. Sent renewal offers to all 5 agreements with a 10% early-renewal discount.', action: '✓ Emergency dispatched · 5 renewal offers sent · 10% discount applied' }
|
|
]
|
|
},
|
|
touchbistro: {
|
|
initials: 'TB',
|
|
messages: [
|
|
{ type: 'user', text: 'How was the dinner rush? Give me the numbers and any issues.' },
|
|
{ type: 'ai', text: 'Here\'s your dinner service report:', widget: 'restaurant',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'Dinner Rev.', value: '$6,840', change: '+18%' },
|
|
{ label: 'Covers', value: '142', change: '+12%' },
|
|
{ label: 'Avg Check', value: '$48.17', change: '+5.3%' }
|
|
],
|
|
alert: '🔥 Record Friday dinner · Ribeye special sold out in 90 min'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Double the ribeye order for next Friday and comp Table 12\'s dessert — they waited too long' },
|
|
{ type: 'ai', text: 'Updated next Friday\'s ribeye prep to 60 portions (from 30). Applied comp to Table 12\'s dessert ($24) with manager note. Apology card flagged for server.', action: '✓ Prep updated · Comp applied ($24) · Apology noted' }
|
|
]
|
|
},
|
|
stripe: {
|
|
initials: 'SP',
|
|
messages: [
|
|
{ type: 'user', text: 'Show me this month\'s revenue and any failed payments I should know about.' },
|
|
{ type: 'ai', text: 'Here\'s your payment dashboard:', widget: 'payments',
|
|
widgetData: {
|
|
type: 'metrics',
|
|
cards: [
|
|
{ label: 'MRR', value: '$84,200', change: '+6.2%' },
|
|
{ label: 'Failed', value: '23', change: '$4,180' },
|
|
{ label: 'Net Revenue', value: '$80,020', change: '+5.8%' }
|
|
],
|
|
alert: '⚠ 23 failed charges ($4,180) · 18 are retry-eligible'
|
|
}
|
|
},
|
|
{ type: 'user', text: 'Retry the 18 eligible failed payments and email the other 5 to update their card' },
|
|
{ type: 'ai', text: 'Initiated retry on 18 payments ($3,420 total). Sent card update emails to 5 customers with secure payment link. 3 retries already succeeded ($840 recovered).', action: '✓ 18 retries started · 5 update emails sent · $840 already recovered' }
|
|
]
|
|
}
|
|
};
|
|
|
|
function getChatMessages(platformId) {
|
|
return chatDemoData[platformId] || chatDemoData['zendesk'];
|
|
}
|
|
|
|
function renderWidget(wd) {
|
|
if (!wd) return '';
|
|
|
|
if (wd.type === 'tickets') {
|
|
const rows = wd.rows.map(r =>
|
|
'<tr style="border-bottom:1px solid rgba(255,255,255,0.05);">' +
|
|
'<td style="padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;">' + r.id + '</td>' +
|
|
'<td style="padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + r.subject + '</td>' +
|
|
'<td style="padding:5px 6px;"><span class="status-badge status-' + r.priority + '">' + r.label + '</span></td>' +
|
|
'<td style="padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;">' + r.time + '</td></tr>'
|
|
).join('');
|
|
const summary = wd.summary ? '<div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;">' + wd.summary + '</div>' : '';
|
|
const alert = wd.alert ? '<div style="margin-top:4px;font-size:10px;color:#FBBF24;">' + wd.alert + '</div>' : '';
|
|
return '<div class="chat-embed"><table style="width:100%;border-collapse:collapse;font-size:11px;"><thead><tr style="border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;"><th style="padding:4px 6px;color:#9CA3AF;font-weight:500;">ID</th><th style="padding:4px 6px;color:#9CA3AF;font-weight:500;">Issue</th><th style="padding:4px 6px;color:#9CA3AF;font-weight:500;">Priority</th><th style="padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;">Status</th></tr></thead><tbody>' + rows + '</tbody></table>' + summary + alert + '</div>';
|
|
}
|
|
|
|
if (wd.type === 'metrics') {
|
|
const cards = wd.cards.map(c => {
|
|
const changeColor = c.change.startsWith('+') ? '#34D399' : c.change.startsWith('-') ? '#F87171' : '#9CA3AF';
|
|
return '<div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);">' +
|
|
'<div style="font-size:10px;color:#9CA3AF;margin-bottom:2px;">' + c.label + '</div>' +
|
|
'<div style="font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;">' + c.value + '</div>' +
|
|
'<div style="font-size:10px;color:' + changeColor + ';margin-top:1px;">' + c.change + '</div></div>';
|
|
}).join('');
|
|
const alert = wd.alert ? '<div style="margin-top:8px;font-size:10px;color:#FBBF24;">' + wd.alert + '</div>' : '';
|
|
return '<div class="chat-embed"><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;">' + cards + '</div>' + alert + '</div>';
|
|
}
|
|
|
|
if (wd.type === 'board') {
|
|
const cols = wd.columns.map(c =>
|
|
'<div style="text-align:center;">' +
|
|
'<div style="font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + c.name + '</div>' +
|
|
'<div style="height:40px;border-radius:6px;background:' + c.color + '20;border:1px solid ' + c.color + '40;display:flex;align-items:center;justify-content:center;">' +
|
|
'<span style="font-size:16px;font-weight:700;font-family:monospace;color:' + c.color + ';">' + c.count + '</span></div></div>'
|
|
).join('');
|
|
const alert = wd.alert ? '<div style="margin-top:8px;font-size:10px;color:#FBBF24;">' + wd.alert + '</div>' : '';
|
|
return '<div class="chat-embed"><div style="display:grid;grid-template-columns:repeat(4,1fr);gap:6px;">' + cols + '</div>' + alert + '</div>';
|
|
}
|
|
|
|
if (wd.type === 'deals') {
|
|
const rows = wd.rows.map(r =>
|
|
'<tr style="border-bottom:1px solid rgba(255,255,255,0.05);">' +
|
|
'<td style="padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;">' + r.name + '</td>' +
|
|
'<td style="padding:5px 6px;"><span class="status-badge status-' + r.status + '">' + r.stage + '</span></td>' +
|
|
'<td style="padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;">' + r.value + '</td></tr>'
|
|
).join('');
|
|
const summary = wd.summary ? '<div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;">' + wd.summary + '</div>' : '';
|
|
return '<div class="chat-embed"><table style="width:100%;border-collapse:collapse;font-size:11px;"><thead><tr style="border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;"><th style="padding:4px 6px;color:#9CA3AF;font-weight:500;">Deal</th><th style="padding:4px 6px;color:#9CA3AF;font-weight:500;">Stage</th><th style="padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;">Value</th></tr></thead><tbody>' + rows + '</tbody></table>' + summary + '</div>';
|
|
}
|
|
|
|
if (wd.type === 'pnl') {
|
|
const rows = wd.rows.map(r => {
|
|
const valColor = r.trend === 'up' ? '#34D399' : r.trend === 'down' ? '#F87171' : '#F3F4F6';
|
|
return '<tr style="border-bottom:1px solid rgba(255,255,255,0.05);">' +
|
|
'<td style="padding:5px 6px;color:#9CA3AF;">' + r.label + '</td>' +
|
|
'<td style="padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:' + valColor + ';">' + r.value + '</td></tr>';
|
|
}).join('');
|
|
const alert = wd.alert ? '<div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#FBBF24;">' + wd.alert + '</div>' : '';
|
|
return '<div class="chat-embed"><table style="width:100%;border-collapse:collapse;font-size:11px;">' + rows + '</table>' + alert + '</div>';
|
|
}
|
|
|
|
if (wd.type === 'schedule') {
|
|
const bars = wd.rows.map(r => {
|
|
const barColor = r.status === 'red' ? '#EF4444' : r.status === 'amber' ? '#F59E0B' : '#10B981';
|
|
const width = Math.min(r.count * 10, 100);
|
|
return '<div style="display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">' +
|
|
'<span style="font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;">' + r.day + '</span>' +
|
|
'<div style="flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;">' +
|
|
'<div style="height:100%;width:' + width + '%;border-radius:3px;background:' + barColor + ';"></div></div>' +
|
|
'<span style="font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;">' + r.label + '</span></div>';
|
|
}).join('');
|
|
const alert = wd.alert ? '<div style="margin-top:6px;font-size:10px;color:#FBBF24;">' + wd.alert + '</div>' : '';
|
|
return '<div class="chat-embed">' + bars + alert + '</div>';
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
// Pre-process chat messages: render widget HTML and serialize for embedding in page
|
|
function buildChatMessagesForPage(platformId, color, colorText, initials) {
|
|
const chatData = getChatMessages(platformId);
|
|
return chatData.messages.map(msg => {
|
|
const obj = { type: msg.type, text: msg.text };
|
|
if (msg.action) obj.action = msg.action;
|
|
if (msg.widgetData) {
|
|
obj.widgetHtml = renderWidget(msg.widgetData);
|
|
}
|
|
return obj;
|
|
});
|
|
}
|
|
|
|
function generateHTML(config, videoPath) {
|
|
const { name, tagline, color, colorText = '#fff', tools, description, features, painPoints } = config;
|
|
const id = Object.keys(siteConfigs).find(k => siteConfigs[k] === config);
|
|
const chatData = getChatMessages(id);
|
|
const chatInitials = chatData.initials || name.substring(0, 2).toUpperCase();
|
|
const chatMessagesForPage = buildChatMessagesForPage(id, color, colorText, chatInitials);
|
|
const chatMessagesJSON = JSON.stringify(chatMessagesForPage).replace(/</g, '\\u003c').replace(/>/g, '\\u003e');
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>${name} Connect — ${tagline}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
colors: {
|
|
brand: {
|
|
500: '${color}',
|
|
600: '${color}dd',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, ${color} 0%, #8b5cf6 50%, #ec4899 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, ${color}25, transparent); }
|
|
.card-glow:hover { box-shadow: 0 0 40px ${color}20; }
|
|
|
|
/* Chat demo styles */
|
|
.chat-demo-container {
|
|
background: rgba(24, 24, 27, 0.6);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
}
|
|
.chat-embed {
|
|
margin-top: 8px;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
background: rgba(0,0,0,0.3);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 1px 8px;
|
|
border-radius: 9999px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
|
|
<!-- Nav -->
|
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: ${color}">
|
|
<i data-lucide="zap" class="w-5 h-5" style="color: ${colorText}"></i>
|
|
</div>
|
|
<span class="font-bold text-xl">${name} Connect</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: ${color}; color: ${colorText}">
|
|
Join Waitlist
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: ${color}"></span>
|
|
Open Source + Hosted
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
|
Connect <span class="gradient-text">${name}</span><br>to AI in 2 Clicks
|
|
</h1>
|
|
|
|
<p class="text-xl text-zinc-400 mb-8">
|
|
${description} <strong class="text-white">${tools} tools</strong> ready to automate.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: ${color}; color: ${colorText}">
|
|
Join the Waitlist
|
|
</a>
|
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
|
See Features
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
|
<video autoplay loop muted playsinline class="w-full">
|
|
<source src="${videoPath}" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: ${color}; color: ${colorText}">
|
|
${tools} API Tools
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Chat Demo -->
|
|
<section class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-3xl mx-auto px-6">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your ${name} data in real-time</p>
|
|
<div class="chat-demo-container">
|
|
<!-- Chat header -->
|
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, ${color}, ${color}99)">
|
|
<span class="font-bold text-xs" style="color: ${colorText}">${chatInitials}</span>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-sm">${name} Connect AI</div>
|
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
|
Online · ${tools} tools available
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chat messages -->
|
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
|
<!-- Messages animated in via JS -->
|
|
</div>
|
|
<!-- Chat input -->
|
|
<div class="px-4 pb-4">
|
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
|
<input type="text" placeholder="Ask ${name} Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: ${color}">
|
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: ${colorText}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pain Points -->
|
|
<section class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
|
Setting up ${name} + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
|
</h2>
|
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
|
${painPoints.map(p => `
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<div class="flex items-start gap-3 mb-4">
|
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
</div>
|
|
<p class="text-zinc-400">${p.bad}</p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: ${color}30">
|
|
<i data-lucide="check" class="w-4 h-4" style="color: ${color}"></i>
|
|
</div>
|
|
<p class="text-white font-medium">${p.good}</p>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
|
<p class="text-zinc-400 text-center mb-12">Full ${name} API access through one simple connection</p>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
${features.map(f => `
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: ${color}20">
|
|
<i data-lucide="layers" class="w-5 h-5" style="color: ${color}"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-lg mb-2">${f.title}</h3>
|
|
<p class="text-zinc-400 text-sm">${f.desc}</p>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Waitlist -->
|
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-xl mx-auto px-6 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\\'text-green-400 py-4\\'>You\\'re on the list! We\\'ll reach out soon.</p>'">
|
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: ${color}; color: ${colorText}">
|
|
Get Early Access
|
|
</button>
|
|
</form>
|
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Open Source -->
|
|
<section class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-4xl mx-auto px-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
|
</h2>
|
|
<p class="text-zinc-400 mb-6">
|
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
The hosted version just saves you the hassle.
|
|
</p>
|
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
|
<i data-lucide="github" class="w-5 h-5"></i>
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-3xl mx-auto px-6">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
|
<div class="space-y-6">
|
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
What is MCP?
|
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
|
</details>
|
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
Do I need to install anything?
|
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your ${name} account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
|
</details>
|
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
Is my data secure?
|
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your ${name} API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your ${name} settings.</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your ${name}?</h2>
|
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with ${name} Connect.</p>
|
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: ${color}; color: ${colorText}">
|
|
Join the Waitlist →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="py-8 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
|
© 2026 ${name} Connect. Not affiliated with ${name}.
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
|
<script>
|
|
lucide.createIcons();
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Chat demo animation
|
|
const chatDemo = document.getElementById('chat-demo');
|
|
const chatMessages = ${chatMessagesJSON};
|
|
|
|
function createChatMessage(msg) {
|
|
const div = document.createElement('div');
|
|
div.style.opacity = '0';
|
|
div.style.transform = 'translateY(15px)';
|
|
|
|
if (msg.type === 'user') {
|
|
div.className = 'flex justify-end';
|
|
div.innerHTML = '<div style="background: ${color}20; border: 1px solid ${color}40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
|
} else {
|
|
div.className = 'flex gap-3';
|
|
var widgetHtml = msg.widgetHtml || '';
|
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:${color};display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, ${color}, ${color}99)"><span class="font-bold text-[10px]" style="color: ${colorText}">${chatInitials}</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
|
}
|
|
return div;
|
|
}
|
|
|
|
let chatAnimated = false;
|
|
ScrollTrigger.create({
|
|
trigger: chatDemo,
|
|
start: 'top 80%',
|
|
onEnter: () => {
|
|
if (chatAnimated) return;
|
|
chatAnimated = true;
|
|
chatMessages.forEach((msg, i) => {
|
|
setTimeout(() => {
|
|
const el = createChatMessage(msg);
|
|
chatDemo.appendChild(el);
|
|
lucide.createIcons();
|
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
|
}, i * 1000);
|
|
});
|
|
},
|
|
once: true
|
|
});
|
|
|
|
// Reveal animations for other sections
|
|
gsap.utils.toArray('section').forEach(section => {
|
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>`;
|
|
}
|
|
|
|
// Main
|
|
const args = process.argv.slice(2);
|
|
if (args.length === 0) {
|
|
console.log('Usage: node site-generator.js <mcp1> <mcp2> ...');
|
|
console.log('Available:', Object.keys(siteConfigs).join(', '));
|
|
process.exit(1);
|
|
}
|
|
|
|
const outputDir = path.join(__dirname, 'sites');
|
|
if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
|
|
|
|
for (const id of args) {
|
|
const config = siteConfigs[id];
|
|
if (!config) {
|
|
console.log(`✗ Unknown MCP: ${id}`);
|
|
continue;
|
|
}
|
|
|
|
const videoPath = `../output/${id}.mp4`;
|
|
const html = generateHTML(config, videoPath);
|
|
const outPath = path.join(outputDir, `${id}.html`);
|
|
fs.writeFileSync(outPath, html);
|
|
console.log(`✓ ${config.name} → ${outPath}`);
|
|
}
|
|
|
|
export { siteConfigs, generateHTML };
|