Skip to content

Trigger Mechanisms

Beyond the default ChatWidget behavior, mozaiksai supports multiple ways to trigger workflows.

These examples use the CustomerSupport workflow configured in the Setup Guide.


1. Button/UI Trigger

Use the useMozaiks hook to trigger workflows from any UI element:

import { useMozaiks } from '@mozaiks/chat-ui';

function OrderPage({ order }) {
  const { startWorkflow } = useMozaiks();

  return (
    <div>
      <h1>Order {order.id}</h1>

      <button onClick={() => startWorkflow('CustomerSupport', {
        context: { order_id: order.id }
      })}>
        Get Help with This Order
      </button>
    </div>
  );
}

The workflow name 'CustomerSupport' is passed directly to startWorkflow(). Context variables are passed as the second argument.


2. Route-Based Trigger

Dedicate a page or section to a workflow using WorkflowChat:

import { WorkflowChat } from '@mozaiks/chat-ui';

// /support → opens CustomerSupport workflow
function SupportPage() {
  return (
    <WorkflowChat
      workflow="CustomerSupport"
      userId={user.id}
      onClose={() => navigate('/')}
    />
  );
}

// /order/:id/help → opens CustomerSupport with order context
function OrderHelpPage({ params }) {
  return (
    <WorkflowChat
      workflow="CustomerSupport"
      userId={user.id}
      initialContext={{ order_id: params.id }}
      onClose={() => navigate(`/order/${params.id}`)}
    />
  );
}

3. CRUD Event Trigger (Backend)

Trigger a workflow when something happens in your backend by calling the runtime host's trigger endpoint. This is an HTTP call — there is no Python helper function; the trigger goes over the wire to the running server.

# your_backend/routes/orders.py
import httpx

MOZAIKS_BASE_URL = "http://localhost:8000"

@router.post("/orders")
async def create_order(order: Order):
    # Save order to your DB
    saved = await db.orders.insert_one(order.dict())

    # Trigger CustomerSupport workflow for follow-up
    async with httpx.AsyncClient() as client:
        await client.post(
            f"{MOZAIKS_BASE_URL}/api/workflows/CustomerSupport/trigger",
            json={
                "user_id": order.user_id,
                "context": {"order_id": str(saved.inserted_id), "trigger": "new_order"},
            },
        )

    return saved

4. Webhook/External Trigger

External systems (Stripe, Zapier, etc.) can call the canonical host directly:

POST /api/workflows/CustomerSupport/trigger
Content-Type: application/json

{
  "user_id": "user_123",
  "context": {
    "order_id": "order_456",
    "issue": "payment_failed"
  }
}

This endpoint is available on mozaiksai.hosts.runtime and all hosts that layer on top of it (platform, studio, mozaiks).


API Reference

Frontend (@mozaiks/chat-ui)

import { ChatWidget, WorkflowChat, useMozaiks } from '@mozaiks/chat-ui';

// ChatWidget: Floating overlay button
<ChatWidget
  endpoint="ws://localhost:8000/ai"
  userId={user.id}
  brandName="Acme Support"  // optional
  logo="/logo.svg"          // optional
/>

// WorkflowChat: Embeddable workflow chat
<WorkflowChat
  workflow="CustomerSupport"
  userId={user.id}
  onClose={() => {}}
  initialContext={{}}
  brandName="Acme Support"   // optional
  logo="/logo.svg"           // optional
  backgroundImage="/bg.png"  // optional
/>

// useMozaiks hook: Trigger workflows programmatically
const { startWorkflow } = useMozaiks();
startWorkflow(workflowName: string, options?: { context?: object })

REST Endpoints

POST /api/workflows/{name}/trigger
     → Trigger a workflow from a backend or external system

GET  /api/workflows
     → List available workflows

GET  /api/workflows/{name}/runs?user_id=xxx
     → Get user's conversation history

Summary

Trigger How
Button startWorkflow('CustomerSupport', {context})
Route/Embed <WorkflowChat workflow="CustomerSupport" />
Backend POST /api/workflows/CustomerSupport/trigger
External POST /api/workflows/CustomerSupport/trigger