# 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: [](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 ### Add Vocs to an Existing App If you already have a React + Vite project, you can merge these entries into your existing `package.json`. If you are starting from scratch, prefer the CLI above. ```json [package.json] { "scripts": { "dev": "vocs dev", "build": "vocs build", "preview": "vocs preview" }, "dependencies": { "vocs": "latest", "waku": "^1.0.0-beta.0" } } ``` ### 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). ::::