@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 47 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.
Security News
Open VSX has removed three extension IDs from its malicious-extension list as the legitimate publishers they impersonated move to claim the names for themselves.
Product
Socket’s PHP and Composer support is now in Beta for all customers, with PHP reachability analysis generally available.
Product
Socket is bringing experimental protection to Firefox, scanning 97,000+ extensions in Mozilla's official directory for malware and risky updates.