welcomeSteps.tsx

import {
  Globe,
  Server,
  Monitor,
  Wrench,
  Rocket,
} from 'lucide-react';

export interface WelcomeStep {
  id: string;
  icon: React.ReactNode;
  title: string;
  description: string;
  details: string[];
  tip: string | null;
}

export const WELCOME_STEPS: WelcomeStep[] = [
  {
    id: 'welcome',
    icon: <Rocket className="h-8 w-8" />,
    title: 'Welcome to McpMux',
    description:
      'Your centralized MCP server manager. Configure your MCP servers once, connect every AI client through a single gateway.',
    details: [
      'No more duplicating server configs across Cursor, Claude Desktop, VS Code, and others',
      'Credentials are encrypted in your OS keychain — not stored in plain-text JSON',
      'One local gateway endpoint for all your AI clients',
    ],
    tip: null,
  },
  {
    id: 'discover',
    icon: <Globe className="h-8 w-8" />,
    title: 'Discover & Install Servers',
    description:
      'Browse the curated registry and install MCP servers with one click. Search by category, auth type, or name.',
    details: [
      'Open the Discover page from the sidebar to browse available servers',
      'Click Install on any server to add it to your active space',
      'Servers requiring API keys or OAuth will prompt you for credentials',
    ],
    tip: 'Servers are cached locally so you can browse even when offline.',
  },
  {
    id: 'spaces',
    icon: <Server className="h-8 w-8" />,
    title: 'Organize with Spaces',
    description:
      'Spaces are isolated workspaces with their own servers and credentials. Use them to separate work, personal, and project contexts.',
    details: [
      'Create spaces from the Spaces page — each gets its own server set',
      'Switch the active space from the sidebar dropdown',
      'Your AI clients automatically follow the active space',
    ],
    tip: 'A default space is created for you on first launch.',
  },
  {
    id: 'connect',
    icon: <Monitor className="h-8 w-8" />,
    title: 'Connect Your AI Clients',
    description:
      'Add one config snippet to each AI client. All installed servers become available through the McpMux gateway.',
    details: [
      'Copy the gateway config from the Dashboard page',
      'Paste it into your client\'s MCP settings (inside mcpServers)',
      'Clients like Cursor, Claude Desktop, VS Code, and Windsurf are all supported',
    ],
    tip: 'The gateway runs locally — your data never leaves your machine.',
  },
  {
    id: 'featuresets',
    icon: <Wrench className="h-8 w-8" />,
    title: 'Control with FeatureSets',
    description:
      'FeatureSets let you control which tools, prompts, and resources each client can access. Create permission bundles for fine-grained control.',
    details: [
      'Go to FeatureSets to create bundles like "Read Only" or "Dev Tools"',
      'Assign specific server features to each bundle',
      'Grant bundles to individual clients from the Clients page',
    ],
    tip: 'A "Default" FeatureSet is auto-created for each space.',
  },
];