@viber/api

Shared tRPC client library for Viber components. This library provides type-safe communication between all Viber components (web-client, web-client-agent, extension) and the communication-agent.

Features

• Type-safe API: Full TypeScript support with end-to-end type safety
• Dual Protocol Support: HTTP for queries/mutations, WebSocket for real-time subscriptions
• Automatic Protocol Selection: Uses tRPC's split link to choose the best protocol
• Connection Management: Built-in connection status tracking and health checks
• Real-time Updates: WebSocket subscriptions for prompt status updates
• Flexible Configuration: Customizable endpoints, timeouts, and retry logic

Quick Start

Basic Usage

import { viberAPI } from '@viber/api';

// Connect to the communication agent
await viberAPI.connect();

// Send a prompt
const response = await viberAPI.sendPrompt({
  userGoal: "Make this button red",
  elementContext: {
    tagName: "button",
    className: "submit-btn",
    id: "submit",
    innerText: "Submit"
  }
});

// Subscribe to status updates
const unsubscribe = viberAPI.subscribeToPromptStatus(response.promptId, (status) => {
  console.log('Status update:', status);
});

Custom Configuration

import { createViberAPI } from '@viber/api';

const customAPI = createViberAPI({
  baseUrl: 'http://localhost:3001',
  wsUrl: 'ws://localhost:3002',
  timeout: 15000,
  retries: 5
});

await customAPI.connect();

API Reference

ViberAPI Class

Methods

Connection Management

• connect(): Promise<void> - Connect to the communication agent
• disconnect(): void - Disconnect from the communication agent
• getConnectionStatus(): ConnectionStatus - Get current connection status

Core API

• sendPrompt(prompt: Prompt): Promise<PromptResponse> - Send a prompt to the communication agent
• getStatus(promptId: string): Promise<StatusResponse> - Get status of a prompt
• registerClient(clientType, clientId): Promise<void> - Register this client with the communication agent
• health(): Promise<{ status: string }> - Health check

Real-time Updates

• subscribeToPromptStatus(promptId: string, callback): Subscription - Subscribe to prompt status updates

Utilities

• updateConfig(newConfig: Partial<ViberAPIConfig>): void - Update configuration
• getConfig(): ViberAPIConfig - Get current configuration

Usage Examples

Web Client Integration

import { viberAPI } from '@viber/api';

// In your web-client component
const handlePromptSubmit = async (userGoal: string, elementContext: ElementContext) => {
  try {
    await viberAPI.connect();
    
    const response = await viberAPI.sendPrompt({
      userGoal,
      elementContext
    });
    
    // Subscribe to updates
    const unsubscribe = viberAPI.subscribeToPromptStatus(response.promptId, (status) => {
      if (status.status === 'completed') {
        console.log('Prompt completed!');
        unsubscribe();
      }
    });
    
  } catch (error) {
    console.error('Failed to send prompt:', error);
  }
};

Extension Integration

import { createViberAPI } from '@viber/api';

const extensionAPI = createViberAPI({
  baseUrl: 'http://localhost:3001',
  wsUrl: 'ws://localhost:3002'
});

// In your VS Code extension
export async function triggerVibeAgent(prompt: string) {
  try {
    await extensionAPI.connect();
    await extensionAPI.registerClient('extension', 'vscode-extension');
    
    const response = await extensionAPI.sendPrompt({
      userGoal: prompt,
      elementContext: {
        tagName: 'div',
        className: 'code-editor'
      }
    });
    
    console.log('Prompt sent:', response);
  } catch (error) {
    console.error('Extension error:', error);
  }
}

Development

Building

npm run build

Development Mode

npm run dev

Clean Build

npm run clean && npm run build

Architecture

This library serves as the central communication layer for all Viber components:

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│  web-client │    │web-client-  │    │   extension │
│             │    │   agent     │    │             │
└─────┬───────┘    └─────┬───────┘    └─────┬───────┘
      │                  │                  │
      └──────────────────┼──────────────────┘
                         │
                    ┌────▼────┐
                    │@viber/api│
                    └────┬────┘
                         │
                    ┌────▼────┐
                    │communication│
                    │   agent   │
                    └───────────┘

License

MIT