kyt-chat

Embeddable KYT (Know Your Topic) chat widget. Works in React apps and plain HTML pages.

Install

npm install kyt-chat

React usage

Floating bubble

Renders a fixed-position button in the bottom-right corner. Click to open a compact chat window.

import { KytChatBubble } from 'kyt-chat'

export default function App() {
  return (
    <>
      {/* your existing app */}
      <KytChatBubble
        config={{
          queryUrl: 'https://your-proxy.example.com/query',
          topicId: 'your-topic-id',
          title: 'Ask anything',
          primaryColor: '#1565c0',
          faqs: ['What is this about?', 'How does it work?'],
        }}
      />
    </>
  )
}

Full-page chat

import { KytChat } from 'kyt-chat'

export default function ChatPage() {
  return (
    <KytChat
      config={{
        queryUrl: 'https://your-proxy.example.com/query',
        title: 'Ask anything',
        primaryColor: '#1565c0',
        theme: 'dark',
        avatarLabel: 'AI',
        hint: 'Powered by KYT',
      }}
      style={{ height: '100vh' }}
    />
  )
}

Headless hook (bring your own UI)

import { useKytChat } from 'kyt-chat'

function MyChat() {
  const { messages, loading, sendMessage } = useKytChat({
    queryUrl: 'https://your-proxy.example.com/query',
  })

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}><strong>{m.role}</strong>: {m.text}</div>
      ))}
      <button onClick={() => sendMessage('Hello')} disabled={loading}>Send</button>
    </div>
  )
}

Plain HTML / CDN usage

No React, no npm, no bundler needed. Use the IIFE build — React is bundled inside it.

<div id="chat"></div>

<!-- Use the .iife.js build — NOT kyt-chat.js (that one requires React as a peer dep) -->
<script src="https://cdn.jsdelivr.net/npm/kyt-chat/dist/kyt-chat.iife.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    KytChat.mountBubble({
      queryUrl: 'https://your-proxy.example.com/query',
      topicId: 'your-topic-id',
      title: 'Ask anything',
      primaryColor: '#1565c0',
    }, '#chat')

    // OR full-page:
    // KytChat.mountChat({ queryUrl: '...', topicId: '...' }, '#chat')
  })
</script>

Config reference

interface KytConfig {
  queryUrl: string        // required — your proxy server URL
  topicId?: string        // topic to query (overrides proxy default — useful for multi-topic proxies)
  title?: string          // chat window title
  welcomeMessage?: string // subtitle shown before first message
  placeholder?: string    // input placeholder text
  faqs?: string[]         // suggested questions
  primaryColor?: string   // accent color (any CSS hex, e.g. '#1565c0')
  theme?: 'dark' | 'light' | 'auto'
  avatarLabel?: string    // letter shown on AI avatar (default: 'AI')
  hint?: string           // small text below input bar
}

queryUrl is the only required field. Point it at your proxy server — never directly at the KYT edge function.

Two builds, two use cases:

• kyt-chat.iife.js — for plain HTML via <script> tag. React is bundled inside.
• kyt-chat.js — for React apps via npm install. React must be provided by the host app.