We're excited to introduce Frontend Actions for CometChat's Agent Builder. This new capability transforms your AI agents from purely conversational interfaces into interactive drivers of your application's UI, enabling them to trigger client-side behaviors like opening modals, navigating to pages, showing notifications, and executing custom functions directly in response to user conversations.
With Frontend Actions, your agents can now do more than just talk - they can act. Instead of telling users where to go or what to do, agents can guide them there, opening the right dialog, navigating to the correct page, or triggering the appropriate workflow based on conversational context. All of this happens seamlessly through your existing UIKit components, with no additional infrastructure required.
Why does this matter to me, as a developer?
As you build AI-powered chat experiences, static text responses often fall short of creating truly helpful user journeys. Users frequently need more than information - they need action. Without a structured way to bridge conversation and UI, you're left manually building complex routing logic or asking users to navigate on their own after receiving guidance.
Frontend Actions helps you:
Enable agents to drive user workflows by triggering UI interactions directly from conversation context.
Eliminate the gap between agent recommendations and user actions with seamless handoffs to modals, forms, or other UI elements.
Maintain clean architecture by keeping action handlers in your client code while letting agents decide when to invoke them.
The result is more intuitive user experiences, reduced development overhead, and agents that feel like natural extensions of your application instead of bolted-on chatbots.
Key features and capabilities
Client-side behavior triggers
Define actions that agents can invoke to open modals, navigate pages, display notifications, pre-fill forms, or call any custom function in your application. Agents determine when to trigger these actions based on conversational context, turning passive responses into active guidance.
Flexible action configuration
Each Frontend Action requires:
A display name for dashboard clarity
A description that teaches the agent when to use it
A trigger function identifier your client app recognizes
Optional parameters to pass contextual data.
This configuration lives in the Agent Builder dashboard, keeping your action definitions centralized and version-controlled alongside other agent capabilities.
Dynamic personalization with Variables
Frontend Actions integrate seamlessly with CometChat's Variables system, enabling you to inject dynamic, user-specific data into action parameters. This means your actions can be personalized based on who's using them and the context of the conversation.
Variables come in two types:
Auth Variables (automatically provided):
@var-auth:sender.uid - unique identifier of the message sender
@var-auth:sender.name - display name of the message sender
@var-auth:sender.role - role of the message sender
Custom Variables (user-defined with three source types):
Constant - static values like API keys or company name
Message Metadata - extracts data from message.data.metadata (e.g., orderId, sessionType)
User Metadata - extracts data from sender's user metadata (e.g., subscription tier, department)
For example, when your agent opens a support form, you can pass @var-auth:sender.name to pre-fill the name field and @var-custom:subscriptionTier to automatically route them to the right support queue. When navigating to an order details page, inject @var-custom:orderId to deep-link directly to the relevant order.
Variables are managed in the Agent Builder's Variables section and can be referenced in both agent instructions and Frontend Action parameters using the @ syntax.
Per-agent enablement
Every Frontend Action can be toggled on or off for individual agents. Once enabled, agents can intelligently decide to use the action based on its description - no explicit instruction required. For more control, you can reference actions directly in agent instructions to provide nuanced guidance on when they should be triggered.
Real-time SDK integration
When an agent invokes a Frontend Action, your client application receives it as a tool call event through the SDK. Register action handlers with your UIKit component using the aiAssistantTools property, mapping trigger function identifiers to callback functions. UIKit automatically routes tool calls to the correct handler, passing along any parameters the agent provided.
Orphaned action detection
If a Frontend Action is deleted, renamed, or disabled after being referenced in agent instructions, the dashboard displays a warning indicator. This makes it easy to spot and fix broken references before they impact production experiences.
Interesting tech details
Under the hood, Frontend Actions leverage the same tool-calling infrastructure that powers API integrations, but instead of making external requests, they trigger client-side JavaScript callbacks. This design keeps your application logic where it belongs, in your codebase, while giving agents the intelligence to invoke it at the right moments.
The action invocation flow is event-driven. When an agent determines a Frontend Action should fire, it generates a tool call that propagates through the real-time SDK layer. Your registered handler receives the trigger function identifier and parameters, executes your custom logic, and the conversation continues seamlessly. There's no server round-trip required for these interactions, keeping response times fast and UX smooth.
Variables are resolved server-side before actions reach your client. Auth variables pull from the authenticated user context, Message Metadata variables extract values from message.data.metadata using path-based lookups, User Metadata variables query the sender's user object, and Constants return their configured static values. Your action handlers receive clean, ready-to-use data without additional resolution logic.
Reference links
Frontend Actions gives you a structured, scalable way to connect agent intelligence with application behavior, so you can focus on building conversational experiences that truly help users get things done.
Nivedita Bharathy
Product Marketing Specialist , CometChat