json-render | Giao diện AI với guardrails

Giới thiệu

json-render là công cụ giúp tạo giao diện từ AI với các cấu phần được xác định trước, đảm bảo tính an toàn trong quá trình thiết kế tự động.

Tính năng chính

• Guardrails: AI chỉ sử dụng các thành phần bạn đã định nghĩa trong catalog.
• Streaming: Tạo giao diện từng phần khi JSON được phát trực tiếp từ mô hình.
• Code Export: Xuất thành mã React độc lập, không cần phụ thuộc vào thời gian chạy.
• Data Binding: Ràng buộc hai chiều với đường dẫn JSON Pointer.
• Actions: Thực hiện các hành động được đặt tên bởi ứng dụng của bạn.
• Visibility: Hiển thị điều kiện dựa vào dữ liệu hoặc xác thực.

Cách sử dụng

Định nghĩa Catalog

Đặt giới hạn cho AI bằng cách xác định các thành phần, hành động, và liên kết dữ liệu mà AI có thể sử dụng.

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 JSON

AI tạo ra JSON được ràng buộc để các thành phần của bạn có thể render nguyên 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 là Mã

Xuất UI được tạo thành các thành phần React độc lập.

"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>
  );
}

Cùng với mã xuất, package.json và các tệp cần thiết khác cũng được bao gồm để chạy độc lập.

Bắt đầu sử dụng

Sử dụng lệnh sau để cài đặt:

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

Documentation