Web SDK
The Agent Platform Web SDK (@agent-platform/web-sdk) provides a TypeScript/JavaScript library for embedding agent chat and voice interactions in web applications. The SDK supports vanilla JavaScript, React hooks, and a web component for drop-in integration.
The browser-facing SDK does not send the public pk_* key directly to /ws/sdk. It first exchanges the key for a short-lived SDK session token on POST /api/v1/sdk/init, then authenticates SDK HTTP routes with X-SDK-Token and the SDK WebSocket with Sec-WebSocket-Protocol: sdk-auth,<token>.
Quick start
Vanilla JavaScript
React
Web component
AgentSDK
The main SDK class. Creates and manages connections, chat clients, and voice clients.Constructor
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
projectId | string | Yes | — | Project ID to connect to |
apiKey | string | Yes | — | Public API key (starts with pk_) |
endpoint | string | No | Same origin | Platform base URL |
debug | boolean | No | false | Enable debug logging to console |
Methods
| Method | Returns | Description | |
|---|---|---|---|
connect() | Promise<void> | Establish WebSocket connection to the platform | |
disconnect() | void | Close the connection and clean up resources | |
chat() | ChatClient | Get the chat client instance (created on first call) | |
voice() | VoiceClient | Get the voice client instance (created on first call) | |
isConnected() | boolean | Check if the SDK is connected | |
getSessionId() | `string | null` | Get the current session ID |
Static methods
| Method | Returns | Description |
|---|---|---|
AgentSDK.init(config) | AgentSDK | Create and store an SDK instance globally (for web components) |
Events
| Event | Payload | Description |
|---|---|---|
connected | void | WebSocket connection established |
disconnected | void | WebSocket connection closed |
error | { error: Error } | Connection or runtime error |
sessionStart | { sessionId: string } | New session started |
sessionEnd | void | Session ended |
ChatClient
Handles text messaging with streaming support. Obtained viasdk.chat().
Methods
| Method | Returns | Description |
|---|---|---|
send(text, options?) | Promise<string> | Send a message. Returns the message ID |
uploadAttachment(file) | Promise<string> | Upload a file attachment. Returns the attachment ID |
getMessages() | Message[] | Get all messages in the conversation |
getIsTyping() | boolean | Check if the agent is currently responding |
clearMessages() | void | Clear the local message history |
send() options
session.messageMetadata as the canonical prompt/template path. message_metadata remains available as the tool-context alias for context_access.read.
Events
| Event | Payload | Description |
|---|---|---|
message | Message | New message received (user or assistant) |
messageChunk | { messageId: string, chunk: string } | Streaming text chunk from assistant |
typing | { isTyping: boolean } | Agent typing indicator changed |
messageSent | { messageId: string } | User message was sent |
attachmentUploaded | { attachmentId: string, filename: string } | File upload completed |
attachmentError | { filename: string, error: string } | File upload failed |
error | { error: Error } | Chat error |
Message type
RichContent type
Multi-format content variants delivered alongside the plain text response:ActionSet type
Interactive action elements the agent sends for user input:AttachmentRef type
VoiceClient
Handles voice interactions via WebSocket audio pipeline with optional WebRTC. Obtained viasdk.voice().
The voice client supports two modes:
- Pipeline mode: Client-side VAD (Voice Activity Detection) captures PCM16 audio, sends it via WebSocket for server-side STT/LLM/TTS processing, and plays back MP3 audio responses.
- Realtime mode: Native audio I/O via realtime LLM providers with PCM16 streaming.
Methods
| Method | Returns | Description |
|---|---|---|
start() | Promise<void> | Start voice interaction (requests microphone permission) |
stop() | void | Stop voice interaction and release audio resources |
toggleMute() | boolean | Toggle microphone mute. Returns the new mute state |
getState() | VoiceState | Get the current voice state |
getInfo() | VoiceInfo | Get full voice status information |
Static methods
| Method | Returns | Description |
|---|---|---|
VoiceClient.isSupported() | boolean | Check if the browser supports voice features |
Voice states
VoiceInfo type
VoiceClientOptions
Events
| Event | Payload | Description |
|---|---|---|
stateChange | { state: VoiceState, previousState: VoiceState } | Voice state changed |
transcription | { text: string, isFinal: boolean, confidence?: number } | Speech-to-text result |
transcriptionFinal | { text: string, confidence: number } | Final transcription |
responseStart | { messageId: string } | Agent started speaking |
responseChunk | { messageId: string, text: string } | Agent speech text chunk |
responseEnd | { messageId: string, text: string } | Agent finished speaking |
speaking | { isSpeaking: boolean } | Audio playback state changed |
volumeChange | { level: number } | Microphone volume level (0-1) |
ready | void | Voice client is ready |
error | { error: Error } | Voice error |
micPermissionDenied | void | Microphone permission denied |
bargeIn | void | User interrupted agent speech |
vadAvailable | { available: boolean } | VAD availability changed |
React hooks
The React integration provides a context provider and hooks for state management.AgentProvider
Wrap your application withAgentProvider to initialize the SDK:
useAgent()
Access the full SDK context:useChat()
Access chat-specific state:useVoice()
Access voice-specific state:File uploads
Upload files for agent processing:Supported file types
- Images: JPEG, PNG, GIF, WebP, SVG
- Documents: PDF, DOCX, XLSX, PPTX, TXT, CSV
- Audio: MP3, WAV, OGG, M4A
- Video: MP4, WebM
Upload limits
- Maximum file size: 25 MB per file
- Maximum files per message: 10
Styling and theming
Widget theming
Customize the web component appearance:Widget positions
bottom-right(default)bottom-lefttop-righttop-left
Widget modes
chat— Text-only chat interfacevoice— Voice-only interfaceunified— Combined chat and voice interface
TypedEventEmitter
All SDK classes extendTypedEventEmitter for type-safe event handling:
WebSocket message types
The SDK communicates with the platform over WebSocket. These types are used internally but documented for advanced use cases.Server message types
| Type | Description |
|---|---|
response_start | Agent started generating a response |
response_chunk | Incremental text from the agent |
response_end | Agent finished responding (includes fullText, richContent, actions) |
error | Error occurred during processing |
session_start | New session established |
session_end | Session ended |
API key management
Public API keys (pk_ prefix) are scoped to a project and provide limited permissions for SDK usage. They are safe to expose in client-side code.
Creating an API key
- Go to Project > Settings > API Keys.
- Click Create API key.
- Set the allowed origins (for CORS protection).
- Copy the key — it is displayed only once.
Origin restrictions
Configure allowed origins to prevent unauthorized use of your API key:Origin header on every SDK request and rejects requests from unlisted origins.
Browser compatibility
The SDK requires:- ES2020+ support
fetchAPIWebSocketAPIMediaDevicesAPI (for voice features)AudioContextAPI (for voice features)
ABL SDK
The ABL SDK (@abl/core) provides programmatic access to parse, validate, and serialize Agent Business Language (ABL) definitions. Use it to build tooling, CI/CD pipelines, and integrations that work with ABL agent specifications.
Installation
@abl/compiler package provides compilation to Intermediate Representation (IR) and validation:
Parsing ABL
Theparse() function is the primary entry point. It auto-detects the document type and returns a parsed AST (Abstract Syntax Tree) along with any parse errors.
parse(text, type?)
Parse ABL text into a structured document.| Parameter | Type | Required | Description |
|---|---|---|---|
text | string | Yes | ABL source text |
type | string | No | Document type override: supervisor, agent, agent-based, yaml, or tools |
Auto-detection rules
Whentype is not specified, parse() detects the document type from the content:
| Content pattern | Detected type |
|---|---|
YAML format (lowercase keys like agent:, flow:) | yaml |
Starts with TOOLS: (no AGENT: or SUPERVISOR:) | tools |
Starts with SUPERVISOR: | supervisor |
Starts with AGENT: | agent |
Starts with BEHAVIOR_PROFILE: | agent-based |
Note: The parser also recognizesMODE:as a legacy keyword for backward compatibility. Definitions containingMODE:are detected asagent-basedtype butMODE:is deprecated and should not be used in new definitions. Use per-stepREASONING: true/falsewithin aFLOW:section instead.
Validating ABL
validate(text)
Validate ABL text and return an array of errors. Returns an empty array if the text is valid.| Parameter | Type | Required | Description |
|---|---|---|---|
text | string | Yes | ABL source text to validate |
isValid(text)
Quick boolean check for ABL validity.Serializing ABL
serialize(document)
Convert a parsed AST document back to ABL text. Useful for programmatic modifications to agent definitions.Specialized parsers
For advanced use cases, the SDK exposes type-specific parsers:parseAgent(text)
Parse a standard agent definition.parseSupervisor(text)
Parse a supervisor definition.parseAgentBasedABL(text)
Parse an agent-based definition (legacy format with deprecatedMODE: directive). For new definitions, use parseAgent() instead.
parseYamlABL(text)
Parse a YAML-format ABL definition.isYamlFormat(text)
Check whether ABL text is in YAML format.Expression parsing
Parse and work with ABL condition expressions:parseCondition(text)
Parse a condition expression used in ABL flow transitions.parseExpression(text)
Parse a general ABL expression.expressionToPython(expression)
Convert a parsed ABL expression to Python syntax (used in runtime evaluation).Lexer utilities
Access the tokenizer for building custom tooling:tokenize(text)
Tokenize ABL text into a token stream.Compilation (IR)
The@abl/compiler package compiles parsed ABL into an Intermediate Representation (IR) used by the runtime.
compileABLtoIR(text, options?)
Compile ABL source text directly to IR.validateABL(text)
Validate ABL text with compiler-level checks (beyond parser validation).validateIR(ir)
Validate a compiled IR for semantic correctness.validateCrossAgentRefs(agents)
Validate references between multiple agent definitions (handoffs, delegations).validateFieldReferences(ir)
Validate that field references in expressions point to defined fields.ValidationDiagnostic type
CI/CD integration example
Validate all ABL files in a project before deployment:Working with exported projects
Combine the ABL SDK with the Project export/import API to programmatically manipulate exported agent files:TypeScript support
Both@abl/core and @abl/compiler ship with full TypeScript type definitions. Key types are exported directly:
Next steps
- Channels — Configure SDK channels and widget settings
- Conversation API — REST API for server-side chat integration
- API overview — Authentication and general conventions