Quick Start

1. Install Packages

Install the core Melony packages along with the React integration:

npm install @melony/react @melony/runtime @melony/agents @melony/client

2. Define an Action

Actions are the building blocks of your agent. They define what your agent can do. Create a file at lib/actions.ts:

// lib/actions.ts
import { defineAction } from "@melony/runtime";
import z from "zod";

export const getWeather = defineAction({
  name: "getWeather",
  description: "Get the current weather for a location",
  paramsSchema: z.object({
    city: z.string().describe("The city to get weather for"),
  }),
  execute: async function* (params) {
    yield { type: "text", data: { content: `Checking weather for ${params.city}...` } };
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    yield {
      type: "text",
      data: { content: `The weather in ${params.city} is Sunny and 72°F` },
    };
  },
});

3. Create the Agent

Define your agent and connect it to a "brain" (LLM logic). Create a file at app/api/chat/route.ts:

// app/api/chat/route.ts
import { defineAgent, createAgentHandler } from "@melony/agents";
import { agentBrain } from "@/lib/agent-brain"; // Your LLM logic
import { getWeather } from "@/lib/actions";

const agent = defineAgent({
  name: "Assistant",
  actions: { getWeather },
  brain: agentBrain,
});

export const POST = createAgentHandler(agent);

Note: agentBrain is a function that connects to your LLM provider (like OpenAI or Anthropic). See the Agents documentation for details.

4. Build the UI

Use the MelonyStoreProvider and Chat component to build your interface. Update app/page.tsx:

// app/page.tsx
"use client";
import { MelonyStoreProvider, Chat } from "@melony/react";

export default function Home() {
  return (
    <MelonyStoreProvider api="/api/chat">
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="w-full max-w-2xl border rounded-xl h-[600px] bg-background">
          <Chat />
        </div>
      </main>
    </MelonyStoreProvider>
  );
}

Next Steps