triform-agent-svelte

Svelte 5 UI components for Triform AI agents. Provides chat overlay, input components, and stacked cards for multi-question flows.

Installation

npm install triform-agent-svelte triform-agent-client svelte

Usage

Basic - Chat Bar

A collapsed input bar at the bottom that expands to a full overlay:

<script>
  import { TriformChat } from 'triform-agent-svelte';
</script>

<TriformChat
  bridgeUrl="https://agui-bridge.triform.ai"
  widgetId="beacon"
  characterId="beacon"
  characterName="Beacon"
  mode="bar"
  autoStart={true}
/>

Full Overlay Mode

Directly shows the full chat overlay:

<TriformChat
  bridgeUrl="https://agui-bridge.triform.ai"
  widgetId="beacon"
  mode="overlay"
/>

Embedded Mode

Inline chat without overlay, fits within your layout:

<TriformChat
  bridgeUrl="https://agui-bridge.triform.ai"
  widgetId="beacon"
  mode="embedded"
/>

Local Development

The package exports BRIDGE_URLS constants for easy environment switching:

<script>
  import { TriformChat, BRIDGE_URLS } from 'triform-agent-svelte';
  
  const isLocal = typeof window !== 'undefined' && window.location.hostname === 'localhost';
</script>

<TriformChat
  bridgeUrl={isLocal ? BRIDGE_URLS.local : BRIDGE_URLS.prod}
  widgetId="beacon"
  mode="bar"
/>

Available URLs:

• BRIDGE_URLS.prod - Production (https://aguibridge1r1lxg6g-agui-bridge.functions.fnc.fr-par.scw.cloud)
• BRIDGE_URLS.dev - Development (https://aguibridge1r1lxg6g-agui-bridge-dev.functions.fnc.fr-par.scw.cloud)
• BRIDGE_URLS.local - Local (http://localhost:5173)

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | bridgeUrl | string | Production URL | AG-UI Bridge URL | | widgetId | string | required | Agent ID | | characterId | string | widgetId | Character ID for theming | | characterName | string | 'Assistant' | Display name | | mode | 'bar' \| 'overlay' \| 'embedded' | 'bar' | Display mode | | userContext | string | '' | User context to send to agent | | autoStart | boolean | false | Auto-start conversation | | sessionId | string | auto-generated | Session ID for persistence | | agentTheme | { primary?, primaryDark? } | Default theme | Custom colors |

Components

Individual Components

For custom implementations, you can import individual components:

<script>
  import { 
    ChatOverlay,
    ChatMessages,
    ChatInput,
    StackedCards,
    InputRenderer
  } from 'triform-agent-svelte';
</script>

Input Components

<script>
  import {
    TextInput,
    SelectionInputs,
    ScaleInputs,
    DateTimeInputs,
    ApprovalInputs,
    SpecialInputs
  } from 'triform-agent-svelte';
</script>

Agent Assets (Avatars/Icons)

The package includes avatar images for all Triform agents. After installing, copy the assets to your static/public folder:

# Copy to your project's static folder
cp -r node_modules/triform-agent-svelte/assets/triformers ./static/assets/

# Or for SvelteKit projects
cp -r node_modules/triform-agent-svelte/assets/triformers ./static/assets/

The assets are organized as:

assets/triformers/
├── beacon/
│   ├── icons/           # Small circular icons for UI elements
│   │   ├── neutral_default.png
│   │   ├── happy_success.png
│   │   └── ...
│   └── *.png            # Full-size expressions
├── carta/
│   ├── icons/
│   └── *.png
└── ...other agents

Components expect assets at /assets/triformers/{agentId}/icons/{expression}.png.

Related Packages

• triform-agent-client - Pure TypeScript client (framework-agnostic)
• triform-agent-react - React components (coming soon)
• triform-agent-vue - Vue components (coming soon)