GuideAnts Chat

Embed AI Assistants Anywhere with a Single Line of Code

What is GuideAnts Chat?

The <guideants-chat> web component lets you embed published GuideAnts assistants into any website or application. Build guides in GuideAnts Notebooks, publish them, then drop the component into your site - no backend required.

Available as an npm package, it works with any framework (React, Vue, Angular, Astro) or plain HTML.

Installation

npm install guideants

Bundle size: ~3MB uncompressed / ~885KB gzipped. Includes React, Mermaid, Markdown rendering, and syntax highlighting.

Basic Usage

<guideants-chat
  pub-id="your-published-guide-id"
  display-mode="last-turn"
  collapsible
></guideants-chat>

<script type="module">
  import 'guideants';
</script>

Key Features

Display Modes

  • Full - Complete conversation history
  • Last-turn - Shows only the latest exchange
  • Collapsible - Minimize when not in use

Input Options

  • Text input - Standard chat interface
  • Voice input - Speech-to-text support
  • File attachments - Upload documents
  • Camera capture - Take photos directly

Rich Output

  • Markdown rendering - Formatted responses
  • Syntax highlighting - Code blocks
  • Mermaid diagrams - Visual flowcharts
  • Streaming responses - Real-time output

Integration

  • Turn navigation - Browse conversation history
  • Conversation starters - Guided prompts
  • Custom theming - Match your brand
  • WCAG accessible - Built-in a11y support

HTML Attributes

Attribute Description
pub-id Published guide ID (required)
api-base-url API server URL (default: production)
proxy-url Proxy server for secure API key management
auth-token Bearer token for authenticated guides
display-mode "full" or "last-turn"
collapsible Enable collapsible UI
command-mode Stateless mode - each message starts a new thread
conversation-starters-enabled Show starter prompts
attachments-enabled Enable file attachments
speech-to-text-enabled Enable voice input
camera-enabled Enable camera capture

JavaScript API

const el = document.querySelector('guideants-chat');

// Configuration
el.setApiBaseUrl(url)
el.setPubId(pubId)
el.setAuthToken(token)

// Display & Behavior
el.setDisplayMode('full' | 'last-turn')
el.setCollapsible(enabled)
el.setCommandMode(enabled)
el.setSpeechToTextEnabled(enabled)
el.setAttachmentsEnabled(enabled)
el.setCameraEnabled(enabled)

// State
el.collapse() / el.expand() / el.toggleCollapse()
el.getTurnCount()
el.goToTurn(index) / el.goToNextTurn() / el.goToPreviousTurn()
el.clearConversation()

// Advanced
el.registerTool(name, handler)  // Client-side tool execution
el.setContextProvider(provider) // Dynamic context injection

Events

Event Description
wf-complete Conversation turn completed
wf-error Error occurred
wf-auth-error Authentication failed - refresh token
wf-collapsed UI collapsed
wf-expanded UI expanded
wf-turn-navigation Turn changed
wf-conversation-starter-selected User selected a starter prompt

Use Cases

  • Customer Support - 24/7 AI-powered assistance on your site
  • Interactive Documentation - Let users ask questions about your docs
  • Product Onboarding - Guided setup and configuration
  • Internal Tools - Embed in dashboards, CRMs, and operational systems
  • E-commerce - Product recommendations and order assistance

Get Started

  1. Create and publish a guide in GuideAnts Notebooks
  2. Install the package: npm install guideants
  3. Add the component with your pub-id

View on npm | Publishing documentation