@aigentyc/chat-sdk

React SDK for building AI-powered chat interfaces connected to the Aigentyc platform.

Features

• Drop-in <Chat /> and <ChatWidget /> components
• Full slot system — replace any UI piece
• Headless mode with useAigentycChat hook
• Backend-driven tool rendering (visualization, json-render, custom HTML)
• Live chat handoff with Socket.IO
• Built-in i18n (en, he) — extensible with addLanguage()
• React 19, SSR-compatible (Next.js App Router)
• Multi-instance support — multiple chats on one page
• White-label — zero forced branding

Quickest start — scaffold a new app

npm create aigentyc-chat@latest my-app
cd my-app && npm install && npm run dev

Picks Vite or Next.js, wires your projectId, drops in <Chat />. Done.

Add to an existing app

npm install @aigentyc/chat-sdk

That's it — core chat, streaming, and tool rendering work out of the box.

Optional peer deps — install only if you use that feature:

• socket.io-client — live chat handoff
• recharts — visualization tool renderer
• @json-render/core @json-render/react @json-render/shadcn zod — json-render tools

Quick Start

import { Chat } from "@aigentyc/chat-sdk"
import "@aigentyc/chat-sdk/theme/styles.css"

export function App() {
  return (
    <Chat
      projectId="your-project-id"
      apiEndpoint="https://app.aigentyc.ai"
      apiKey="your-api-key"
    />
  )
}

Four Levels of Control

Level 1 — Drop-in

<Chat projectId="..." apiEndpoint="..." />

Level 2 — Customize with slots + theme

<Chat
  projectId="..." apiEndpoint="..."
  theme={{ primaryColor: "#3b82f6" }}
  slots={{ header: MyHeader, input: MyInput }}
  onMessageSent={(msg) => analytics.track('chat', msg)}
/>

Level 3 — Compose components

<ChatProvider projectId="..." apiEndpoint="...">
  <MyLayout>
    <ChatInterface />
    <ChatInput />
  </MyLayout>
</ChatProvider>

Level 4 — Headless

const { messages, sendMessage, status } = useAigentycChat({
  projectId: "...", apiEndpoint: "..."
})

Slots

| Slot | Replaces | | --- | --- | | header | Chat header bar | | welcome | Welcome / empty state | | message | Individual message bubble | | input | Composer / input box | | footer | Footer below input | | loader | Loading indicator | | suggestions | Suggested prompts | | tools | Per-tool renderers (keyed by tool name) |

Tool Rendering

Tools created in the Aigentyc platform come with rendering instructions. The SDK auto-renders based on uiRenderMode:

• visualization → recharts
• json_render → component spec via @json-render/shadcn
• legacy → custom HTML/CSS template
• preset → built-in renderers

Override per-tool:

<Chat slots={{ tools: { searchProducts: MyProductGrid } }} />

Theming

All theme tokens are CSS variables under [data-aigentyc-chat]. Override via theme prop or your own CSS.

i18n

Built-in: en, he. Add custom languages:

import { addLanguage } from "@aigentyc/chat-sdk/i18n"
addLanguage("fr", { welcomeTitle: "Bienvenue", ... })

Live Chat

Enable Socket.IO-based live chat handoff:

<Chat enableLiveChat chatServiceUrl="wss://..." />

Next.js / SSR

All components have "use client" directives. Works in App Router and Pages Router.

Storybook

npm run storybook

Demo

cd demo && npm install && npm run dev

Package Exports

• @aigentyc/chat-sdk — main (Chat, ChatWidget, ChatProvider)
• @aigentyc/chat-sdk/core — types, transport, utils
• @aigentyc/chat-sdk/hooks — all hooks
• @aigentyc/chat-sdk/components — individual chat components
• @aigentyc/chat-sdk/ai-elements — Message, Conversation, etc.
• @aigentyc/chat-sdk/tools — ToolRenderer, VisualizationRenderer
• @aigentyc/chat-sdk/json-render — json-render system
• @aigentyc/chat-sdk/ui — shadcn primitives
• @aigentyc/chat-sdk/theme — ThemeProvider + styles.css
• @aigentyc/chat-sdk/i18n — translations

License

MIT