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

Security Notice

Issue

The chat widget theme customization had an XSS (Cross-Site Scripting) vulnerability. Some saved theme values were not checked properly. This issue exists in Web SDK versions v1.0.0 and v1.1.0.

Someone with access to edit the widget theme could save a harmful value instead of a normal color, font, or background setting. When the widget loaded on a website, that harmful value could run in the user's browser.

Fix

We fixed this in Web SDK v1.1.1 by adding one common safety check for widget theme settings and making all related areas use it.

Now the system accepts normal theme settings, removes unsafe values before saving or showing them, and cleans up older unsafe saved values when they are read.

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.

Idle disconnect is optional. Add idle-disconnect-timeout-ms to enable it, and optionally add idle-disconnect-behavior="end_session" when the runtime session should be ended instead of only disconnecting the browser socket.

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