Frontend Custom Development Guide

Overview

This document is designed to help frontend engineers quickly complete custom ChatBI frontend development. With the following three core resources, you can understand the product workflow, access the code, and complete the integration.

Prerequisites

• Development environment: Node.js (v16+), Git
• Permissions: access to the Guandata ChatBI platform and normal access to ChatBI features

Development Resources and Usage Guide

Resource 1: ChatBI Frontend Sample Project

• URL: ChatBI Frontend Sample Project
• Core content: this is a sample ChatBI frontend project that demonstrates a complete conversational analytics UI. You can clone and run the project to understand:
  • how the ChatBI conversational interface is implemented, such as the message list and input box UI structure
  • the overall frontend architecture and state management approach
  • how the sample code calls the ChatBI Public API and handles loading states, errors, and returned results

Resource 2: ChatBI Public API Development Guide

• URL: ChatBI Public API Development Guide
• Core content: before you start coding, we strongly recommend reading this document first. It helps you understand:
  • A complete query workflow: the full API interaction flow from creating or retrieving a session, to sending a natural language question, to polling for query execution results
  • Core conceptual model: key ChatBI API objects such as Session, Message, and Topic
  • Mapping between APIs and frontend implementation: how different features in the sample project interact with the ChatBI Public API

Resource 3: ChatBI Public API Documentation

• URL: ChatBI Public API Documentation
• How to use it: this is the online API documentation for the ChatBI Public API. During development, you can use it to view detailed definitions of all interfaces, for example:
  • Send Message: review the request parameters, headers, and response structure of /public-api/chat/send-message
  • Get Query Results: understand how query-result-related interfaces are designed, such as message query APIs
  • Browse by API category: the documentation is organized by modules such as Session, Message, and Knowledge Base, making it easier to find interfaces by function
  • API debugging: some interfaces support filling in parameters and sending requests online for debugging

Minimum Viable Development Path

If you want to build a custom conversational analytics interface on top of the ChatBI Public API, you can get started with the following development path.

1. Run the sample project
   Clone the sample project and run it locally to experience the complete ChatBI conversational analytics flow.
2. Read the development guide
   Understand the core ChatBI concepts such as Session, Message, and Topic, as well as the full API flow of a complete query.
3. Cross-check the API documentation and implementation
   Locate the corresponding API call code in the sample project and use the API documentation to understand request parameters and response structures.
4. Start custom development
   Build UI components and business logic tailored to your own business needs based on the sample project and the ChatBI Public API.