AI Coding (MCP)

Updated: July 5, 2026

About

Once UI is an agent-first design system that empowers indie creators to build high-quality, responsive apps — without wrestling with complexity. Designed for AI-native workflows, it turns abstract intent into concrete interfaces with minimal syntax.

Agent harness (recommended for codegen)

For writing UI code, use the harness — not full doc pages. It keeps context under ~10KB per task. | Artifact | URL | When to load | |----------|-----|--------------| | Manifest | /ai/manifest.json | Entry point — lists all harness files | | Compact rules | /ai/rules.compact.md | Always, before any UI task (~2KB) | | Component catalog | /ai/catalog.json | Pick components by purpose/tag | | Task bundle | /ai/tasks/index.json | Match user intent → tasks/pricing.json, etc. | | Component slice | /ai/components/Grid.json | On demand — one file per component | | Gold example | /ai/examples/ | Mimic structure for the task type | | Pro blocks | /ai/examples/blocks/manifest.json | Production-quality composition references | | Gotchas | /ai/gotchas.json | When using Background, Card, RevealFx, Fade | npm imports (version-pinned):

Bash

npm install @once-ui-system/core@alpha
npx once-ui-init-agent   # writes AGENTS.md + Cursor rule in your app (one-time)

Tsx

// Conceptual — read in your agent environment
// @once-ui-system/core/ai/manifest.json
// @once-ui-system/core/ai/rules.compact.md
// @once-ui-system/core/ai/tasks/pricing.json
// @once-ui-system/core/ai/components/Grid.json

Machine-readable discovery: onceUi field in @once-ui-system/core package.json. Workflow:

Load rules.compact.md
Resolve intent → pick a file from tasks/index.json (e.g. tasks/pricing.json)
Fetch component slices listed in the task bundle
Read the gold example for structure; for production fidelity, read matching Pro blocks from examples/blocks/manifest.json
Generate code
Validate: pnpm validate-ai-code path/to/file.tsx

MCP Server (exploratory docs)

For how does X work? questions, agents can pull docs through Context7's MCP server. To configure it:

Open mcp_config.json in File / Preferences / Settings / Plugins
Add the following configuration:

Json

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

Restart your IDE
Run: get-library-docs /once-ui-system/core

Use Context7 for exploration. Use the harness for codegen.

Syntax advantage

Compared to Tailwind + shadcn, Once UI yields up to 70% more compact output, with cleaner, more natural syntax — semantic Row/Column, token props, and purpose-built components. That compactness only pays off when agents load the harness and follow the rules — especially layout shorthands (fill, center), surface recipes, and component appropriateness (Card is interactive-only).

pageInstallation

pageConfiguration

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club