AIGCDesign: Open-Source Cross‑Platform AI Component Solution – Design, Architecture, and Implementation

AIGC (Artificial Intelligence Generated Content) refers to AI‑generated text, images, audio, and video using deep learning models.

The Open‑AI component solution aims to extend traditional frontend component libraries with LLM capabilities, streaming display, standard protocols, lifecycle management, and plug‑in extensibility for rapid multi‑scenario delivery.

Since the release of ChatGPT in November 2022, AI has driven new product models such as AI‑powered recommendation, customer service, and internal bots, prompting the need for a reusable, layered component system that supports low‑code/no‑code rapid application generation.

Six existing AIGC component libraries were evaluated (LangUI, LobeUI, AI SDK UI, Open WebUI, Chatbox, Enchanted) on core positioning, component count, usage method, framework support, platform support, theming, and customisation, revealing gaps that AIGCDesign intends to fill.

Core positioning: an open‑source cross‑platform AI component solution to improve frontend AI development efficiency.

Goal: provide a lightweight, extensible, multi‑endpoint solution that can be quickly integrated into various business flows and technology stacks.

The technical architecture consists of three layers:

Core layer – AI platform integration, basic modules, and APIs.

Container layer – multi‑framework containers that handle model interaction, session rendering, and customisation.

Component layer – basic, business, and custom UI components rendered by the container.

Implementation uses JDHybrid mixed architecture: frequently changing business modules are H5‑based, while stable containers and core components are native, with Taro components reusable in native projects.

Key native components include overlay, voice interaction, toast, custom header, input box, and toolbox; native container components manage events, UI, and API configuration; JDHybrid protocol and AIGC JSSDK enable H5‑native communication.

The container provides lifecycle hooks such as beforeLaunch , onLaunch , onSubmit , onLLMResult , and onChatUpdate for fine‑grained control.

Minimal configuration example (JavaScript):

import AiContainer from "@aigcui/container";

For web multi‑framework support, a UMD bundle built with React can be loaded via a script tag and rendered into any DOM node:

window['autobots-full'].renderAiChatBubble({
    width: 500,
    height: 500,
    chatInfo: {
      agentId: 'xxx',
      token: 'xxxxxx',
    }
}, 'app');

Business integration cases include:

In‑store mini‑program AI shopping assistant (MP)

Supply‑chain AI assistant (PC)

Home appliances AI assistant (APP)

AutoBots AI application output (PC/M) – technology‑stack agnostic.

Current version 1.0.6 supports MP, Web, Hybrid, and Android AI session capabilities with 8 MP and 14 Web business components, and offers both NPM and UMD delivery.

Future efforts will focus on expanding core capabilities (configurable AI pipelines, OCR/ASR/TTS/Agent/knowledge‑base integration), multi‑endpoint product support, and broader B2B/B2C scenario coverage.