@uipath/ap-chat
Advanced tools
Affected versions:
A flexible chat interface component provided as a framework-agnostic web component, making it usable in any framework or vanilla JavaScript.
The ap-chat web component provides AI assistant functionality with a powerful service-based API. The component includes:
This package is a self-contained web component with all dependencies bundled (React, Material-UI, etc.):
Web components are designed for modern browsers and bundlers. If you need CommonJS support, use the React components from @uipath/apollo-react directly instead.
npm install @uipath/ap-chat
# or
pnpm add @uipath/ap-chat
# or
yarn add @uipath/ap-chat
Note: This package is published to both npm and GitHub Package Registry. External users will automatically pull from npm. Internal UiPath users with .npmrc configured will automatically pull from GitHub Package Registry.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AP Chat Example</title>
</head>
<body>
<ap-chat id="chat"></ap-chat>
<script type="module">
import { AutopilotChatService } from '@uipath/ap-chat/service';
import '@uipath/ap-chat';
// Create and initialize the service
const service = AutopilotChatService.Instantiate({
instanceName: 'my-chat',
config: {
mode: 'side-by-side',
firstRunExperience: {
title: "Welcome to Autopilot Chat!",
description: "Ask me anything about your data or how to use this application.",
suggestions: [
{ label: "Get started", prompt: "How do I get started?" },
{ label: "Show features", prompt: "What features are available?" }
]
}
}
});
// Set the service instance and properties on the web component
const chatElement = document.getElementById('chat');
chatElement.chatServiceInstance = service;
chatElement.locale = 'en';
chatElement.theme = 'light';
// Listen for user requests
service.on('Request', (data) => {
console.log('User sent:', data.content);
// Send a response
setTimeout(() => {
service.sendResponse({
content: `Echo: ${data.content}`,
role: 'assistant'
});
}, 1000);
});
// Open the chat
service.open();
</script>
</body>
</html>
For React applications, use the @uipath/apollo-react package directly instead of the web component:
import { ApChat, AutopilotChatService, AutopilotChatMode } from '@uipath/apollo-react/ap-chat';
function App() {
const service = AutopilotChatService.Instantiate({
instanceName: 'my-chat',
config: {
mode: AutopilotChatMode.SideBySide
}
});
// ... use ApChat React component directly
}
See the @uipath/apollo-react documentation for details.
The <ap-chat> element exposes the following JavaScript properties:
// Chat service instance (required)
chatElement.chatServiceInstance = service;
// Locale (optional, default: 'en')
// Supported: 'en', 'de', 'es', 'es-MX', 'fr', 'ja', 'ko', 'pt', 'pt-BR', 'ru', 'tr', 'zh-CN', 'zh-TW'
chatElement.locale = 'en';
// Theme (optional, default: 'light')
// Supported: 'light', 'dark', 'light-hc', 'dark-hc'
chatElement.theme = 'light';
The complete chat service API documentation is available in the @uipath/apollo-react package documentation.
Configuration & Initialization
initialize(config) - Initialize the chat serviceopen() - Open the chat interfaceclose() - Close the chat interfacesetChatMode(mode) - Set chat window mode ('side-by-side', 'full-screen', 'embedded')setLocale(locale) - Change locale dynamicallysetTheme(theme) - Change theme dynamicallyMessage Handling
sendRequest(message) - Send a user requestsendResponse(message) - Send an AI responsesetConversation(messages) - Set entire conversationgetConversation() - Get current conversationsetPrompt(prompt) - Set input field valuesetSuggestions(suggestions) - Show suggestion chipsEvent Handling
on(event, handler) - Subscribe to eventsintercept(event, interceptor) - Intercept eventsCommon Events
Request - User sends a messageResponse - AI response receivedModeChange - Chat mode changedOpen - Chat openedClose - Chat closedimport { AutopilotChatService } from '@uipath/ap-chat/service';
const service = AutopilotChatService.Instantiate({
instanceName: 'streaming-chat',
config: {
mode: 'side-by-side'
}
});
// Stream a response word by word
const messageId = 'stream-' + Date.now();
const words = ['Hello', 'World', 'This', 'is', 'streaming'];
words.forEach((word, index) => {
setTimeout(() => {
service.sendResponse({
id: messageId,
content: word,
stream: true,
done: index === words.length - 1
});
}, index * 200);
});
service.sendResponse({
role: 'assistant',
contentParts: [
{
text: 'The NBA Finals are the annual championship series.',
citations: [
{
id: 1,
title: 'NBA Official Finals Overview',
url: 'https://www.nba.com/history/finals'
}
]
}
]
});
service.sendResponse({
content: 'Here is your data analysis',
actions: [
{
name: 'export',
label: 'Export Data',
icon: 'download',
eventName: 'export-data'
}
]
});
service.on('export-data', ({ message, action }) => {
console.log('Export triggered for message:', message.id);
});
For comprehensive documentation including:
See the complete documentation.
The package includes full TypeScript definitions. Import types from the service:
import {
AutopilotChatService,
AutopilotChatMessage,
AutopilotChatConfiguration,
AutopilotChatEvent
} from '@uipath/ap-chat/service';
The web component uses modern browser features:
Supported browsers:
MIT
FAQs
Apollo Design System - Autopilot Chat web component
The npm package @uipath/ap-chat receives a total of 19 weekly downloads. As such, @uipath/ap-chat popularity was classified as not popular.
We found that @uipath/ap-chat demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 22 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST disclosed an unreleased AI tool called V-etalon and opened a broad inquiry into NVD modernization after years of automation plans produced no public enrichment system.
Security News
In his AI Council 2026 talk, Feross Aboukhadijeh covers recent package compromises, vulnerability discovery, and a more automated security model.
Security News
A new federal program will let vetted U.S. cybersecurity firms help investigate and disrupt foreign cybercrime groups under government direction.