Embedding Devic in your product

npm install @devicai/ui

import { DevicProvider, ChatDrawer } from '@devicai/ui';
import '@devicai/ui/styles.css';

export default function App() {
  return (
    <DevicProvider apiKey="devic-xxx">
      <ChatDrawer
        assistantId="support-assistant"
        options={{
          position: 'right',
          welcomeMessage: 'Hello! How can I help?',
          suggestedMessages: ['Where is my order?', 'I need an invoice'],
        }}
      />
    </DevicProvider>
  );
}

<DevicProvider
  getTenantSession={async () => {
    const r = await fetch('/api/devic-session', { credentials: 'include' });
    return r.json();
  }}
  onSessionExpired={() => location.assign('/login')}
>
  <App />
</DevicProvider>

const locationTool = {
  toolName: 'get_user_location',
  schema: {
    type: 'function',
    function: {
      name: 'get_user_location',
      description: 'Get the user current geographic location',
      parameters: { type: 'object', properties: {} },
    },
  },
  callback: async () => {
    const pos = await new Promise((ok, err) =>
      navigator.geolocation.getCurrentPosition(ok, err),
    );
    return { latitude: pos.coords.latitude, longitude: pos.coords.longitude };
  },
};

<ChatDrawer assistantId="support-assistant" modelInterfaceTools={[locationTool]} />

.devic-chat-drawer {
  --devic-primary: #4764e6;
  --devic-bg: #ffffff;
  --devic-text: #1a1a1a;
  --devic-radius: 12px;
}