08Contributing
Write docs
Run this site locally and add or change a page.
This site is Fumadocs on Next.js, in docs/. Pages
are MDX files in docs/content/docs/.
cd docs
pnpm install
pnpm dev # http://localhost:3000 (docs are served at the root)Build and deploy
The site is a static export. Every page, OG image, the search index, the
sitemap and llms.txt are prerendered into docs/out/, which Cloudflare
serves from Workers static assets (wrangler.toml at the repo root).
make docs-build # static files -> docs/out
make docs-preview # serve docs/out exactly as Cloudflare will, on :8787
make docs-deploy # build and deploy to docs.cuelo.devThe first deploy needs npx wrangler login (from docs/) and the
cuelo.dev zone on your Cloudflare account. To deploy under another URL, set
NEXT_PUBLIC_SITE_URL at build time so canonical links, the sitemap and OG
tags point there.
Add a page
-
Create
content/docs/<section>/<slug>.mdxwith frontmatter:--- title: Short title description: One sentence that says what the page covers. --- -
Add the slug to that section's
meta.json, in reading order. Sections follow the reader's path: Start, Build, Conversation, Connect, Observe, Ship, Reference, Contributing. Each section has anindex.mdxoverview, and every page belongs to exactly one section. -
Link it from the section overview and from related pages.
Diagrams
Diagrams are React SVG components in components/diagrams/, built from a
small kit (kit.tsx: Figure, Box, Arrow, Label, Wave, Spark). Use
them in any page as <PipelineDiagram />. To add one, draw on a 760-wide grid,
keep one idea per diagram, use blue only for the path that matters, and give
the Figure a label (for screen readers) and a short caption.
Components available in every page: Callout, Cards/Card, Steps/Step,
Tabs/Tab, Files/Folder/File, plus code blocks with title="file.py".
Style
- Lead with what the reader can do. Put the command or config first, and the explanation after it.
- Short sentences, plain words. Use the same term for the same thing everywhere: "end of turn", "barge-in", "backchannel", "controller".
- Real, runnable examples. Use the field names, flags and defaults the code actually has. When you change behavior, change the docs in the same PR.
- No credentials in examples. Use
${VAR}in config and...for key values.
Reference pages
reference/config.mdx, providers.mdx and models.mdx mirror
schema/config.cuelo.schema.json and schema/models.json. When you add a
field, provider or model, update the matching table. The schema's
description strings are the source of the wording.
Theme
The site shares cuelo.dev's design: paper #f4f2ee, ink #0e0e0f, one
cobalt #1f4fe0, Geist and Geist Mono, light only. Code blocks use the
cuelo-ink theme (lib/code-theme.ts). The Introduction's garden is
cuelo.dev's generated garden (lib/garden/). Tokens live in app/global.css;
keep them in sync with observer/src/index.css.