json-render | Giao diện UI tạo bởi AI với kiểm soát bảo mật

Định Nghĩa Một Danh Mục

Thiết lập các giới hạn bảo mật. Định nghĩa các component, action, và dữ liệu liên kết mà AI có thể sử dụng.

Người Dùng Đưa Ra Yêu Cầu

Người dùng mô tả những gì họ muốn. AI tạo ra JSON bị ràng buộc bởi danh mục của bạn.

Render Ngay Lập Tức

Stream kết quả. Các component của bạn render dần dần khi JSON đến.

Định Nghĩa Danh Mục của Bạn

Các component, action, và các hàm validation.

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 tạo ra JSON

Output ràng buộc sẽ được render tự nhiên bởi các component của bạn.

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

Xuất dưới dạng Code

Xuất giao diện UI dưới dạng các component React độc lập. Không cần phụ thuộc vào runtime.

Cây UI Được Tạo Ra

AI tạo ra một cấu trúc JSON từ yêu cầu của người dùng.

{
  "root": "card",
  "elements": {
    "card": {
      "key": "card",
      "type": "Card",
      "props": { "title": "Revenue" },
      "children": ["metric", "chart"]
    },
    "metric": {
      "key": "metric",
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "valuePath": "analytics/revenue",
        "format": "currency"
      }
    },
    "chart": {
      "key": "chart",
      "type": "Chart",
      "props": {
        "dataPath": "analytics/salesByRegion"
      }
    }
  }
}

React Code Đã Xuất

Xuất dưới dạng một dự án Next.js độc lập với tất cả các component.

"use client";

import { Card, Metric, Chart } from "@/components/ui";

const data = {
  analytics: {
    revenue: 125000,
    salesByRegion: [
      { label: "US", value: 45000 },
      { label: "EU", value: 35000 },
    ],
  },
};

export default function Page() {
  return (
    <Card data={data} title="Revenue">
      <Metric
        data={data}
        label="Total Revenue"
        valuePath="analytics/revenue"
        format="currency"
      />
      <Chart data={data} dataPath="analytics/salesByRegion" />
    </Card>
  );
}

Việc xuất bao gồm package.json, các file component, styles và mọi thứ cần thiết để chạy độc lập.

Tính Năng

Kiểm Soát Bảo Mật

AI chỉ có thể sử dụng các component mà bạn định nghĩa trong catalog

Streaming

Render tiến trình khi JSON được phát từ model

Xuất Code

Xuất dưới dạng mã React độc lập không cần runtime dependencies

Liên Kết Dữ Liệu

Liên kết hai chiều với các đường dẫn JSON Pointer

Action

Named action được xử lý bởi ứng dụng của bạn

Khả Năng Hiển Thị

Hiển thị/ẩn có điều kiện dựa trên dữ liệu hoặc quyền truy cập

Bắt Đầu

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