# Quickstart
URL: /docs/quickstart
LLM index: /llms.txt
Description: Get up and running in minutes

# Quickstart

This guide walks you through creating your first documentation page.

## Creating a Page

Create a new folder under `app/docs/` with a `page.mdx` file:

```bash
mkdir -p app/docs/my-page
```

Then create `app/docs/my-page/page.mdx`:

```mdx
---
title: "My Page"
description: "A custom documentation page"
---

# My Page

Write your content here using **Markdown** and JSX components.
```

Your page is now available at `/docs/my-page`.

You are an implementation agent working from the public Quickstart page.

Use this page as the lightweight implementation brief when no sibling `agent.md` exists.

Priorities:
- preserve the scaffolded file paths under `app/docs/`
- keep the shell commands runnable as written
- keep the example `page.mdx` snippet aligned with the actual docs folder convention
- verify `/docs/quickstart.md` still includes this agent-only block
- verify the normal browser page at `/docs/quickstart` does not show this block

Files and paths this page refers to:
- `app/docs/my-page/page.mdx`
- `docs.config.ts`
- `/docs/my-page`
- `/docs/quickstart.md`

If you update this page:
- do not replace the human quickstart with agent jargon
- keep the human explanation concise and beginner-friendly
- put implementation-only guidance inside `<Agent>...</Agent>` blocks like this one

Expected agent takeaway:
- humans should read the normal page
- agents should read the `.md` route
- a page without `agent.md` can still expose richer machine context through embedded `<Agent>` blocks

## Using Components

### Callouts

<Callout type="info">
  This is an informational callout. Use it for tips and notes.
</Callout>

<Callout type="warn">
  This is a warning callout. Use it for important caveats.
</Callout>

### Code Blocks

Code blocks are automatically syntax-highlighted:

```typescript
function greet(name: string): string {
  return \`Hello, \${name}!\`;
}

console.log(greet("World"));
```

## Customizing the Theme

Edit `docs.config.ts` to change colors, typography, and component defaults:

```ts
theme: fumadocs({
  ui: {
    colors: { primary: "#22c55e" },
  },
}),
```

## Deploying

Build your docs for production:

```bash
pnpm build
```

Deploy to Vercel, Netlify, or any Node.js hosting platform.