Generate React Components
from AI Responses

AI streams HTML-like components alongside markdown—no waiting, no tool calling, instant UIs.

Get StartedPlayground
melony.dev

Why Choose Melony?

Build AI interfaces that feel instant and native with HTML-like syntax, progressive rendering, and mixed markdown content.

Zero Latency

Render components progressively as AI streams HTML-like tags—no tool calling, no waiting.

Mixed Content

Seamlessly combine markdown text with interactive components in a single stream.

HTML-Like Syntax

AI uses familiar HTML-like tags like <card>, <button>, <chart> to build UIs naturally.

Action Handling

Built-in action system for buttons and forms—handle user interactions effortlessly.

Themeable

Customize colors, spacing, typography, and more with the built-in theme system.

Control Flow

Dynamic lists with <for> component, context variables, and template rendering.

Simple & Powerful

Add the UI guide to your system prompt, stream from the server, and render instantly with MelonyMarkdown.

1. What AI Streams

AI streams markdown with HTML-like component tags

Here's the weather in San Francisco:

<card title="San Francisco Weather">
  <row gap="md" align="center">
    <text value="68°F" size="xl" weight="bold" />
    <badge label="Sunny" variant="primary" />
  </row>
  <button 
    label="Refresh" 
    variant="outline" 
    action='{"type":"refresh-weather","location":"SF"}' 
  />
</card>

It's a beautiful day!

2. Stream from Server

Add MELONY_UI_GUIDE to your system prompt

// app/api/chat/route.ts
import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";
import { MELONY_UI_GUIDE } from "melony/server";

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

  const result = streamText({
    model: openai("gpt-4"),
    system: MELONY_UI_GUIDE,
    messages,
  });

  return result.toDataStreamResponse();
}

3. Render Instantly

Use MelonyProvider and MelonyMarkdown

"use client";
import { MelonyProvider, MelonyMarkdown } from "melony";
import { useChat } from "ai/react";

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

  const handleAction = (action) => {
    if (action.type === "refresh-weather") {
      // Handle the refresh action
      console.log("Refreshing weather for:", action.payload.location);
    }
  };

  return (
    <MelonyProvider onAction={handleAction}>
      {messages.map(m => (
        <MelonyMarkdown key={m.id}>{m.content}</MelonyMarkdown>
      ))}
    </MelonyProvider>
  );
}

Ready to build real-time AI UIs?

HTML-like syntax, progressive rendering, and instant UIs. Start building AI interfaces that feel native.

Read the Documentation