@octavus/docs 0.0.5 → 0.0.6

package/content/01-getting-started/01-introduction.md

@@ -88,6 +88,6 @@ sequenceDiagram
 
 - [Quick Start](/docs/getting-started/quickstart) — Get your first agent running in minutes
 - [Server SDK](/docs/server-sdk/overview) — Learn about backend integration
-- [Client SDK](/docs/client-sdk/overview) — Build chat interfaces with React
+- [Client SDK](/docs/client-sdk/overview) — Build chat interfaces with React (or other frameworks)
 - [Protocol Reference](/docs/protocol/overview) — Deep dive into agent protocols
 

package/content/01-getting-started/02-quickstart.md

@@ -21,8 +21,8 @@ Install the Octavus SDKs in your project:
 # Server SDK for backend
 npm install @octavus/server-sdk
 
-# Client SDK for frontend (React)
-npm install @octavus/client-sdk
+# React bindings for frontend
+npm install @octavus/react
 ```
 
 ## Backend Setup
@@ -124,7 +124,7 @@ Use the `useOctavusChat` hook to build a chat interface:
 // components/chat.tsx
 'use client';
 
-import { useOctavusChat, type UIMessage } from '@octavus/client-sdk';
+import { useOctavusChat, type UIMessage } from '@octavus/react';
 import { useState } from 'react';
 
 interface ChatProps {

package/content/03-client-sdk/01-overview.md

@@ -1,24 +1,43 @@
 ---
 title: Overview
-description: Introduction to the Octavus Client SDK for building chat interfaces.
+description: Introduction to the Octavus Client SDKs for building chat interfaces.
 ---
 
 # Client SDK Overview
 
-The `@octavus/client-sdk` package provides React hooks for building chat interfaces with Octavus agents. It handles streaming, message state, and real-time updates.
+Octavus provides two packages for frontend integration:
 
-**Current version:** `{{VERSION:@octavus/client-sdk}}`
+| Package | Purpose | Use When |
+|---------|---------|----------|
+| `@octavus/react` | React hooks and bindings | Building React applications |
+| `@octavus/client-sdk` | Framework-agnostic core | Using Vue, Svelte, vanilla JS, or custom integrations |
+
+**Most users should install `@octavus/react`** — it includes everything from `@octavus/client-sdk` plus React-specific hooks.
 
 ## Installation
 
+### React Applications
+
+```bash
+npm install @octavus/react
+```
+
+**Current version:** `{{VERSION:@octavus/react}}`
+
+### Other Frameworks
+
 ```bash
 npm install @octavus/client-sdk
 ```
 
-## Basic Usage
+**Current version:** `{{VERSION:@octavus/client-sdk}}`
+
+## React Usage
+
+The `useOctavusChat` hook provides state management and streaming for React applications:
 
 ```tsx
