Quick Start

This is a quick start guide to get you up and running with Kimi UI applications locally.

1. Requirements

•
Node.js v20.x or later
•
Yarn v1.22.x (recommended)

2. Repository Structure

The Kimi UI repository contains several applications and shared components:

•
next-tsFull-featured Next.js & TypeScript application with MUI components
•
vite-tsFull-featured Vite.js & TypeScript application with MUI components
•
starter-next-tsStarter template for Next.js applications
•
starter-vite-tsStarter template for Vite.js applications
•
sharedShared hooks, utilities, and components
•
docsDocumentation application

3. Installing and Running Next.js App

Follow these steps to start the Next.js application locally:

# Navigate to the Next.js application
cd next-ts

# Install dependencies
yarn install

# Start the development server
yarn dev
# The application will be available at http://localhost:3000
        
# Build for production
yarn build

# Run production build
yarn start

4. Installing and Running Vite.js App

Follow these steps to start the Vite.js application locally:

# Navigate to the Vite.js application
cd vite-ts

# Install dependencies
yarn install

# Start the development server
yarn dev
# The application will be available at http://localhost:5173

# Build for production
yarn build

# Preview the production build
yarn start

5. Project Structure

Both applications follow a similar structure with directories organized by feature:

src/
├── _mock/             # Mock data for development
├── actions/           # Server actions (for Next.js App Router)
├── app/               # App Router components and pages (Next.js)
├── pages/             # Pages components (Vite.js)
├── assets/            # Asset imports and utilities
├── auth/              # Authentication related code
├── components/        # Shared UI components
├── hooks/             # Custom React hooks
├── icons/             # Icon components
├── layouts/           # Layout components
├── locales/           # Internationalization (i18n) resources
├── routes/            # Route configurations
├── sections/          # Page-specific components organized by feature
├── theme/             # Theme configuration for MUI
├── types/             # TypeScript type definitions
├── utils/             # Utility functions
└── widgets/           # Complex UI components/widgets

6. Common Commands

These commands are available in both applications:

# Lint code
yarn lint

# Fix linting issues
yarn lint:fix

# Format code with Prettier
yarn fm:fix

# Run both linting and formatting
yarn fix:all

# Clean the project (remove node_modules, build directories)
yarn clean

# Reinstall dependencies and start development
yarn re:dev

# Reinstall dependencies and build the project
yarn re:build

7. Next Steps

•
Explore the componentsBrowse through the various UI components and their implementations
•
Customize the themeModify the theme configuration in src/theme to match your brand
•
Integrate your backendConnect your application to your backend services