API Reference

Complete API documentation for PACE.js.

PACE Class

The main orchestrator class.

Constructor

javascript

new PACE(config)

Parameters

Parameter	Type	Required	Description
`config`	`PACEConfig`	Yes	Configuration object

PACEConfig

typescript

interface PACEConfig {
  // Required
  container: string | HTMLElement  // DOM selector or element
  products: string | Product[] | ProductConfig  // Path, array, or object

  // AI Configuration
  aiAdapter?: 'claude' | 'openai' | AIAdapter
  apiKey?: string
  model?: string

  // UI Configuration
  greeting?: string
  defaultView?: 'product' | 'about' | 'chat' | 'summary'
  enableExecutiveSummary?: boolean

  // Theme
  theme?: string | ThemeConfig
  primaryColor?: string
  accentColor?: string

  // Advanced
  plugins?: Plugin[]
  customComponents?: ComponentMap
  stateInitializer?: () => object
}

Methods

mount()

javascript

pace.mount(): void

Mount PACE to the DOM. Call after creating instance.

Example:

javascript

const pace = new PACE({ container: '#app', products: './products.json' })
pace.mount()

use()

javascript

pace.use(plugin: Plugin): PACE

Add a plugin. Returns this for chaining.

Example:

javascript

pace
  .use(analyticsPlugin)
  .use(i18nPlugin)
  .mount()

on()

javascript

pace.on(event: string, callback: Function): void

Listen to events.

Example:

javascript

pace.on('ready', () => {
  console.log('PACE initialized')
})

emit()

javascript

pace.emit(event: string, payload?: any): void

Emit custom events.

Example:

javascript

pace.emit('custom:event', { data: 'value' })

navigate()

javascript

pace.navigate(view: string, params?: object): void

Navigate to a view programmatically.

Example:

javascript

pace.navigate('product')
pace.navigate('product', { id: 'sql-mcp' })

destroy()

javascript

pace.destroy(): void

Clean up and remove PACE from DOM.

Example:

javascript

pace.destroy()

State Class

Reactive state management.

Constructor

javascript

new State(initialState?)

Parameters

Parameter	Type	Description
`initialState`	`object`	Initial state values

Methods

get()

javascript

state.get(key: string): any

Retrieve a value from state.

Example:

javascript

const view = state.get('activeView')

set()

javascript

state.set(key: string, value: any): void

Update state and notify subscribers.

Example:

javascript

state.set('activeView', 'chat')

javascript

state.subscribe(key: string, callback: Function): Function

Listen to state changes. Returns unsubscribe function.

Example:

javascript

const unsubscribe = state.subscribe('activeView', (newValue, oldValue) => {
  console.log(`View changed: ${oldValue} → ${newValue}`)
})

// Later...
unsubscribe()

getAll()

javascript

state.getAll(): object

Get all state values.

Example:

javascript

const allState = state.getAll()
console.log(allState)

Router Class

Hash-based routing.

Constructor

javascript

new Router(state)

Parameters

Parameter	Type	Description
`state`	`State`	State instance

Methods

init()

javascript

router.init(): void

Initialize router and start listening to hash changes.

navigate()

javascript

router.navigate(route: string, params?: object): void

Navigate to a route.

Example:

javascript

router.navigate('product')
router.navigate('product', { id: 'sql-mcp' })

on()

javascript

router.on(event: string, callback: Function): void

Listen to router events.

Example:

javascript

router.on('navigate', (route, params) => {
  console.log('Navigated to:', route, params)
})

ProductCatalog Class

Product display component.

Constructor

javascript

new ProductCatalog(products, state)

Methods

render()

javascript

render(): string

Generate HTML for the catalog.

search()

javascript

search(query: string): Product[]

Filter products by search query.

filterByCategory()

javascript

filterByCategory(category: string): Product[]

Filter products by category.

attachEvents()

javascript

attachEvents(): void

Attach DOM event listeners.

AboutPage Class

About page component.

Constructor

javascript

new AboutPage(config, state)

Methods

render()

javascript

render(): string

Generate HTML for the about page.

ChatWidget Class

Chat interface component.

Constructor

javascript

new ChatWidget(config, state)

Methods

render()

javascript

render(): string

Generate HTML for chat widget.

sendMessage()

javascript

sendMessage(message: string): Promise<void>

Send a message to the AI.

Example:

javascript

await chat.sendMessage('Tell me about SQL MCP')

clearHistory()

javascript

clearHistory(): void

Clear chat history.

ExecutiveSummary Class

Executive summary component.

Constructor

javascript

new ExecutiveSummary(config, state)

Methods

render()

javascript

render(): string

