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 an optional 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, 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

Full views built with this SDK live in the repo under packages/rect/examples: a compact dev-status dashboard, an annotated editor (a Tiptap markdown view an agent drafts and a human comments on), an attachment upload view, and a contract redline review. All build and publish exactly like the project you just scaffolded — see Use cases for the patterns they demonstrate.