This topic describes the features of Chat Builder for developing AI chat applications.
Chat Builder overview
Mobi Chat Builder helps you visually build AI chat applications. It has two core features:
Custom Chat: Build multimodal chat interfaces with drag-and-drop actions and precisely control the interaction layout and rendering style.
Custom Widget: Convert natural language results into an interactive user interface (UI). This feature supports function calls, rich content display, and deep user collaboration.
Custom chat
The new Chat Container (ChatPro) component is different from the original Chat component. The Chat Container lets you fully customize the chat UI and interactions using drag-and-drop configurations. Key features include the following:
Atomic and flexible building
Atomic component system: All components use an atomic design. You can freely combine and assemble them to meet custom requirements.
Role-based configuration: This feature provides separate building spaces and style customizations for different roles, such as the user, AI assistant, and system.
Modular assembly: You can configure each functional module independently. Combine modules like building blocks to create your ideal chat view.
Rich set of building tools
Mobi provides a complete toolbox for building chat views:
Bubble: A chat bubble. This is the basic unit that holds chat content in an AI session.
Multi-role list: A list view that displays a group of sessions based on different roles. In Mobi, you can build separate views for each role.
Send box: The interface for sending messages in an AI session. It supports multiple interaction types, such as text, voice, and multimodal input.
Session Manager: A navigation component. The Session Manager displays historical AI session records and provides an interface for managing individual sessions.
Chain-of-thought: A component that displays the AI's thought process during a chat.
Action list: A quick-action component. It displays additional functions on the action bar for a chat message, such as copying content or resending a message.
File card: A component that displays files or multimedia from the chat.
Chat Container: A data container component. It manages context and communication data during an AI chat.
Widget renderer: A custom renderer that integrates reusable business logic views.
What-you-see-is-what-you-get (WYSIWYG) building experience
Drag-and-drop building: You can combine various components like building blocks to easily create a custom chat interface.
Real-time preview: Instantly see your changes as you build and adjust the design until you are satisfied.
Low-code and easy to get started: Build professional chat applications with visual tools.
The application also includes out-of-the-box component combinations. You can drag the Basic Session component onto the canvas to quickly customize your chat interface.
Custom widget
Widget: A widget is a renderable unit of dynamic content. A widget has its own scope and can contain a complete logic loop. This improves the efficiency of building and maintaining applications. Widgets can only be displayed when embedded in a Widget renderer, which is a page component. Building a widget is the same as building a page.
Widget renderer: A configurable, data-driven page component. It supports dynamic binding and conditional rendering for multiple widgets. This allows for flexible content combinations and smart displays. You can use the Widget renderer's configuration options to render widgets on a page or in a session stream. You can also use the renderer to pass parameters to widgets or respond to events that widgets trigger.
Building a widget involves the following features:
Code and components
Input and simulation parameters
Events
Event declaration
Canvas preview width