{
  "root":"form-",
  "elements":{
    "form-":{
      "type":"Form",
      "props":{"title":"用户信息"},
      "children":
    },
    "input-":{
      "type":"Input",
      "props":{"placeholder":"请输入姓名"}
    }
}

SSE 会把上面这段文字切成若干片段，例如第一片只包含 {"root":"form-"}, 第二片继续追加 , "elements":{..., 第三片可Neng只剩下Zui后一个右大括号。每片dou可Neng是不合法 JSON。

function repairJSON: string {
  let out = '';
  let inStr = false;
  let esc = false;
  const stack: string = ;
  for  {
    const ch = str;
    // 转义字符处理
    if  { out += ch; esc = false; continue; }
    if  { esc = true; out += ch; continue; }
    // 引号状态切换
    if  { inStr = !inStr; out += ch; continue; }
    // 非字符串内部才关心结构符
    if  {
      if  stack.push;
      else if  stack.push;
      else if  stack.pop;
    }
    out += ch;
  }
  // 收尾工作
  if  out += '"';
  out = out.trim.replace;
  if ) out += 'null';
  while  out += stack.pop;
  return out;
}

这段代码核心思想是：只要不是在字符串内部，就把每个左括号压栈、右括号弹栈；遍历结束后把栈里残留的右括号依次补回去。这样即使只拿到了前半段，也Neng得到一个Ke以安全解析的 JSON 字符串。

interface Element {
  type: string;
  props: Record;
  children?: string;
}
interface Spec {
  root: string;
  elements: Record;
}
function cleanSpec: Spec | null {
  if  return null;
  const { root, elements } = raw;
  if  return null;
  const good: Record = {};
  // 保留拥有 type 且 props 合法的节点
  for  {
    const el = elements;
    if  {
      good = {
        type: el.type,
        props: typeof el.props === 'object' ? el.props : {},
        children: Array.isArray ? el.children : 
      };
    }
  }
  // 删除指向不存在子节点的引用
  for  {
    const node = good;
    node.children = node.children.filter;
`   }
   return { root, elements: good };
}

这里我们先检查根对象是否满足Zui基本结构，然后遍历所有 element，只保留那些Yi经写完 type 的条目；随后再对 children 数组进行一次「指针有效性」检查，把悬空引用踢掉。这样得到的 spec 再喂给 @json‑render，即使后续还有geng多 token 来补全，也不会导致空指针错误。

export function StreamingForm {
   const  = useState;
   const  = useState;
   const bufferRef = useRef;
   useEffect => {
     const src = new EventSource;
     src.onmessage = e => {
       bufferRef.current += e.data;
       setRawLog;
       try {
         const repaired = repairJSON;
         const parsed   = JSON.parse;
         const cleaned   = cleanSpec;
         if  setSpec;
       } catch  {/* 静默忽略解析错误 */}
     };
     return  => src.close;
   }, );
   return (
     

         实时表单预览
         {spec ? (
           
         ) : (
           
等待数据…
         )}
       
     
   );
}

注意这里用了 来缓存累计字符串，以免每一次 onmessage dou触发组件重渲染，只在成功清洗出一个完整 spec 时才geng新 state，从而驱动真正一次性的 UI 刷新。

// catalog.ts
import { defineCatalog } from '@json-render/core';
import { schema } from '@json-render/react/schema';
import { z } from 'zod';
export const catalog = defineCatalog(schema,{
   components:{
     Form:{
        props:z.object({
           title:z.string,
           description:z.string.optional
        }),
        description:'表单容器'
     },
     Input:{
        props:z.object({
           label:z.string,
           name:z.string,
           type:z.enum.default,
           placeholder:z.string.optional
        }),
        description:'文本输入框'
     },
     Select:{
        props:z.object({
           label:z.string,
           name:z.string,
           options:z.array,value:z.string}))
        }),
        description:'下拉选择框'
     },
     Button:{
        props:z.object({
           label:z.string,
           action:z.string,
           variant:z.enum.default
        }),
        description:'提交按钮'
     }
   },
   actions:{
     submit:{description:'提交行为'}
   }
});

上面这段用 Zod 把每个组件Neng接受什么属性写得明明白白；当大模型输出时Ru果某字段不符合 schema，就会被 cleanSpec 丢掉，从根源上保证数据质量。随后我们再用 registry 把这些抽象节点映射成真实 JSX，如下所示：

// registry.tsx
import { defineRegistry } from '@json-render/react';
import { catalog } from './catalog';
export const { registry } = defineRegistry(catalog,{
   components:{
      Form:{=>
          

             {props.title}
             {props.description && 
{props.description}
}
             
{children}
          
}
      ,
      Input:{=>
          

            {props.label} 
            
          
}
      ,
      Select:{=>
          

            {props.label} 
            
               {.map}
            }
          
}
      ,
      Button:{=>
          emit}
                  className={`px-4 py-1 rounded ${props.variant==='secondary'?'bg-gray':'bg-blue'} text-white`}>
               {props.label}
          }
   },
   actions:{
      submit: async ctx=>)
   }
});

// server.js 
const express=require;
const app=express;
app.get=>{
   res.setHeader;
   const parts=},',
       '"inp":{',
       '"type":"Input","props":{"label":"商品名","name":"product"}}}}'
   ];
   let i=0;
   const iv=setInterval=>{
       if{clearInterval;res.end;return;}
       res.write;
   },300);
});
app.listen;
console.log;