Generate HTML for executive summary.

update()

javascript

update(data: SummaryData): void

Update summary data.

trackProduct()

javascript

trackProduct(product: Product): void

Add a product to discussed list.

AI Adapters

ClaudeAdapter

javascript

import { ClaudeAdapter } from '@semanticintent/pace-pattern'

const adapter = new ClaudeAdapter({
  apiKey: 'sk-...',
  model: 'claude-3-sonnet-20240229'
})

Configuration

Option	Type	Default	Description
`apiKey`	`string`	Required	Anthropic API key
`model`	`string`	`'claude-3-sonnet-20240229'`	Model to use
`maxTokens`	`number`	`1024`	Max response tokens
`temperature`	`number`	`1.0`	Sampling temperature

Methods

sendMessage()

javascript

async sendMessage(message: string, context?: object): Promise<Response>

Send a message to Claude.

Returns:

typescript

{
  response: string,
  metadata: {
    expertise?: 'beginner' | 'intermediate' | 'advanced',
    products?: string[],
    intent?: string
  }
}

OpenAIAdapter

javascript

import { OpenAIAdapter } from '@semanticintent/pace-pattern'

const adapter = new OpenAIAdapter({
  apiKey: 'sk-...',
  model: 'gpt-4'
})

Configuration

Option	Type	Default	Description
`apiKey`	`string`	Required	OpenAI API key
`model`	`string`	`'gpt-4'`	Model to use
`maxTokens`	`number`	`1024`	Max response tokens
`temperature`	`number`	`0.7`	Sampling temperature

Custom Adapter

Implement the AIAdapter interface:

typescript

interface AIAdapter {
  sendMessage(message: string, context?: object): Promise<{
    response: string,
    metadata?: object
  }>
}

Example:

javascript

class MyAdapter {
  async sendMessage(message, context) {
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message, context })
    })

    const data = await response.json()

    return {
      response: data.reply,
      metadata: {
        expertise: data.expertise,
        products: data.products
      }
    }
  }
}

const pace = new PACE({
  aiAdapter: new MyAdapter()
})

Plugin System

Plugin Interface

typescript

interface Plugin {
  name: string
  version?: string
  install(pace: PACE): void
}

Example Plugin

javascript

const analyticsPlugin = {
  name: 'analytics',
  version: '1.0.0',

  install(pace) {
    pace.on('product:select', ({ product }) => {
      gtag('event', 'product_view', {
        product_id: product.id,
        product_name: product.name
      })
    })

    pace.on('chat:message', ({ message }) => {
      gtag('event', 'chat_message', {
        message_length: message.length
      })
    })
  }
}

pace.use(analyticsPlugin)

Events

Core Events

Event	Payload	Description
`ready`	`{ version: string }`	PACE initialized
`navigate`	`{ view: string, params: object }`	Route changed
`state:change`	`{ key: string, value: any }`	State updated
`error`	`{ error: Error }`	Error occurred

Product Events

Event	Payload	Description
`product:select`	`{ product: Product }`	Product clicked
`product:search`	`{ query: string, results: Product[] }`	Search performed
`product:filter`	`{ category: string }`	Category filtered

Chat Events

Event	Payload	Description
`chat:message`	`{ message: string, role: 'user' }`	User sent message
`chat:response`	`{ message: string, role: 'assistant', metadata: object }`	AI responded
`chat:error`	`{ error: Error }`	Chat error
`chat:typing`	`{ isTyping: boolean }`	Typing indicator

Summary Events

Event	Payload	Description
`summary:update`	`{ data: SummaryData }`	Summary updated
`summary:product-tracked`	`{ product: Product }`	Product tracked
`summary:expertise-changed`	`{ level: string }`	Expertise changed

TypeScript Definitions

Product

typescript

interface Product {
  id: string
  name: string
  tagline: string
  category: string
  description: string
  action_label?: string
  action_url?: string
  icon?: string
  metadata?: Record<string, any>
}

Message

typescript

interface Message {
  role: 'user' | 'assistant'
  content: string
  timestamp: number
  metadata?: {
    expertise?: 'beginner' | 'intermediate' | 'advanced'
    products?: string[]
    intent?: string
  }
}

SummaryData

typescript

interface SummaryData {
  conversationSummary: string
  productsDiscussed: Array<{
    id: string
    name: string
    status: 'interested' | 'viewed' | 'deferred'
  }>
  userExpertise: 'beginner' | 'intermediate' | 'advanced'
  detectedInterests: string[]
  suggestedNextSteps: string[]
  metrics?: {
    messagesExchanged: number
    productsViewed: number
    timeSpent: number
  }
}

CSS Classes

