Show HN: Melony

2 hours ago 1

✨ Open Source React Toolkit

Build beautiful, streaming AI chat interfaces with fine-grained control. MelonyProvider manages state, hooks give you access to messages and status, and flexible parts system supports any message structure.

The Core Idea

Everything you need to build modern streaming AI chat experiences

Manages streaming chat state and handles server communication. The foundation that powers all melony functionality.

Fine-grained access to messages, parts, status, and sending. Build custom UIs with complete control over the chat experience.

Supports any message structure with custom mappers. TypeScript-first with full type safety and extensibility.

Key Features

Everything you need for modern AI chat interfaces

Streaming Support

Built-in support for streaming responses with automatic text delta handling

TypeScript First

Full type safety with custom message types and extensible part system

Headless Design

Complete control over UI with flexible hooks and components

Easy Integration

Works seamlessly with AI SDK and other streaming libraries

30‑second Quickstart

Basic chat component with streaming support

"use client"; import { MelonyProvider, useMelonyMessages, useMelonySend, useMelonyStatus, } from "melony"; function ChatMessages() { const messages = useMelonyMessages(); const send = useMelonySend(); const status = useMelonyStatus(); return ( <div> {messages.map((message) => ( <div key={message.id}> <strong>{message.role}:</strong> {message.parts.map((part, i) => ( <div key={i}>{part.type === "text" && part.text}</div> ))} </div> ))} <button onClick={() => send("Hello!")} disabled={status === "streaming"}> {status === "streaming" ? "Sending..." : "Send"} </button> </div> ); } export default function Chat() { return ( <MelonyProvider endpoint="/api/chat"> <ChatMessages /> </MelonyProvider> ); }