A2UI

中文：A2UI 是一个基于 JSON Schema 的 UI 生成与渲染 monorepo，面向 Agent 产物验证、跨组件库渲染和前端可视化调试。

English: A2UI is a JSON-schema-driven UI generation and rendering monorepo for agent output validation, cross-library rendering, and frontend playground debugging.

项目能力 | What This Repo Provides

中文：

• 前端 Playground：编辑、验证、渲染和对比 schema payload。
• 渲染库：面向 Ant Design 与 Arco Design 的可复用 renderer。
• Skills：面向 Agent 的输出契约、参考示例和本地校验脚本。
• 后端预留：Python server 工作区，当前为基础脚手架。

English:

• Frontend playground to edit, validate, render, and compare schema payloads.
• Reusable renderer packages for Ant Design and Arco Design.
• Agent skills with output contracts, references, and local validators.
• Reserved Python server workspace (currently scaffold-level).

目录结构 | Monorepo Structure

• frontend：Vite + React 应用（Playground）。
• packages/core：核心 schema 类型、guard、JSON Schema 工厂和通用 renderer。
• packages/antd：基于 core 的 Ant Design 渲染包。
• packages/arco：基于 core 的 Arco Design 渲染包。
• skills：Agent skill 资产（SKILL.md、references/、scripts/）。
• server：Python 后端目录（当前未接入主流程）。

Workspace 配置：

• pnpm-workspace.yaml 包含 frontend 与 packages/*。
• frontend 通过 workspace:* 依赖三个本地包。

架构概览 | Architecture

流程：

1. Agent 或用户生成组件 schema payload。
2. 通过 skill 契约与 props 目录进行校验。
3. 前端选择目标平台（antd 或 arco）。
4. 平台渲染包先做 schema guard，再委托 core 完成递归渲染。

核心模块：

• @jsonschema-renderer/core
  • 定义 ComponentSchema 与递归 SchemaValue。
  • 提供 schema guard 与 JSON Schema 生成器。
  • 根据组件 registry 解析并渲染节点。
• @jsonschema-renderer/antd / @jsonschema-renderer/arco
  • 绑定平台 name 约束。
  • 校验 payload 后调用 core 渲染。

环境要求 | Prerequisites

• Node.js 20+
• pnpm 9+
• Python 3.11+（仅 server 可选）

快速开始 | Quick Start

安装依赖：

pnpm install

启动前端开发环境：

pnpm --dir frontend dev

构建（先构建本地渲染包，再构建前端）：

pnpm --dir frontend build

预览构建产物：

pnpm --dir frontend preview

30 秒最小演示 | 30-Second Minimal Demo

1. 启动前端：

pnpm install
pnpm --dir frontend dev

2. 新建示例 payload 文件：

{
  "name": "antd",
  "version": "1.0.0",
  "components": [
    {
      "type": "Button",
      "props": {
        "type": "primary",
        "children": "Hello A2UI"
      }
    }
  ]
}

3. 本地校验：

node skills/antd-json-schema/scripts/validate-schema.mjs payload.json

4. 在前端 Playground 中选择 antd 平台并粘贴 payload，即可看到渲染结果。

前端命令 | Frontend Commands

• pnpm --dir frontend dev：启动 Vite 开发服务器。
• pnpm --dir frontend build：执行 libs 构建 + app 构建。
• pnpm --dir frontend lint：运行 ESLint。
• pnpm --dir frontend preview：预览构建结果。
• pnpm --dir frontend extract:antd-props：提取 antd props 元数据。
• pnpm --dir frontend extract:arco-props：提取 arco props 元数据。

Skills 使用与校验 | Skills and Validation

每个 skill 目录包含：

• SKILL.md：触发条件、约束与流程。
• references/：输出契约、props 目录、示例、校验规则。
• scripts/validate-schema.mjs：命令行校验器。

antd 校验：

cat payload.json | node skills/antd-json-schema/scripts/validate-schema.mjs
node skills/antd-json-schema/scripts/validate-schema.mjs payload.json

arco 校验：

cat payload.json | node skills/arco-json-schema/scripts/validate-schema.mjs
node skills/arco-json-schema/scripts/validate-schema.mjs payload.json

包开发 | Package Development

单包构建：

pnpm --filter @jsonschema-renderer/core build
pnpm --filter @jsonschema-renderer/antd build
pnpm --filter @jsonschema-renderer/arco build

依赖关系：

• antd -> core
• arco -> core
• frontend -> core + antd + arco

Server 说明 | Server Note

server 当前是最小 Python 脚手架，尚未接入主流程。 详细说明见 server/README.md。

推荐协作流程 | Recommended Workflow

1. 依据 skills/*/references/* 生成 payload。
2. 用 skill 校验脚本做本地验证。
3. 在前端 Playground 渲染与迭代。
4. 如需渲染行为调整，修改 packages/core 或平台包并重建。

注意事项 | Notes

• payload 的 name 必须与目标平台一致（antd / arco）。
• 建议先校验再渲染，尽早发现未知组件/未知属性问题。
• skills 与 packages 目录已按可独立发布方向组织。