SDK JavaScript

npm install @takesales/sdk

import { useTakeSalesAgent } from '@takesales/sdk/react'
 
function Chat() {
  const { messages, sendMessage, isConnected, agentConfig } = useTakeSalesAgent({
    agentId: 'your-agent-uuid',
    wsUrl: 'wss://api-agent.takesales.ai/ws',
  })
 
  if (!isConnected) return <div>Connecting...</div>
 
  return (
    <div>
      <h2>{agentConfig?.agentName}</h2>
      {messages.map((msg) => (
        <div key={msg.id} className={msg.role}>
          <p>{msg.text}</p>
          {msg.richContent?.type === 'carousel' && (
            <MyCarousel cards={msg.richContent.data} />
          )}
          {msg.richContent?.type === 'quick_replies' && (
            <QuickReplies options={richContentData(msg.richContent)} onSelect={sendMessage} />
          )}
        </div>
      ))}
      <input
        placeholder="Type a message..."
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            sendMessage(e.currentTarget.value)
            e.currentTarget.value = ''
          }
        }}
      />
    </div>
  )
}

import { TakeSalesClient } from '@takesales/sdk'
 
const client = new TakeSalesClient({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
})
 
client.on('connected', () => {
  console.log('Agent ready')
  client.sendText('Hello!')
})
 
client.on('agentConfig', (config) => {
  console.log('Agent:', config.agentName)
})
 
client.on('message', (text, endOfTurn) => {
  // endOfTurn = true carries the whole turn again: replace, don't append
  if (endOfTurn) console.log('Agent says:', text)
})
 
client.on('richContent', (content) => {
  console.log('Rich content:', content.type, richContentData(content))
})
 
client.on('error', (err) => {
  console.error('Error:', err)
})
 
client.on('disconnect', (code, reason) => {
  console.log('Disconnected:', code, reason)
})
 
client.connect()

new TakeSalesClient(config: TakeSalesClientConfig)

client.on('connected', () => void)
client.on('message', (text: string, endOfTurn: boolean) => void)
client.on('richContent', (content: RichContent) => void)
client.on('agentConfig', (config: ServerAgentConfig) => void)
client.on('sessionCreated', (data: { conversationId: string }) => void)
client.on('toolConfirmation', (data: ToolConfirmation) => void)
client.on('toolCall', (data: { name: string, args: Record<string, unknown>, callId?: string }) => void)
client.on('usageWarning', (data: { message: string, warningType: string }) => void)
client.on('error', (error: string) => void)
client.on('disconnect', (code?: number, reason?: string) => void)

import { useTakeSalesAgent } from '@takesales/sdk/react'

interface TakeSalesMessage {
  id: string
  role: 'user' | 'agent'
  text: string
  richContent?: RichContent
  timestamp: Date
}

{ type: 'carousel', data: CarouselCard[] }
 
interface CarouselCard {
  title: string
  url: string
  subtitle?: string
  description?: string
  imageUrl?: string
  price?: string
}

{ type: 'quick_replies', data: QuickReplyOption[] }
 
interface QuickReplyOption {
  label: string
  value: string
}

{ type: 'lead_form', data: LeadFormCard }
 
interface LeadFormCard {
  formId: string
  fields: Array<{
    key: string
    type: 'text' | 'email' | 'phone' | 'textarea'
    label: string
    placeholder?: string
    required: boolean
  }>
  submitLabel?: string
  successMessage?: string
}

{ type: 'schedule_form', data: ScheduleFormCard }
 
interface ScheduleFormCard {
  availableSlots: Array<{ date: string; times: string[] }>
  propertyTitle?: string
  scheduleId?: string
}

{ type: 'inline_map', data: InlineMapCard }
 
interface InlineMapCard {
  lat: number
  lng: number
  address: string
  zoom?: number
  googleMapsApiKey?: string
}

{ type: 'photo_gallery', data: PhotoGalleryCard }
 
interface PhotoGalleryCard {
  images: string[]
  title?: string
}

{ type: 'comparator', data: ComparatorCard }
 
interface ComparatorCard {
  title?: string
  // Columns: anything comparable (plans, products, listings)
  items?: Array<{ title: string; url?: string; imageUrl?: string; price?: string }>
  // Rows: a label plus one value per item, in `items` order
  attributes?: Array<{ label: string; values: string[] }>
  // Legacy real-estate shape sent by older agents
  properties?: Array<{
    title: string
    url?: string
    imageUrl?: string
    price?: string
    area?: string
    bedrooms?: number
    bathrooms?: number
    differentials?: string[]
  }>
}

