@melony/react

Build beautiful AI interfaces with React and Server-Driven UI.

Overview

The @melony/react package provides everything you need to build AI chat interfaces in React. It includes the MelonyProvider, hooks like useMelony, and the MelonyMarkdown renderer.

npm install @melony/react

Features

  • Server-Driven UI: Render components directly from server events.
  • MelonyMarkdown: Render mixed content (markdown + components) seamlessly.
  • Hooks: useMelony, useChat, and more for custom logic.
  • Theming: Full control over the look and feel of your AI interface.

Usage

"use client";
import { MelonyStoreProvider, Chat } from "@melony/react";

export default function Page() {
  return (
    <MelonyStoreProvider api="/api/chat">
      <Chat />
    </MelonyStoreProvider>
  );
}