Integrating agents with web applications
Agents connect with users through channels such as websites, Slack workspaces, or other messaging platforms. By embedding the chat directly into a web application, you enable interactive conversations with your agent while also maintains enterprise‑grade security, customization, and flexibility.
Embedding agents into your application provides you with:
Integrate AI agents seamlessly into your web pages to create rich, interactive experiences.
Customize the UI and behavior to match your brand and user needs.
Handle advanced events securely, and work with both draft and live agents for testing and production.
You can quickly deploy the chat to your web application by using a simple script snippet. Developers can further extend the chat by writing custom code or by using the chat API. The following documentation topics provide more details about how to embed, secure, and customize the chat.
Configure security and embed the chat
Embedding the chat into your application
Add the chat script to your web application's front end to create an on‑page chat interface where users can interact with the agent. See Embedding the agent with applications for details.
Enabling voice capabilities
Enable voice capabilities in embedded agent to support spoken interactions. Voice capabilities improve accessibility and provide a more natural conversational experience. See Enabling voice capabilities in the embedded agent for details.
Securing the embedded chat
Securing the embedded chat ensures that authorized users and applications can access or interact with the agent. Voice capabilities use the same JWT authentication mechanism as text-based chat. See Securing the embedded chat for details.
Configuring security for embedded chat
Enable and configure security to ensure that only authorized applications and users can access or interact with the agent. See Configuring security for embedded chat for details.
Customizing the chat UI
Using context variables
To use context variables in embedded chat, include them inside the JWT token. You can add context variables to a JWT token by using a JavaScript script. See Context variables for more details.
Custom styling and layout
The watsonx Orchestrate embed supports a flexible layout object that enables you to control how and where the chat UI appears on the page. See Customizing layout and Customizing styles for more details.
Enable feedback
By default, thumbs-up and thumbs-down feedback options are disabled. You need to enable them manually to collect user input on responses. See Thumbs up and thumbs down feedback for more details.
API Integration
You can also integrate your agent with external applications by using the provided ADK's agent completions API. These APIs allow agents to be shared across multiple watsonx Orchestrate instances:
Orchestrate Native Runs API: For long-duration workflows.
API Documentation:
Chat Completions Compatibility Layer: OpenAI-compatible for easy integration.
API Documentation: