@dopt/channels-javascript-client

Dopt AI JavaScript client

Overview

The Dopt AI JavaScript client is a friendly package for accessing the Dopt AI API to use AI Assistants in your product.

It is published to npm as @dopt/ai-javascript-client.

Installation

Via npm:

npm install @dopt/ai-javascript-client @dopt/ai-assistant-javascript

Via Yarn:

yarn add @dopt/ai-javascript-client @dopt/ai-assistant-javascript

Via pnpm:

pnpm add @dopt/ai-javascript-client @dopt/ai-assistant-javascript

Configuration

To configure the AI JavaScript client you will need

• An AI API key (generated in Dopt)
• An Assistant identifier (found in Dopt)

Usage

Initialization

import { DoptApiClient } from '@dopt/ai-javascript-client';

const client = new DoptApiClient({
  apiKey: process.env.DOPT_AI_API_KEY as string,
});

Context

The AI Assistant API provides context-dependent completions, where context is information gathered from the web page the user is on.

The following types outline the context the API expects.

type DocumentContext = {
  type: "document";
  value: {
    url: string;
    title: string;
    width: number;
    height: number;
  };
}

type ElementContext = {
  type: "element";
  value: {
    position: {
      top: number;
      left: number;
    };
    content: string;
    tag: string;
  };
}

type VisualContext = {
  type: "visual";
  value: string;
}

type SemanticContext = {
  type: "semantic";
  value: {
    semanticContent: string;
    neighboringSemanticContent: string;
  };
}

Creating this context manually is onerous, so we've provided utilities to do so in our @dopt/ai-assistant-javascript package.

Usage is as follows.

import { formAssistantContext } from '@dopt/ai-assistant-javascript';

export interface AssistantContext {
  document?: boolean | DocumentContext['value'];
  element?: Element | ElementContext['value'];
  semantic?: boolean | SemanticContext['value'];
  visual?: boolean | VisualContext['value'];
}

const context = formAssistantContext(context: AssistantContext);

Completions

Stream completions for an Assistant

const events = await this.client.assistant.completions.stream(
  sid,
  request: {
    userIdentifier: userId,
    // See #Context above
    context
  }
);

let content = '';
for await (const event of events) {
  switch (event.type) {
    case 'status':
      console.log(event.status);
      break;
    case 'answer':
      console.log(event.answer);
      break;
    case 'content':
      content += event.content;
      console.log(content);
      break;
  }
}