Create Vibe App

The easiest way to get started with Next.js enhanced with Vibe features is by using create-vibe-app. This CLI tool enables you to quickly start building a new Next.js application with Vibe enhancements, with everything set up for you. You can create a new app using the default Next.js template enhanced with Vibe features.

Features

• All the benefits of Next.js and create-next-app
• Default configuration with best practices pre-selected
• Automatic setup of Cursor-specific features
• Pre-configured rules and guidelines in .mdc format
• Enhanced project structure for better developer experience

Getting Started

You can create a new project by running:

npx create-vibe-app@latest
# or
yarn create vibe-app
# or
pnpm create vibe-app
# or
bunx create-vibe-app

Default Configuration

create-vibe-app sets up your project with these defaults:

• TypeScript
• ESLint
• Tailwind CSS
• src/ directory
• App Router
• Turbopack for development
• Default import alias (@/*)

Cursor Integration

The tool automatically sets up a cursor directory structure:

./cursor/
├── mcp.json                     # Configuration for MCP
└── rules/                       # Custom MDC rules
    ├── tailwind-components.mdc  # Guidelines for Tailwind components
    └── project-structure.mdc    # Project structure guidelines

Usage

Usage: create-vibe-app [project-directory] [options]

Options:
  -V, --version                        output the version number
  --ts, --typescript                   Initialize as a TypeScript project. (default)
  --js, --javascript                   Initialize as a JavaScript project.
  --tailwind                           Initialize with Tailwind CSS config. (default)
  --eslint                             Initialize with ESLint config. (default)
  --app                                Initialize as an App Router project. (default)
  --src-dir                            Initialize inside a `src/` directory. (default)
  --turbopack                          Enable Turbopack by default for development. (default)
  --import-alias <alias-to-configure>  Specify import alias to use (default "@/*").
  --empty

    Initialize an empty project.

  --use-npm

    Explicitly tell the CLI to bootstrap the application using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the application using pnpm

  --use-yarn

    Explicitly tell the CLI to bootstrap the application using Yarn

  --use-bun

    Explicitly tell the CLI to bootstrap the application using Bun

  -e, --example [name]|[github-url]

    An example to bootstrap the app with. You can use an example name
    from the official Next.js repo or a GitHub URL. The URL can use
    any branch and/or subdirectory

  --example-path <path-to-example>

    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar

  --reset-preferences

    Explicitly tell the CLI to reset any stored preferences

  --skip-install

    Explicitly tell the CLI to skip installing packages

  --disable-git

    Explicitly tell the CLI to skip initializing a git repository.

  --yes

    Use previous preferences or defaults for all options that were not
    explicitly specified, without prompting.

  -h, --help                           display help for command

Why use Create Vibe App?

create-vibe-app allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:

• Interactive Experience: Running npx create-vibe-app@latest (with no arguments) launches an interactive experience that guides you through setting up a project.
• Zero Dependencies: Initializing a project is as quick as one second. Create Vibe App has zero dependencies.
• Offline Support: Create Vibe App will automatically detect if you're offline and bootstrap your project using your local package cache.
• Support for Examples: Create Vibe App can bootstrap your application using an example from the Next.js examples collection (e.g. npx create-vibe-app --example route-handlers).
• Tested: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.