基于LLM的JSON到UI工具

基于LLM的JSON到UI工具
JSON-render: LLM-based JSON-to-UI tool

组件、动作和验证函数。 ``` 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() }) }, }, }); ```

## JSON-render：一种新的UI方法 Rickcarlino 分享了 **json-render.dev**，一个可以直接从 JSON 定义生成 UI 的工具。Hacker News 上的初步讨论强调了它作为开发者时间节省器的潜力，允许团队集中定义 UI 组件供产品开发者使用——这对于开发和原型设计都很有用。然而，讨论很快扩展到更广泛的意义。Jauntywundrkind 认为这种 JSON 格式也可以被 AI *读取*，使 LLM 不仅能够生成 UI，还可以通过辅助功能 API 与 UI 交互并触发操作。这引发了关于计算界面日益复杂的讨论——从 CLI 到 GUI，再到 Web 应用，以及现在由 JSON 定义的视图——以及执行方法的激增是否真正增加了价值，或者只是造成了不必要的碎片化。该工具可能为 LLM 提供了一种简化、直接的与应用程序交互的格式。

Components, actions, and validation functions.

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() }) },
  },
});

基于LLM的JSON到UI工具 JSON-render: LLM-based JSON-to-UI tool

基于LLM的JSON到UI工具
JSON-render: LLM-based JSON-to-UI tool