@useruna/ui

Official React UI components for Runa AI — a drop-in chat widget you can embed in any React application in minutes.

Installation

npm install @useruna/ui @useruna/client

Usage

RunaWidget

Drop the widget anywhere in your component tree. It renders a floating chat button and panel — no setup required.

import { RunaWidget } from '@useruna/ui';

export default function Dashboard() {
  return (
    <div>
      <h1>My App</h1>
      <RunaWidget
        productId="your-product-id"
        theme="light"
        position="bottom-right"
        initialMessage="Hi! How can I help you today?"
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | productId | string | required | Your Runa product ID from the dashboard. | | apiEndpoint | string | https://api.useruna.ai | Custom API endpoint. | | userId | string | — | Identify the current user for personalization. | | userEmail | string | — | User email for context and analytics. | | theme | "light" \| "dark" | "light" | Widget color theme. | | position | "bottom-right" \| "bottom-left" | "bottom-right" | Floating button position. | | initialMessage | string | "Hi! I'm your AI assistant..." | Greeting message shown on open. | | primaryColor | string | "#6366f1" | Accent color for the widget header and buttons. | | title | string | "AI Assistant" | Title shown in the widget header. |

Examples

Dark theme

<RunaWidget
  productId="your-product-id"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Support"
  position="bottom-left"
/>

With user context

<RunaWidget
  productId="your-product-id"
  userId={user.id}
  userEmail={user.email}
  initialMessage={`Hi ${user.firstName}! How can I help you today?`}
/>

Peer Dependencies

• react >= 17
• @useruna/client >= 1.0.0

License

MIT © Runa AI