@sire/chat SDK

Embed the Sire chat widget in any web application.

Installation

npm install @sire/chat

React Usage

Import and render the SireChat component with your API configuration.

import { SireChat } from '@sire/chat';

function App() {
  return (
    <SireChat
      config={{
        apiUrl: 'https://api.sire.app',
        apiKey: 'your-api-key',
        greeting: 'Hi! How can I help?',
        position: 'bottom-right',
        theme: {
          primaryColor: '#137FEC',
          borderRadius: '12px',
        },
      }}
    />
  );
}

Vanilla JavaScript

For non-React apps, use the vanilla JS mount/unmount API.

import { mount, unmount } from '@sire/chat/vanilla';

mount({
  apiUrl: 'https://api.sire.app',
  apiKey: 'your-api-key',
  greeting: 'Welcome!',
});

// To remove:
unmount();

Configuration

Property	Type	Required	Description
apiUrl	string	Yes	Sire API base URL
apiKey	string	Yes	Your API key for authentication
tenantId	string	No	Optional tenant identifier
position	'bottom-right' \| 'bottom-left'	No	Widget position (default: bottom-right)
greeting	string	No	Initial greeting message
placeholder	string	No	Input placeholder text
theme	Partial<SireChatTheme>	No	Custom theme overrides

Theming

Customize the widget appearance with the theme object.

{
  primaryColor: '#137FEC',   // Accent color
  backgroundColor: '#ffffff', // Chat background
  textColor: '#1e293b',       // Text color
  borderColor: '#e2e8f0',     // Border color
  borderRadius: '12px',       // Border radius
  fontFamily: 'system-ui',    // Font family
}

Advanced: Provider Pattern

For more control, use the provider pattern to access the chat client directly.

import { SireChatProvider, useSireChatContext } from '@sire/chat';

function CustomChat() {
  const { client, theme } = useSireChatContext();

  async function sendMessage(text: string) {
    const reply = await client.sendMessage(text);
    console.log(reply.content);
  }

  return <button onClick={() => sendMessage('hello')}>Send</button>;
}

function App() {
  return (
    <SireChatProvider config={{ apiUrl: '...', apiKey: '...' }}>
      <CustomChat />
    </SireChatProvider>
  );
}