可预测·安全防护·快速

让用户通过提示词生成仪表板、小部件、应用程序和数据可视化 — 安全地限定在您定义的组件范围内。

npm install @json-render/core @json-render/react

开始使用 GitHub

定义组件目录

设置防护边界。定义 AI 可以使用的组件、操作和数据绑定。

用户输入提示

最终用户描述他们的需求。AI 生成受您的目录约束的 JSON。

即时渲染

流式传输响应。您的组件随着 JSON 的到达逐步渲染。

定义您的组件目录

组件、操作和验证函数。

import { createCatalog } from '@json-render/core';
import { z } from 'zod';

export const catalog = createCatalog({
  components: {
    Card: {
      props: z.object({
        title: z.string(),
        description: z.string().nullable(),
      }),
      hasChildren: true,
    },
    Metric: {
      props: z.object({
        label: z.string(),
        valuePath: z.string(),
        format: z.enum(['currency', 'percent']),
      }),
    },
  },
  actions: {
    export: { params: z.object({ format: z.string() }) },
  },
});

AI 生成 JSON

受约束的输出，您的组件可以原生渲染。

{
  "key": "dashboard",
  "type": "Card",
  "props": {
    "title": "Revenue Dashboard",
    "description": null
  },
  "children": [
    {
      "key": "revenue",
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "valuePath": "/metrics/revenue",
        "format": "currency"
      }
    }
  ]
}

功能特性

安全防护

AI 只能使用您在目录中定义的组件

流式传输

随着 JSON 从模型流式传输而逐步渲染

数据绑定

使用 JSON Pointer 路径进行双向绑定

操作

由您的应用程序处理的命名操作

可见性控制

基于数据或权限的条件显示/隐藏

验证

内置和自定义验证函数

开始使用

npm install @json-render/core @json-render/react

查看文档