Quickstart

Scaffold

npm create rect@latest my-view
cd my-view
npm install

This gives you a Vite + React project already wired for Rect: the @rectsh/rect/vite plugin, a rect.view.json spec, a starter view in src/main.tsx, and a dev.html mock-host harness.

Develop

npm run dev      # open the printed URL, then go to /dev.html
npx rect check   # build and audit the project

/dev.html runs your view against a mock host with hot reload, so you can build without uploading anything. The panel is the store; pushing a change is exactly what an agent's rect_patch does. Read and write the view model with the hooks:

import { useRectState, useRectField } from '@rectsh/rect/react';

const state = useRectState(); // the whole view model
const [note, setNote] = useRectField('note'); // one field, two-way

Describe the view in two small files:

• rect.view.json gives it a name, a short description of when to use this Rect, an example view model, and a required stateSchema describing that model to agents and tooling.
• rect.agent.md tells agents how to create and update an instance: what source material to use, what to preserve, and which actions to call.

The Vite plugin publishes both in the self-describing spec agents read. See The view contract for the schema shape and its current validation boundary.

Before publishing, run npx rect check. It builds the bundle and audits the project identity, source and embedded specs, stateSchema validity and example conformance, agent instructions, action metadata, and bundle limits. Every warning or error includes a concrete English How to fix: instruction; coding agents can use npx rect check --json for the same report as structured data.

Publish

npm run publish  # = rect publish

The first run authorizes this machine in your browser (rect login); after that npm run publish builds, bundles, uploads, and registers the template. In CI, create an account API token in account settings and set RECT_API_TOKEN. Use rect issue <slug> or rect publish --issue to create a live instance, or let an agent issue one over MCP and drive it with rect_dispatch and rect_patch.

From here, read The view contract for the sandbox rules the build enforces, and Compile & publish for the CLI and plugin options.

Learn from examples

See Use cases for reusable patterns including approval and decision consoles, intake forms, document review, live dashboards, tailored deliverables, and file collection. Each pattern explains which Rect features it uses and how the human and AI work together.