-import { useOctavusChat, type UIMessage } from '@octavus/client-sdk';
+import { useOctavusChat, type UIMessage } from '@octavus/react';
 
 function Chat({ sessionId }: { sessionId: string }) {
   const { messages, status, send } = useOctavusChat({
@@ -59,6 +78,38 @@ function MessageBubble({ message }: { message: UIMessage }) {
 }
 ```
 
+## Framework-Agnostic Usage
+
+The `OctavusChat` class can be used with any framework or vanilla JavaScript:
+
+```typescript
+import { OctavusChat } from '@octavus/client-sdk';
+
+const chat = new OctavusChat({
+  onTrigger: async (triggerName, input) => {
+    return fetch('/api/trigger', {
+      method: 'POST',
+      body: JSON.stringify({ sessionId, triggerName, input }),
+    });
+  },
+});
+
+// Subscribe to state changes
+const unsubscribe = chat.subscribe(() => {
+  console.log('Messages:', chat.messages);
+  console.log('Status:', chat.status);
+  // Update your UI here
+});
+
+// Send a message
+await chat.send('user-message', { USER_MESSAGE: 'Hello' }, {
+  userMessage: { content: 'Hello' },
+});
+
+// Cleanup when done
+unsubscribe();
+```
+
 ## Key Features
 
 ### Unified Send Function
@@ -112,14 +163,14 @@ const { stop } = useOctavusChat({...});
 stop();
 ```
 
-## Hook Reference
+## Hook Reference (React)
 
 ### useOctavusChat
 
 ```typescript
-function useOctavusChat(options: UseOctavusChatOptions): UseOctavusChatReturn;
+function useOctavusChat(options: OctavusChatOptions): UseOctavusChatReturn;
 
-interface UseOctavusChatOptions {
+interface OctavusChatOptions {
   // Required: Function that calls your backend trigger endpoint
   onTrigger: TriggerFunction;
   
@@ -157,6 +208,32 @@ interface UserMessageInput {
 }
 ```
 
+## Class Reference (Framework-Agnostic)
+
+### OctavusChat
+
+```typescript
+class OctavusChat {
+  constructor(options: OctavusChatOptions);
+  
+  // State (read-only)
+  readonly messages: UIMessage[];
+  readonly status: ChatStatus;
+  readonly error: Error | null;
+  
+  // Actions
+  send(
+    triggerName: string,
+    input?: Record<string, unknown>,
+    options?: { userMessage?: UserMessageInput }
+  ): Promise<void>;
+  stop(): void;
+  
+  // Subscription
+  subscribe(callback: () => void): () => void;  // Returns unsubscribe function
+}
+```
+
 ## Next Steps
 
 - [Messages](/docs/client-sdk/messages) — Working with message state

package/content/03-client-sdk/02-messages.md

@@ -121,7 +121,7 @@ function MessageBubble({ message }: { message: UIMessage }) {
 ### Rendering Parts
 
 ```tsx
-import { isOtherThread, type UIMessagePart } from '@octavus/client-sdk';
+import { isOtherThread, type UIMessagePart } from '@octavus/react';
 
 function PartRenderer({ part }: { part: UIMessagePart }) {
   // Check if part belongs to a named thread (e.g., "summary")
@@ -180,7 +180,7 @@ function TextPart({ part }: { part: UITextPart }) {
 Content from named threads (like "summary") is identified by the `thread` property. Use the `isOtherThread` helper:
 
 ```tsx
-import { isOtherThread } from '@octavus/client-sdk';
+import { isOtherThread } from '@octavus/react';
 
 function PartRenderer({ part }: { part: UIMessagePart }) {
   if (isOtherThread(part)) {

package/content/03-client-sdk/03-streaming.md

@@ -49,7 +49,7 @@ function Chat() {
 Parts update in real-time during streaming. Use the part's `status` to show appropriate UI:
 
 ```tsx
-import type { UITextPart, UIReasoningPart } from '@octavus/client-sdk';
+import type { UITextPart, UIReasoningPart } from '@octavus/react';
 
 function TextPart({ part }: { part: UITextPart }) {
   return (
@@ -88,7 +88,7 @@ function ReasoningPart({ part }: { part: UIReasoningPart }) {
 Tool calls progress through multiple states:
 
 ```tsx
-import type { UIToolCallPart } from '@octavus/client-sdk';
+import type { UIToolCallPart } from '@octavus/react';
 
 function ToolCallPart({ part }: { part: UIToolCallPart }) {
   return (
@@ -188,7 +188,7 @@ When `stop()` is called:
 Content from named threads (like "summary") streams separately and is identified by the `thread` property:
 
 ```tsx
-import { isOtherThread } from '@octavus/client-sdk';
+import { isOtherThread } from '@octavus/react';
 
 function MessageBubble({ message }: { message: UIMessage }) {
   // Separate main thread from named threads

package/content/03-client-sdk/04-execution-blocks.md

@@ -25,7 +25,7 @@ interface UIOperationPart {
 Operations are typically shown as compact status indicators:
 
 ```tsx
-import type { UIOperationPart } from '@octavus/client-sdk';
+import type { UIOperationPart } from '@octavus/react';
 
 function OperationCard({ operation }: { operation: UIOperationPart }) {
   return (
@@ -46,7 +46,7 @@ function OperationCard({ operation }: { operation: UIOperationPart }) {
 Operations appear alongside text, reasoning, and tool calls in the message's `parts` array:
 
 ```tsx
-import type { UIMessage, UIMessagePart } from '@octavus/client-sdk';
+import type { UIMessage, UIMessagePart } from '@octavus/react';
 
 function MessageBubble({ message }: { message: UIMessage }) {
   return (

package/content/03-client-sdk/_meta.md

@@ -1,4 +1,4 @@
 ---
 title: Client SDK
-description: Frontend integration with @octavus/client-sdk for React applications.
+description: Frontend integration with @octavus/react for React applications and @octavus/client-sdk for other frameworks.
 ---

package/content/04-protocol/02-input-resources.md

@@ -65,6 +65,8 @@ In prompts, reference with `{{INPUT_NAME}}`:
 You are a support agent for {{COMPANY_NAME}}.
 ```
 
+> **Note:** Variables must be `UPPER_SNAKE_CASE`. Nested properties (dot notation like `{{VAR.property}}`) are not supported. Objects are serialized as JSON when interpolated.
+
 ## Resources
 
 Resources are persistent state that: