MelonyProvider

Root component that provides configuration and context for all Melony components.

Import

import { MelonyProvider } from "melony";

Basic Usage

import { MelonyProvider } from "melony";

function App() {
  return (
    <MelonyProvider>
      {/* Your components */}
    </MelonyProvider>
  );
}

Props

children

ReactNode • Required

Child components that will have access to the Melony context.

theme

MelonyTheme • Optional

Custom theme object to style all Melony components.

const theme = {
  colors: {
    primary: "#3b82f6",
    secondary: "#6366f1",
    success: "#10b981",
    warning: "#f59e0b",
    danger: "#ef4444",
    muted: "#6b7280",
    background: "#ffffff",
    foreground: "#000000",
    border: "#e5e7eb",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
    xl: "32px",
  },
  typography: {
    fontFamily: "Inter, system-ui, sans-serif",
    fontSize: {
      xs: "12px",
      sm: "14px",
      md: "16px",
      lg: "18px",
      xl: "24px",
    },
  },
  borderRadius: {
    sm: "4px",
    md: "8px",
    lg: "12px",
    full: "9999px",
  },
};

<MelonyProvider theme={theme}>
  {/* Components */}
</MelonyProvider>

onAction

(action: Action) => void • Optional

Callback function that handles actions triggered by buttons and other interactive components.

const handleAction = (action: Action) => {
  console.log("Action:", action.type, action.payload);
  
  switch (action.type) {
    case "delete-item":
      // Handle delete
      break;
    case "refresh":
      // Handle refresh
      break;
  }
};

<MelonyProvider onAction={handleAction}>
  {/* Components */}
</MelonyProvider>

widgets

WidgetTemplate[] • Optional

Array of widget templates that AI can use with the <widget> tag.

const widgets = [
  {
    type: "weather",
    name: "Weather Card",
    template: `<card title="{{location}}">
      <text value="{{temperature}}°F" />
      <badge label="{{condition}}" />
    </card>`,
    props: [
      { name: "location", type: "string", required: true },
      { name: "temperature", type: "number", required: true },
      { name: "condition", type: "string", required: true },
    ],
  },
];

<MelonyProvider widgets={widgets}>
  {/* Components */}
</MelonyProvider>

TypeScript Types

Action

interface Action {
  type: string;
  payload?: any;
}

MelonyTheme

interface MelonyTheme {
  colors?: {
    primary?: string;
    secondary?: string;
    success?: string;
    warning?: string;
    danger?: string;
    muted?: string;
    background?: string;
    foreground?: string;
    border?: string;
  };
  spacing?: {
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
  };
  typography?: {
    fontFamily?: string;
    fontSize?: {
      xs?: string;
      sm?: string;
      md?: string;
      lg?: string;
      xl?: string;
    };
    fontWeight?: {
      normal?: string;
      medium?: string;
      semibold?: string;
      bold?: string;
    };
  };
  borderRadius?: {
    sm?: string;
    md?: string;
    lg?: string;
    full?: string;
  };
  shadows?: {
    sm?: string;
    md?: string;
    lg?: string;
  };
}

WidgetTemplate

interface WidgetTemplate {
  type: string;
  name: string;
  description?: string;
  template: string;
  props: WidgetProp[];
}

interface WidgetProp {
  name: string;
  type: string;
  required: boolean;
  description?: string;
  default?: any;
}

Complete Example

import { MelonyProvider, MelonyMarkdown } from "melony";
import { useChat } from "ai/react";

const customTheme = {
  colors: {
    primary: "#8b5cf6",
    success: "#10b981",
  },
};

const widgets = [
  {
    type: "weather",
    name: "Weather Card",
    template: `<card title="{{location}}">
      <text value="{{temperature}}°F" />
    </card>`,
    props: [
      { name: "location", type: "string", required: true },
      { name: "temperature", type: "number", required: true },
    ],
  },
];

export default function App() {
  const { messages } = useChat({ api: "/api/chat" });

  const handleAction = (action) => {
    console.log("Action:", action.type);
    // Handle actions
  };

  return (
    <MelonyProvider 
      theme={customTheme}
      onAction={handleAction}
      widgets={widgets}
    >
      {messages.map((m) => (
        <MelonyMarkdown key={m.id}>{m.content}</MelonyMarkdown>
      ))}
    </MelonyProvider>
  );
}

Notes

MelonyProvider should wrap your entire app or the section using Melony components
All props are optional except children
Theme values are merged with defaults, so you can provide partial themes
The onAction handler receives all actions from child components
Widget templates are globally available to all MelonyMarkdown and MelonyWidget components