JavaScript & TypeScript Chatbot SDK (npm)

JavaScript SDK

Het webchatagent package is de officiële JavaScript- en TypeScript-client voor de REST API en de WebSocket API. Gebruik dit wanneer de kant-en-klare Widget niet volstaat en u een eigen chatinterface wilt bouwen: een eigen ontwerp, een React- of Vue-applicatie, een native shell of een server-side integratie. De client communiceert met dezelfde Chatbot, met dezelfde Kennis, tools en Instellingen als de Widget.

• Getypeerde functies voor alles wat de Widget doet: antwoorden, streaming, voorgestelde vervolgvragen, bronnen, bestandsuploads, feedback, leadformulieren, doelschakeling naar medewerkers en Live chat
• Geen externe afhankelijkheden, strikte TypeScript-types, werkt in browsers, Node.js 22.12+, Bun en Deno
• Open source onder de MIT-licentie: github.com/WebChatAgent/webchatagent-js

Installeren

npm install webchatagent

U hebt uw Chatbot-ID nodig: open uw Chatbot in het dashboard en klik op Chatbotacties → Chatbot-ID kopiëren.

Eerste bericht

import { WebChatAgent } from 'webchatagent'

const chat = new WebChatAgent({ chatbotId: 'YOUR-CHATBOT-ID', storage: localStorage })

const reply = await chat.send('What are your opening hours?')
console.log(reply.text) // the answer as Markdown

storage: localStorage bewaart het gesprek over verschillende paginaladingen heen. Elke volgende aanroep van send() gaat door in hetzelfde gesprek.

In de browser beantwoordt de API alleen verzoeken vanaf pagina's die staan onder de Toegestane websites van uw Chatbot, indien u deze hebt ingesteld. localhost werkt altijd voor lokale ontwikkeling.

Antwoorden streamen

for await (const event of chat.stream('Which plan fits a small shop?')) {
  if (event.type === 'text') bubble.innerHTML = render(event.text) // full answer so far
  if (event.type === 'done') showSuggestions(event.reply.suggestions)
}

event.text is al opgeschoond, waardoor half geschreven links of opmaakcodes nooit zichtbaar worden. Antwoorden worden geleverd in Markdown: render deze met een Markdown-library en sanitize de HTML (bijvoorbeeld met DOMPurify).

Wat de SDK ondersteunt

getConfig().features geeft aan welke van deze opties Beschikbaar zijn voor de Chatbot, zodat uw gebruikersinterface alleen toont wat daadwerkelijk werkt.

Doorschakelen naar een medewerker

Wanneer de bot het gesprek overdraagt aan uw team, of wanneer de Bezoeker om een medewerker vraagt, bevat het antwoord mode: 'human'. Open de Live chat en de berichten van het teamlid komen realtime binnen:

if (reply.mode === 'human') {
  const live = chat.liveChat()
  live.on('message', (message) => showMessage(message))
  live.on('ended', () => backToBot())
  await live.send('Hello, I need help with order 1234.')
}

Uw team antwoordt in het dashboard onder Live chat, exact hetzelfde als bij de Widget.

Wat u moet tonen

Bij een eigen interface bent u zelf verantwoordelijk voor drie zaken die de Widget normaal gesproken automatisch afhandelt:

1. "Powered by"-vermelding: als config.branding.required op true staat, toon dan config.branding.text met een link naar config.branding.url.
2. AI-label: markeer antwoorden met aiGenerated: true als gegenereerd door AI.
3. Privacyverklaring: toon config.widget.privacyPolicyHtml.

Volledige documentatie

De README op GitHub bevat de complete API-referentie, foutcodes, limieten, voorbeelden voor React, Vue/Nuxt, vanilla JavaScript en Node.js, en een sectie voor AI-codeerassistenten zoals Claude Code, Cursor of Copilot. Een complete chatpagina zonder framework vindt u in examples/browser.html.