AI SDK 集成

npm install ai

// app/api/generate/route.ts
import { streamText } from 'ai';
import { generateCatalogPrompt } from '@json-render/core';
import { catalog } from '@/lib/catalog';

export async function POST(req: Request) {
  const { prompt, currentTree } = await req.json();

  const systemPrompt = generateCatalogPrompt(catalog);

  // 可选地包含当前 UI 状态作为上下文
  const contextPrompt = currentTree
    ? `\n\n当前 UI 状态:\n${JSON.stringify(currentTree, null, 2)}`
    : '';

  const result = streamText({
    model: 'anthropic/claude-opus-4.5',
    system: systemPrompt + contextPrompt,
    prompt,
  });

  return new Response(result.textStream, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
      'Transfer-Encoding': 'chunked',
    },
  });
}

'use client';

import { useUIStream } from '@json-render/react';

function GenerativeUI() {
  const { tree, isLoading, error, generate } = useUIStream({
    endpoint: '/api/generate',
  });

  return (
    <div>
      <button
        onClick={() => generate('创建一个包含指标的仪表板')}
        disabled={isLoading}
      >
        {isLoading ? '生成中...' : '生成'}
      </button>

      {error && <p className="text-red-500">{error.message}</p>}

      <Renderer tree={tree} registry={registry} />
    </div>
  );
}

const basePrompt = generateCatalogPrompt(catalog);

const customPrompt = `
${basePrompt}

附加说明：
- 始终使用 Card 组件对相关内容进行分组
- 指标优先使用水平布局（Row）
- 使用一致的间距，设置 padding="md"
`;