AI SDK Integration

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);
  
  // Optionally include current UI state for context
  const contextPrompt = currentTree 
    ? `\n\nCurrent UI state:\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('Create a dashboard with metrics')}
        disabled={isLoading}
      >
        {isLoading ? 'Generating...' : 'Generate'}
      </button>
      
      {error && <p className="text-red-500">{error.message}</p>}
      
      <Renderer tree={tree} registry={registry} />
    </div>
  );
}

const basePrompt = generateCatalogPrompt(catalog);

const customPrompt = `
${basePrompt}

Additional instructions:
- Always use Card components for grouping related content
- Prefer horizontal layouts (Row) for metrics
- Use consistent spacing with padding="md"
`;