Complete Example

1. Define Schema & Generate Prompt

First, create a Zod schema for your component and generate the AI prompt:

import { z } from "zod";
import { zodSchemaToPrompt } from "melony/zod";

const weatherSchema = z.object({
  type: z.literal("weather-card"),
  location: z.string(),
  temperature: z.number(),
  condition: z.string(),
});

const weatherUIPrompt = zodSchemaToPrompt({
  type: "weather-card",
  schema: weatherSchema,
  description: "Display current weather information",
  examples: [
    {
      type: "weather-card",
      location: "New York, NY",
      temperature: 72,
      condition: "Partly Cloudy",
    },
  ],
});

2. Create Component

Build your React component using the inferred TypeScript types:

type WeatherCardProps = z.infer<typeof weatherSchema>;

export const WeatherCard: React.FC<WeatherCardProps> = ({
  location,
  temperature,
  condition,
}) => (
  <Card>
    <h3>{location}</h3>
    <p>
      {temperature}°F - {condition}
    </p>
  </Card>
);

3. Server-Side Prompt Injection

Inject the generated prompt into your AI system message:

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
import { weatherUIPrompt } from "@components/weather"

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

  const result = streamText({
    model: openai("gpt-4"),
    system: `You are a helpful assistant. ${weatherUIPrompt}`, // Inject generated prompt here
    messages,
  });

  return result.toDataStreamResponse();
}

4. Client-Side Rendering

Use MelonyCard to render streaming components:

import { useChat } from "ai/react";

function Chat() {
  const { messages } = useChat({
    api: "/api/chat",
  });

  return messages.map((message) =>
    message.parts.map((part) =>
      part.type === "text" ? (
        <MelonyCard
          key={part.id}
          text={part.content}
          components={{ "weather-card": WeatherCard }}
        />
      ) : null
    )
  );
}

That's It!

Your weather card will now render progressively as the AI streams its response. No tool calls, no waiting—just instant UI generation.

Next Steps

Learn how to work with Multiple Components or explore the API Reference.