Quick Start

1. Server-Side Setup

Import MELONY_UI_GUIDE and add it to your AI system prompt. This teaches the AI how to use Melony's HTML-like component syntax:

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
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();
}

That's it! The AI now knows how to use components like <card>, <button>, <chart>, and more.

2. Client-Side Rendering

Wrap your app with MelonyProvider and use MelonyMarkdown to render AI messages:

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

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

  return (
    <MelonyProvider>
      <div className="space-y-4">
        {messages.map((message) => (
          <div key={message.id}>
            {message.role === "assistant" ? (
              <MelonyMarkdown>{message.content}</MelonyMarkdown>
            ) : (
              <p>{message.content}</p>
            )}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </MelonyProvider>
  );
}

3. What the AI Streams

The AI can now mix markdown text with HTML-like components naturally:

Here's the current 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>
  <text value="Perfect day for a walk!" color="muted" />
</card>

Would you like weather for another city?

As the AI streams the response, MelonyMarkdown progressively parses and renders both the markdown text and the component tags in real-time.

4. Adding Interactivity (Optional)

Handle button clicks and other actions with the onAction prop:

const handleAction = (action: Action) => {
  if (action.type === "refresh-weather") {
    console.log("Refreshing weather for:", action.payload.location);
    // Trigger new API call, update state, etc.
  }
};

return (
  <MelonyProvider onAction={handleAction}>
    {/* ... your components ... */}
  </MelonyProvider>
);

The AI can add actions to buttons:

<button 
  label="Refresh Weather" 
  variant="outline"
  action='{"type":"refresh-weather","location":"SF"}' 
/>

How It Works

1. AI streams markdown text mixed with HTML-like component tags
2. MelonyParser identifies complete component blocks as they arrive
3. Components render instantly when their tags are complete
4. Markdown text renders alongside components seamlessly

No waiting. No tool calls. Just instant UI generation as the AI thinks.

Next Steps