create-swc-vite-react-app

March 30, 2025 · View on GitHub

A CLI tool to create React applications with Vite and Spectrum Web Components for fast development and build times. Now with MCP support for integration with AI assistants!

Features

  • ⚡️ Lightning fast development with Vite
  • 📦 TypeScript support built-in
  • ⚛️ React 19+ for the latest features
  • 🎨 Spectrum Web Components integration
  • 🌈 Customizable theming options
  • 🔍 ESLint configuration included
  • 🧩 Path aliases (@components) for clean imports
  • 🎨 Beautiful default template
  • 📱 Responsive design ready
  • 🌙 Dark mode support
  • 🤖 MCP support for integration with AI assistants

Generated App Preview

The generated app comes with a beautiful, responsive layout that includes a header, sidebar navigation, and main content area. Here's how it looks:

Generated App Preview

The app includes (some of the items listed below are still in development):

  • Modern, clean design
  • Responsive layout
  • Dark/Light theme support
  • Customizable color schemes
  • Collapsible sidebar
  • Ready-to-use Spectrum components

Quick Start

# Using npm
npx create-swc-vite-react-app my-app

# Using yarn
yarn create swc-vite-react-app my-app

# Using pnpm
pnpm create swc-vite-react-app my-app

# Create project in current directory
npx create-swc-vite-react-app .

Options

  • --eslint - Include ESLint configuration (default: true)
  • --use-npm - Use npm as package manager
  • --use-pnpm - Use pnpm as package manager
  • --use-yarn - Use yarn as package manager
  • --theme-scale - Theme scale: large, medium, or both (default: both)
  • --theme-color - Theme color: dark, light, or both (default: both)
  • --system - Design system: spectrum, spectrum-two, or express (default: spectrum)
  • --mcp - Start in MCP mode for integration with AI assistants

Note: The SpTheme.ts file will be customized with the appropriate imports based on your theme selections.

Project Structure

The generated project will have the following structure:

my-app/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   ├── icons/
│   │   │   └── [icon components]
│   │   ├── Accordion.ts
│   │   ├── ActionBar.ts
│   │   ├── ActionButton.ts
│   │   ├── ActionGroup.ts
│   │   ├── ActionMenu.ts
│   │   ├── AlertBanner.ts
│   │   ├── AlertDialog.ts
│   │   ├── Button.ts
│   │   ├── Card.ts
│   │   ├── Checkbox.ts
│   │   ├── Dialog.ts
│   │   ├── Icon.ts
│   │   ├── SpTheme.ts (imports customized based on theme options)
│   │   ├── Toast.ts
│   │   ├── Tooltip.ts
│   │   ├── types.ts
│   │   └── [60+ components in total]
│   ├── layout/
│   │   ├── Header.tsx
│   │   ├── Header.css
│   │   ├── Sidebar.tsx
│   │   ├── Sidebar.css
│   │   ├── MainContent.tsx
│   │   └── MainContent.css
│   ├── App.tsx
│   ├── App.css
│   └── main.tsx
├── .eslintrc.cjs
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

The project includes:

  • components/: A comprehensive set of Spectrum Web Components wrappers
    • icons/: SVG icon components
    • Various UI components (60+ components available)
    • SpTheme.ts: Theme configuration (customized based on your options)
    • types.ts: TypeScript type definitions
  • layout/: Pre-built layout components
    • Header: Application header with navigation
    • Sidebar: Collapsible side navigation
    • MainContent: Main content area with responsive design
  • App.tsx: Main application component
  • Configuration files: ESLint, TypeScript, and Vite configs

Available Scripts

In the project directory, you can run:

  • npm dev - Starts the development server
  • npm build - Bundles the app for production
  • npm preview - Preview the production build locally
  • npm lint - Run ESLint to check code quality

MCP Support

This tool now includes MCP (Model Context Protocol) mode support.

MCP Features

  • Tools: The MCP server exposes a create-app tool that can create a new project with the same options as the CLI.
  • Prompts: The MCP server includes a prompt for guiding users through creating a new project.
  • Resources: Documentation for CLI options is available as a resource.

Integration with Cursor

To integrate with Cursor, you can configure it to use this tool with the MCP protocol. This allows Cursor's AI assistant to directly create SWC+Vite React applications based on user instructions.

{
  "mcpServers": {
    "create-swc-vite-react-app": {
      "command": "npx",
      "args": ["-y", "create-swc-vite-react-app@latest", "--mcp"],
      "env": {}
    }
  }
}

Requirements

  • Node.js 18.0.0 or later
  • npm 7.0.0 or later, yarn 1.22.0 or later, or pnpm 7.0.0 or later

Dependencies

Key dependencies:

  • @modelcontextprotocol/sdk: ^1.8.0
  • chalk: ^5.4.1
  • commander: ^13.1.0
  • fs-extra: ^11.3.0
  • prompts: ^2.4.2
  • validate-npm-package-name: ^6.0.0

License

MIT