@orbitone/agent-sdk

AI Agent SDK for Vue 3 — chat, streaming, tool authorization.

Install

pnpm add @orbitone/agent-sdk vue

vue is a peer dependency. You need to install it yourself.

Quick start

<script setup lang="ts">
import { AgentPage } from '@orbitone/agent-sdk'
import '@orbitone/agent-sdk/dist/style.css'

const config = {
  baseUrl: 'https://your-backend.example.com',
  agentId: 'your-agent-id',
  appId: 'your-app-id',
  tokenProvider: {
    getToken: () => localStorage.getItem('token'),
    onTokenExpired: () => { window.location.href = '/login' },
  },
  defaultMode: 'qa' as const,
}
</script>

<template>
  <AgentPage :config="config" />
</template>

Authentication

All requests attach two headers:

• Authorization: <token> — raw JWT, no Bearer prefix
• ServiceID: <appId>

Provided via the AuthManager and HttpClient internally. You don't wire this up yourself.

Public API

Composables

• useAgent(config) — Vue composable exposing conversations, streaming state, tool calls, and actions

UI components (compose your own layout)

• AgentPage — full chat page (sidebar + chat area)
• Sidebar, ChatArea, MessageList, MessageItem, MessageInput
• ModeSwitcher, ToolCallCard, ThinkingBlock
• AuthConfirmDialog, JsonViewer

Core classes (advanced)

• AgentEngine — SSE and mode state machine, exposes .api, .conversations, .mode
• BusinessApiClient — typed methods for /api/business/*
• HttpClient — low-level fetch wrapper with auth header + code === 100000 unwrapping
• AuthManager — attaches Authorization + ServiceID
• SSEClient — SSE stream reader
• ConversationManager — conversation CRUD
• ModeController — QA / Auth / Auto mode

Use these when you want to build your own custom UI on top of the SDK protocol.

Modes

| Mode | Read | Write | Delete | |------|------|-------|--------| | qa | ❌ | ❌ | ❌ | | auth | ✅ | ⏸ approve | ⏸ approve | | auto | ✅ | ✅ | ⏸ approve |

Theming

CSS variables (from dist/style.css):

:root {
  --agent-primary-color: #306bbd;
  --agent-sidebar-width: 280px;
  --agent-font-family: 'PingFang SC', sans-serif;
}

Build

pnpm build   # -> dist/agent-sdk.{js,umd.cjs}, dist/style.css, dist/index.d.ts

License

MIT