# Getting Started \[Install Vocs and create your first documentation site]

## Overview

Vocs is a lightweight framework for writing flexible docs that agents can consume and humans can navigate. It keeps documentation simple at the source with Markdown and MDX, capable of creating rich & interactive human experiences.

Under the hood, Vocs is powered by [Vite](https://vitejs.dev) with first-class [Waku](https://waku.gg) support, so it stays close to the modern frontend toolchain without asking you to build a docs system from scratch.

## Quick Prompt

You can get started with Vocs by asking your AI agent to read this guide and set up the project for you.

```txt
Read https://vocs.dev/introduction/getting-started and set up Vocs for my project.
```

## Quick Start

### Bootstrap via CLI

Scaffold a new project with the command line:

:::code-group

```bash [npm]
npm init vocs
```

```bash [pnpm]
pnpm create vocs
```

```bash [yarn]
yarn create vocs
```

```bash [bun]
bun create vocs
```

:::

### Bootstrap via Vercel

Scaffold a new project and deploy it instantly with Vercel:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwevm%2Fvocs%2Ftree%2Fnext%2Fcreate-vocs%2Ftemplate)

## Manual Installation

You can also add Vocs to an existing project. The example below matches the current `create-vocs` template.

::::steps

### Install Dependencies

Install Vocs, Waku, and Vite in your project.

If you are starting from scratch, prefer the CLI above.

:::code-group

```bash [npm]
npm install vocs waku vite
```

```bash [pnpm]
pnpm add vocs waku vite
```

```bash [yarn]
yarn add vocs waku vite
```

```bash [bun]
bun add vocs waku vite
```

:::

### Add to package.json

Add the Vocs scripts to your `package.json`.

```json [package.json]
{
  "scripts": {
    "dev": "vocs dev",
    "build": "vocs build",
    "preview": "vocs preview"
  }
}
```

### Add Your Vocs Config

Create a `vocs.config.ts` file at the root of your project:

```ts [vocs.config.ts]
import { defineConfig } from 'vocs/config'

export default defineConfig({
  title: 'Docs',
  sidebar: [
    {
      text: 'Welcome',
      link: '/'
    }
  ]
})
```

### Create your First Page

Vocs looks for pages in `src/pages` by default. Create a starter page at `src/pages/index.mdx`:

:::file-tree

* +my-project
  * **+src**
    * **+pages**
      * **index.mdx**
  * package.json
  * vocs.config.ts
    :::

```mdx [src/pages/index.mdx]
# Welcome

Welcome to your new Vocs documentation site.
```

### Install and Run

Install your dependencies and start the development server:

:::code-group

```bash [npm]
npm install
npm run dev
```

```bash [pnpm]
pnpm install
pnpm dev
```

```bash [yarn]
yarn install
yarn dev
```

```bash [bun]
bun install
bun run dev
```

:::

Then open your browser to `http://localhost:5173` to view your site.

### Next Steps

Now that you have a basic documentation site up and running, learn how the default Vocs file layout works in [Project Structure](/introduction/project-structure).

::::