{ type: 'tool_confirmation', data: ToolConfirmation }
 
// What the server sends
interface ToolConfirmationFrame {
  confirmationId: string
  functionName: string        // ex: "cancel_subscription"
  functionTitle: string       // nome amigável configurado na tool
  functionDescription: string // descrição da ação
  args: Record<string, unknown> // parâmetros que serão enviados
}

client.on('toolConfirmation', (event) => {
  const data = event as unknown as ToolConfirmationFrame
 
  // Exiba um diálogo/card de confirmação na sua UI
  showConfirmDialog({
    title: data.functionTitle || data.functionName,
    message: data.functionDescription,
    params: data.args,
    onConfirm: () => client.sendToolConfirmation(data.confirmationId, true),
    onCancel: () => client.sendToolConfirmation(data.confirmationId, false),
  })
})

interface ServerAgentConfig {
  agentId: string
  workspaceId: string
  agentName: string
  greeting: string
  avatarUrl: string | null
  language: string
  enableVoice: boolean
  enableTextChat: boolean
  collectVisitorEmail: boolean
  collectVisitorName: boolean
  collectVisitorPhone: boolean
  quickReplies?: string[]
  primaryColor?: string
  textColor?: string
  backgroundColor?: string
  title?: string
  subtitle?: string
  showBranding?: boolean
  enableHandoff?: boolean     // true: o agente pode transferir para um humano (sem suporte no 0.1.33)
  typingEvents?: boolean      // true: o servidor agrupa mensagens seguidas do visitante numa resposta
  hasKnowledgeBase?: boolean
}

const client = new TakeSalesClient({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
  // Client variables são resolvidas automaticamente via preflight config
})

const client = new TakeSalesClient({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
  clientVariables: {
    auth_token: localStorage.getItem('token') ?? '',
    user_id: '12345',
  },
})

import { type ClientVariableConfig } from '@takesales/sdk'
 
const client = new TakeSalesClient({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
  clientVariableConfigs: [
    { name: 'auth_token', source: 'localStorage', key: 'token' },
    { name: 'user_id', source: 'cookie', key: 'uid' },
  ],
})

let current = ''     // text of the turn being streamed
let typing = false
 
client.on('message', (text, endOfTurn) => {
  if (endOfTurn) {
    current = text   // full turn: replace, don't append
    typing = false
  } else {
    current += text
    typing = true
  }
  render(current, typing)
})

function Chat() {
  const { messages, sendMessage } = useTakeSalesAgent({ ... })
 
  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          <p>{msg.text}</p>
          {msg.richContent?.type === 'quick_replies' && (
            <div className="flex gap-2">
              {richContentData(msg.richContent).map((opt: QuickReplyOption) => (
                <button key={opt.value} onClick={() => sendMessage(opt.value)}>
                  {opt.label}
                </button>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

function Chat() {
  const [savedId] = useState(() => localStorage.getItem('conversationId'))
 
  const { messages, sendMessage, conversationId } = useTakeSalesAgent({
    agentId: 'your-agent-uuid',
    wsUrl: 'wss://api-agent.takesales.ai/ws',
    conversationId: savedId ?? undefined,
  })
 
  useEffect(() => {
    if (conversationId) localStorage.setItem('conversationId', conversationId)
  }, [conversationId])
 
  return <div>...</div>
}

const { messages, sendMessage } = useTakeSalesAgent({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
  visitor: {
    email: user.email,
    name: user.name,
    phone: user.phone,
  },
})

const { messages, sendMessage } = useTakeSalesAgent({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
  clientVariables: {
    auth_token: localStorage.getItem('token') ?? '',
  },
})

const savedId = localStorage.getItem('conversationId')
 
const client = new TakeSalesClient({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
  conversationId: savedId ?? undefined,
})
 
client.on('sessionCreated', ({ conversationId }) => {
  localStorage.setItem('conversationId', conversationId)
})
 
client.connect()

const client = new TakeSalesClient({
  agentId: 'your-agent-uuid',
  wsUrl: 'wss://api-agent.takesales.ai/ws',
  visitor: {
    email: 'visitor@example.com',
    name: 'John Doe',
    phone: '+5511999999999',
  },
})
 
// Custom fields are only accepted after the session exists
client.on('sessionCreated', () => {
  client.sendUpdateVisitor({ contactData: { plan: 'pro' } })
})
 
client.connect()

client.registerTool('get_cart', {
  description: 'Returns the items in the visitor cart',
  parameters: { type: 'object', properties: {} },
  handler: async () => ({ items: cart.items }),
})
 
client.connect()