Melony

Generate React components from AI responses in real-time.

AI streams HTML-like components alongside markdown. No tool calling. No waiting. Just instant, progressive UIs as the AI thinks.

Why Melony?

  • ⚡ Zero Latency - Components render progressively as AI streams HTML-like tags
  • 📝 Mixed Content - Seamlessly combine markdown text with interactive components
  • 🎯 HTML-Like Syntax - Familiar <card>, <button>, <chart> tags that AI understands naturally
  • 🎨 Theme System - Customize colors, spacing, typography, and more across all components
  • 🔄 Action Handling - Built-in system for button clicks, form submissions, and interactions
  • 🔁 Control Flow - Dynamic lists with <for> component, context variables, and templates
  • 🧩 Widget Templates - Create reusable component templates for complex UIs

Get Started

Installation

Install Melony and get started

Quick Start

Build your first chat UI with HTML-like components

Complete Example

Full chat app with MelonyProvider and actions

How It Works

Understand the parsing and rendering system

Multiple Components

Learn about all available component tags

API Reference

MelonyProvider, MelonyMarkdown, and more