PACE.js uses these CSS classes for styling:

Layout

.pace-container — Main container
.pace-sidebar — Left sidebar
.pace-main — Main content area

.pace-nav — Navigation container
.pace-nav-item — Navigation item
.pace-nav-item.active — Active nav item

Product Catalog

.pace-product-catalog — Catalog container
.pace-product-grid — Product grid
.pace-product-card — Individual product card
.pace-category-section — Category section
.pace-search-input — Search input

Chat

.pace-chat-widget — Chat container
.pace-chat-messages — Messages container
.pace-chat-message — Individual message
.pace-chat-message.user — User message
.pace-chat-message.assistant — AI message
.pace-chat-input — Input field

Executive Summary

.pace-executive-summary — Summary container
.pace-summary-section — Summary section
.pace-summary-products — Products list
.pace-summary-metric — Metric display

CSS Variables

Customize appearance with CSS custom properties:

css

:root {
  --pace-primary: #667eea;
  --pace-accent: #764ba2;
  --pace-bg: #ffffff;
  --pace-bg-soft: #f9f9f9;
  --pace-text: #1a1a1a;
  --pace-text-secondary: #666666;
  --pace-border: #e0e0e0;
  --pace-font: Inter, system-ui, sans-serif;
  --pace-radius: 8px;
  --pace-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Error Handling

PACE.js throws these errors:

ConfigurationError

javascript

try {
  new PACE({ /* missing container */ })
} catch (error) {
  if (error instanceof ConfigurationError) {
    console.error('Invalid configuration:', error.message)
  }
}

AIAdapterError

javascript

pace.on('chat:error', ({ error }) => {
  if (error instanceof AIAdapterError) {
    console.error('AI error:', error.message)
    // Show user-friendly message
  }
})

RouterError

javascript

pace.on('error', ({ error }) => {
  if (error instanceof RouterError) {
    console.error('Routing error:', error.message)
  }
})

Version

javascript

import { PACE } from '@semanticintent/pace-pattern'

console.log(PACE.version) // "1.0.1"

API Reference ​

PACE Class ​

Constructor ​

Parameters ​

PACEConfig ​

Methods ​

mount() ​

use() ​

on() ​

emit() ​

navigate() ​

destroy() ​

State Class ​

Constructor ​

Parameters ​

Methods ​

get() ​

set() ​

subscribe() ​

getAll() ​

Router Class ​

Constructor ​

Parameters ​

Methods ​

init() ​

navigate() ​

on() ​

ProductCatalog Class ​

Constructor ​

Methods ​

render() ​

search() ​

filterByCategory() ​

attachEvents() ​

AboutPage Class ​

Constructor ​

Methods ​

render() ​

ChatWidget Class ​

Constructor ​

Methods ​

render() ​

sendMessage() ​

clearHistory() ​

ExecutiveSummary Class ​

Constructor ​

Methods ​

render() ​

update() ​

trackProduct() ​

AI Adapters ​

ClaudeAdapter ​

Configuration ​

Methods ​

sendMessage() ​

OpenAIAdapter ​

Configuration ​

Custom Adapter ​

Plugin System ​

Plugin Interface ​

Example Plugin ​

Events ​

Core Events ​

Product Events ​

Chat Events ​

Summary Events ​

TypeScript Definitions ​

Product ​

Message ​

SummaryData ​

CSS Classes ​

Layout ​

Navigation ​

Product Catalog ​

Chat ​

Executive Summary ​

CSS Variables ​

Error Handling ​

ConfigurationError ​

AIAdapterError ​

API Reference

PACE Class

Constructor

Parameters

PACEConfig

Methods

mount()

use()

on()

emit()

navigate()

destroy()

State Class

Constructor

Parameters

Methods

get()

set()

subscribe()

getAll()

Router Class

Constructor

Parameters

Methods

init()

navigate()

on()

ProductCatalog Class

Constructor

Methods

render()

search()

filterByCategory()

attachEvents()

AboutPage Class

Constructor

Methods

render()

ChatWidget Class

Constructor

Methods

render()

sendMessage()

clearHistory()

ExecutiveSummary Class

Constructor

Methods

render()

update()

trackProduct()

AI Adapters

ClaudeAdapter

Configuration

Methods

sendMessage()

OpenAIAdapter

Configuration

Custom Adapter

Plugin System

Plugin Interface

Example Plugin

Events

Core Events

Product Events

Chat Events

Summary Events

TypeScript Definitions

Product

Message

SummaryData

CSS Classes

Layout

Navigation

Product Catalog

Chat

Executive Summary

CSS Variables

Error Handling

ConfigurationError

AIAdapterError