821 lines
38 KiB
JavaScript
821 lines
38 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' }
|
|
]
|
|
}
|
|
};
|
|
|
|
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);
|
|
|
|
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; }
|
|
</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>
|
|
|
|
<!-- 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>lucide.createIcons();</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 };
|