Artemis Web SDK

Full browser SDK for Agent Platform Artemis chat and voice experiences.

The package includes the core AgentSDK constructor, chat and voice clients, React provider/hooks/components, custom elements, rich content renderers, attachment upload, feedback, auth challenge UI, and template utilities. Kore Web SDK is only a breadth reference for this release; this package does not expose Kore-compatible chatWindow or chatConfig APIs.

Installation

Development environment package:

npm install @koredev/artemis-web-sdk

Production package:

npm install @koreai/artemis-web-sdk

Core SDK

import { AgentSDK } from '@koreai/artemis-web-sdk';

const sdk = new AgentSDK({
  endpoint: 'https://runtime.example.com',
  projectId: 'your_project_id',
  apiKey: 'pk_your_public_key',
  channelName: 'web',
  clientSessionIdentifier: true,
});

await sdk.connect();

const chat = sdk.chat();
chat.on('message', (message) => {
  console.log(message.role, message.content);
});

await chat.send('Hello', {
  metadata: {
    source: 'website',
  },
});

const voice = sdk.voice();
voice.on('stateChange', ({ state }) => {
  console.log('voice state', state);
});

Supported browser bootstrap options:

• Public key: endpoint, projectId, apiKey, and optionally channelId, channelName, deploymentSlug, userContext, clientSessionIdentifier.
• Hosted bootstrap token: endpoint, projectId, and exactly one of bootstrapToken or bootstrapTokenProvider.

The browser SDK exchanges the public key or bootstrap token through Runtime SDK routes, then uses short-lived SDK tokens and one-shot WebSocket tickets. Do not put SDK tokens or WebSocket tickets in URLs.

React

import { AgentProvider, ChatWidget, useChat, useVoice } from '@koreai/artemis-web-sdk/react';

function App() {
  return (
    <AgentProvider
      endpoint="https://runtime.example.com"
      projectId="your_project_id"
      apiKey="pk_your_public_key"
      channelName="web"
    >
      <ChatWidget enableFeedback />
    </AgentProvider>
  );
}

function CustomChat() {
  const { messages, isTyping, isConnected, sendMessage } = useChat();

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        void sendMessage('Hello from custom UI');
      }}
    >
      <p>{isConnected ? 'Connected' : 'Disconnected'}</p>
      {messages.map((message) => (
        <div key={message.id}>{message.content}</div>
      ))}
      {isTyping && <span>Typing...</span>}
      <button type="submit">Send</button>
    </form>
  );
}

function VoiceControls() {
  const { voiceState, startVoice, stopVoice, toggleMute, isMuted } = useVoice();

  return (
    <div>
      <p>{voiceState}</p>
      <button onClick={() => void startVoice()}>Start</button>
      <button onClick={stopVoice}>Stop</button>
      <button onClick={toggleMute}>{isMuted ? 'Unmute' : 'Mute'}</button>
    </div>
  );
}

AgentProvider also supports transport mode for Studio-style integrations:

<AgentProvider transport={transport}>
  <ChatWidget />
</AgentProvider>

Custom Elements

Importing the root package registers the SDK custom elements.

import '@koreai/artemis-web-sdk';

<agent-widget
  endpoint="https://runtime.example.com"
  project-id="your_project_id"
  api-key="pk_your_public_key"
  channel-name="web"
  client-session-identifier="true"
  mode="unified"
  position="bottom-right"
  enable-feedback="true"
></agent-widget>

<agent-chat> and <agent-voice> use the same connection attributes. Use bootstrap-token instead of api-key when a server endpoint has minted a hosted bootstrap token for this page.

Rich Content, Attachments, And Feedback

const chat = sdk.chat();

const attachmentId = await chat.uploadAttachment(
  new File(['hello'], 'hello.txt', { type: 'text/plain' }),
);

await chat.send('Please review this attachment', {
  attachmentIds: [attachmentId],
});

chat.on('message', (message) => {
  if (message.role !== 'assistant') return;

  console.log(message.richContent);
  console.log(message.renderables);
  console.log(message.actions);
});

The React ChatWidget can render built-in rich content, auth challenge cards, feedback controls, and custom system-message rows. The root package exports the template registry for custom renderers:

import { defaultRegistry } from '@koreai/artemis-web-sdk';

Distribution

This release is distributed through npm only. The build still emits browser artifacts used by internal embed routes and package validation, but no CDN/script-hosting contract is published by this package.

Public npm package targets:

| Environment | Package | | ----------- | -------------------------- | | Dev | @koredev/artemis-web-sdk | | Prod | @koreai/artemis-web-sdk |

The source workspace package remains @agent-platform/web-sdk; publish scripts stage a temporary package and rewrite only the published package metadata.

Browser Support

• Chromium-based browsers
• Firefox
• Safari 14+
• Edge 79+

Voice features require browser media APIs plus the Runtime/channel voice configuration for the deployment. If the browser denies microphone access, chat remains usable and voice should report a visible error/fallback state.

Development

pnpm --filter @agent-platform/web-sdk build
pnpm --filter @agent-platform/web-sdk test
pnpm --filter @agent-platform/web-sdk run smoke:packed-consumer
pnpm --filter @agent-platform/web-sdk run smoke:packed-consumer:dev
pnpm --filter @agent-platform/web-sdk run smoke:packed-consumer:prod

The packed browser/runtime E2E gate requires Runtime credentials:

SDK_BROWSER_E2E_ENDPOINT=https://runtime.example.com \
SDK_BROWSER_E2E_PROJECT_ID=your_project_id \
SDK_BROWSER_E2E_API_KEY=pk_your_public_key \
pnpm --filter @agent-platform/web-sdk run e2e:packed-browser

Dry-run and publish commands:

pnpm --filter @agent-platform/web-sdk run publish:dev:dry-run
pnpm --filter @agent-platform/web-sdk run publish:prod:dry-run
pnpm --filter @agent-platform/web-sdk run publish:dev
pnpm --filter @agent-platform/web-sdk run publish:prod

License

MIT