Agent-native UI system

Timkit UI for chat, CLI, coding agents, and AI app builders

用同一份 registry 源码和 @timui/agent SDK 支撑聊天式需求拆解、CLI 命令编排、Agent 自动检索、代码生成与落地校验。React、Vue、HTML、WeApp 的选择规则保持一致。

Inspect contract Read llms.txt

Chat builder

live contract

我需要一个移动端 SaaS 首页，带数据概览、任务列表和底部导航。

选择 registry:page 模板，补充 dashboard block，并拉取 React 源码。

CLI path

npx shadcn@latest add https://ui.timkit.cn/r/mobile-agent-console.json

Agent JSON

{ type: "registry:page", frameworks: ["react", "vue"] }

Discover

registry-index.json

Plan

@timui/agent SDK

Install

timkit agent CLI

Compose

pages + blocks + ui

Agent build workflow

Parse intent

识别页面、区块、原子组件和目标框架

Select source

优先 registry:page，再 fallback 到 block 或 ui

Install code

通过 shadcn URL 或 timkit CLI 拉取源码

Verify

运行 typecheck、preview protocol 和 framework parity

CLI primitives

curl https://ui.timkit.cn/agent-index.jsonpnpm --filter @timui/cli exec timkit agent plan "build a mobile agent console" --mobile --jsonpnpm --filter @timui/cli exec timkit list --mobile --framework react --jsonnpx shadcn@latest add https://ui.timkit.cn/r/mobile-agent-console.json

Programmable Agent SDK

One API for chat sessions, CLI plans, and code agents

@timui/agent exposes registry search, component metadata, install planning, starter code generation, validation hints, and multi-turn chat state. Agents can stop scraping prose pages and operate on stable typed contracts.

import { TimkitAgent } from '@timui/agent'

const agent = new TimkitAgent({ registryItems })
const plan = agent.plan({
  prompt: 'Build a mobile AI workspace with chat, tool calls, and preview',
  framework: 'react',
  mode: 'agent',
  mobile: true,
})

const code = agent.generateComponent({
  name: plan.selected[0].name,
  framework: plan.framework,
})

Machine-readable endpoints

Stable URLs for model context

Agent 不需要抓取页面。它可以先读取目录，再按 item URL 拉取源码，最后根据框架和 viewport metadata 做选择。

Registry index可筛选的轻量目录/registry-index.json Full registry含源码的完整数据/registry-all.json Agent index面向 Agent 的契约/agent-index.json LLM guide模型上下文入口/llms.txt

Acceptance gates

Preview protocol

React and Vue both use LOAD_PREVIEW runtime messages.

Framework parity

Demo source resolution is canonical across frameworks.

Performance budget

Registry size and preview lazy loading are checked by goal scripts.

pnpm goal:acceptance && pnpm goal:test:preview:protocol