sammy-sdk-ui

Drop-in React chat UI for the Sammy AI agent runtime.

Two components, fully styled, no CSS file to import:

• <SammyChat /> — a floating chat widget pinned to a corner of the page
• <SammyChatInline /> — the same chat surface, embedded in your layout

Built on top of sammy-sdk-react and sammy-sdk-client. For full control over the markup, drop down to those packages instead.

Install

npm install sammy-sdk-ui

react and react-dom (>=18) are peer dependencies — bring your own.

Floating widget

// app/page.tsx (Next.js App Router)
import { SammyChat } from "sammy-sdk-ui";

export default function Page() {
  return (
    <main>
      <h1>My App</h1>
      <SammyChat endpoint="/api/chat" title="Support" />
    </main>
  );
}

The chat lives in a fixed-position bubble at bottom-right by default. Click to open, click ✕ to close.

<SammyChat
  endpoint="/api/chat"
  title="Sales assistant"
  position="bottom-left"   // bottom-right | bottom-left | top-right | top-left
  defaultOpen={false}
  headers={async () => ({ Authorization: `Bearer ${await getToken()}` })}
/>

Inline embed

import { SammyChatInline } from "sammy-sdk-ui";

export function SupportPanel() {
  return <SammyChatInline endpoint="/api/chat" title="Ask AI" />;
}

Props

| Prop | Type | Notes | |---|---|---| | endpoint | string | URL of the chat handler (e.g. /api/chat). Required. | | headers | Record<string,string> \| () => Promise<Record<string,string>> | Custom request headers. | | title | string | Header label. Default: "Chat with AI" (or "Chat" for inline). | | position | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" | Floating widget anchor. | | defaultOpen | boolean | Open the widget on mount. | | theme | Partial<SammyTheme> | Token overrides (color, radius, font). |

License

MIT