AI Coding (MCP) – Once UI

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/*.tsx	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
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).