Demo and Examples | Carbon AI Chat

Carbon AI Chat

Overview

Using with React

Using as a Web component

UI customization

Service desks

Server communication

Demo and Examples

Migration 0.4.0 -> 0.5.1

Migration 0.5.x -> 1.0.0

ChatContainerProps

ChatCustomElementProps

RenderUserDefinedState

RenderUserDefinedResponse

RenderWriteableElementResponse

ChatContainer

ChatCustomElement

CdsAiChatContainerAttributes

CdsAiChatCustomElementAttributes

CarbonTheme

CornersType

LayoutCustomProperties

MinimizeButtonIconType

OnErrorType

ChatHeaderConfig

CustomMenuOption

DisclaimerPublicConfig

HeaderConfig

HomeScreenConfig

HomeScreenStarterButton

HomeScreenStarterButtons

HomeScreenState

InputConfig

LauncherCallToActionConfig

LauncherConfig

LayoutConfig

OnErrorData

PublicConfig

PublicConfigMessaging

LanguagePack

enLanguagePack

ViewType

WriteableElementName

ChatInstance

ChatInstanceNotifications

ChatInstanceServiceDeskActions

CustomPanelConfigOptions

CustomPanelInstance

CustomPanels

EventHandlers

FileUploadCapabilities

NotificationMessage

PersistedHumanAgentState

PersistedState

SendOptions

TypeAndHandler

ViewState

ChangeFunction

EventBusHandler

IncreaseOrDecrease

PublicChatHumanAgentState

PublicChatState

WriteableElements

BusEventType

FeedbackInteractionType

MessageSendSource

ViewChangeReason

BusEvent

BusEventChatReady

BusEventChunkUserDefinedResponse

BusEventClosePanelButtonClicked

BusEventCustomPanelClose

BusEventCustomPanelOpen

BusEventCustomPanelPreClose

BusEventCustomPanelPreOpen

BusEventFeedback

BusEventHistoryBegin

BusEventHistoryEnd

BusEventMessageItemCustom

BusEventPreReceive

BusEventPreReset

BusEventPreSend

BusEventReceive

BusEventReset

BusEventSend

BusEventUserDefinedResponse

BusEventViewChange

BusEventViewPreChange

ErrorType

FileStatusValue

HumanAgentMessageType

HumanAgentsOnlineStatus

ScreenShareState

AdditionalDataToAgent

AgentAvailability

BusEventHumanAgentAreAnyAgentsOnline

BusEventHumanAgentEndChat

BusEventHumanAgentPreEndChat

BusEventHumanAgentPreReceive

BusEventHumanAgentPreSend

BusEventHumanAgentPreStartChat

BusEventHumanAgentReceive

BusEventHumanAgentSend

ConnectingErrorInfo

DisconnectedErrorInfo

EndChatInfo

FileUpload

ServiceDesk

ServiceDeskCallback

ServiceDeskFactoryParameters

ServiceDeskPublicConfig

StartChatOptions

UserMessageErrorInfo

ServiceDeskCapabilities

ServiceDeskErrorInfo

ButtonItemKind

ButtonItemType

CancellationReason

ChainOfThoughtStepStatus

IFrameItemDisplayOption

MessageErrorState

MessageInputType

MessageResponseTypes

OptionItemPreference

UserType

WidthOptions

BaseGenericItem

BaseMessageInput

ButtonItem

CarouselItem

ChainOfThoughtStep

ChatInstanceMessaging

Chunk

CompleteItemChunk

ConnectToHumanAgentItem

ConnectToHumanAgentItemTransferInfo

ConversationalSearchItem

ConversationalSearchItemCitation

CustomSendMessageOptions

EventInput

EventInputData

FinalResponseChunk

GenericItemMessageFeedbackCategories

GenericItemMessageFeedbackOptions

GenericItemMessageOptions

GridItem

HistoryItem

IFrameItem

InlineErrorItem

ItemStreamingMetadata

MediaItem

MediaItemDimensions

MessageHistoryFeedback

MessageInput

MessageItemPanelInfo

MessageOutput

MessageRequest

MessageRequestHistory

MessageResponse

MessageResponseHistory

MessageResponseOptions

OptionItem

PartialItemChunk

PartialResponse

PauseItem

ResponseUserProfile

SearchResult

SingleOption

TextItem

UserDefinedItem

WithBodyAndFooter

WithWidthOptions

AudioItem

CardItem

DateItem

GenericItem

HorizontalCellAlignment

ImageItem

Message

PartialOrCompleteItemChunk

StreamChunk

VerticalCellAlignment

VideoItem

PageObjectId

TestId

DeepPartial

ObjectMap

Demo and Examples

Demo

You can see a demo of the Carbon AI Chat and view the source code of the demo.

The demo showcases the full featured chat interface with most available customization options and response types.

Examples

React Examples

The React examples demonstrate various integration patterns and features, including basic integration, watsonx.ai streaming, custom elements, history loading, and other features.

Web Component Examples

The web component examples mirror the React examples but use Lit-based web components. These include basic integration, watsonx.ai streaming, custom element patterns, history loading, and more.

All web component examples follow the same patterns as React but use native web component APIs and Lit for templating.