✨ Open Source React Toolkit

TypeScript‑first, headless React toolkit for building AI chat UIs

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.

Get StartedView on GitHub

The Core Idea

Everything you need to build modern streaming AI chat experiences

MelonyProvider
Manages streaming chat state and handles server communication. The foundation that powers all melony functionality.
Hooks
Fine-grained access to messages, parts, status, and sending. Build custom UIs with complete control over the chat experience.
Flexible Parts
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

App.tsx
"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>
  );
}

Ready to Build StreamingAI Chat Interfaces?

Join developers using melony to create beautiful, streaming AI chat experiences with full TypeScript support and complete control.

Start Building Now