Skip to Content
cuelo.

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.dev

The 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

  1. Create content/docs/<section>/<slug>.mdx with frontmatter:

    ---
    title: Short title
    description: One sentence that says what the page covers.
    ---
  2. 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 an index.mdx overview, and every page belongs to exactly one section.

  3. 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.

On this page