Stream React Components
from AI Responses

Render UIs progressively as AI thinks—no waiting, no tool calling latency.

Get StartedPlayground
melony.dev

Why Choose Melony?

Build AI interfaces that feel instant and native with progressive rendering and type safety.

Zero Latency

Render components progressively as AI generates JSON—no waiting for complete responses.

Type Safe

Full TypeScript support with Zod schemas for compile-time safety and better DX.

Developer Friendly

Simple API with React components that integrate seamlessly into your existing stack.

Custom Components

Define your own React components and let AI render them with your exact styling.

Streaming Ready

Built for modern streaming APIs with support for AI SDK and other streaming libraries.

Lightweight

Minimal bundle size with zero dependencies beyond React and your existing UI library.

Simple & Powerful

Define schemas with Zod, stream from the server, and render instantly on the client.

1. Define Schema

Type-safe components with Zod

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 weather info",
});
 

export const WeatherCard: React.FC<z.infer<typeof weatherSchema>> = ({
  location,
  temperature,
  condition,
}) => (
  <div className="p-4 border rounded-lg">
    <h3 className="font-bold">{location}</h3>
    <p>{temperature}°F - {condition}</p>
  </div>
);

2. Stream from Server

Inject schema into AI system prompt

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

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

  const result = streamText({
    model: openai("gpt-4"),
    system: `Assistant. ${weatherUIPrompt}`,
    messages,
  });

  return result.toDataStreamResponse();
}

3. Render Instantly

Progressive rendering as JSON streams

import { MelonyCard } from "melony";
import { useChat } from "ai/react";

function Chat() {
  const { messages } = useChat();

  return messages.map(m => (
    <MelonyCard
      text={m.content}
      components={{
        "weather-card": WeatherCard
      }}
    />
  ));
}

Ready to build real-time AI UIs?

Type-safe, progressive, and instant. Start building AI interfaces that feel native.

Read the Documentation