How AIGCDesign Revolutionizes Cross‑Platform AI Component Development

Why Build This Project?

AIGC (Artificial Intelligence Generated Content) creates text, images, audio, and video using AI models. After OpenAI released ChatGPT in November 2022, AI interest surged, prompting the need for a reusable, low‑code AI component library to meet growing business demands.

Industry Survey of Front‑End AI Component Libraries

We evaluated six open‑source AI component libraries, comparing extensibility, coverage, platform and framework support. Key capabilities identified were lightweight, fast development, out‑of‑the‑box usage, support for TailWind, React, Vue, Native, conversational components, multimodal input, and responsiveness.

Based on these, the library must work on Native, Web, MP, and PC, and support React, Vue, Android, and iOS.

Technical Implementation of AIGCDesign

Overall Architecture

The library leverages Taro’s cross‑platform ability to output MP and H5 components, with responsive Web design and single‑React‑app support. It integrates JDHybrid for native capabilities and provides a container component that developers can configure to “plug‑and‑play” AI applications.

The architecture consists of three layers:

Core Layer : AI platform integration, basic modules, and APIs.

Container Layer : Multi‑platform, multi‑framework container that handles model requests, AI conversation, and customizable UI regions.

Component Layer : Base, business, and custom components rendered by the container.

Native Implementation

Using a JDHybrid hybrid architecture:

Frequently changing business components are accessed via H5.

Stable container and base components are developed natively.

Taro components can be reused in native projects.

Core implementation is divided into:

Native Base Components : overlays, voice interaction, toast, custom header, input box, toolbox, etc.

Native Container Components : manage events, UI, and API requests; the core module of AIGC components.

JDHybrid Extension Protocol & AIGC JSSDK : enable communication between H5 and native containers.

Application Lifecycle

The container component provides full‑process lifecycle events, allowing developers to listen at any node and obtain the latest context. Key hooks include: beforeLaunch: before container loads. onLaunch: after container loads. onSubmit: before sending a request to the large model. onLLMResult: after the model returns data. onChatUpdate: after the chat UI updates.

User Interaction and Data Flow

Developers import the AiContainer component, configure the Yanshi platform apiKey and model endpoint aiPath, and render a full AI chat UI.

import AiContainer from "@aigcui/container";

<AiContainer
    // Yanshi platform apiKey
    apiKey='xxx'
    // Large model endpoint
    aiPath='/ChatRhino/api/v1/chat/completions'
/>

Additional customizations include large‑model requests, conversation area rendering, input icon extensions, quick‑action area, and chat card header/footer.

Web Multi‑Framework Support

Beyond Taro, the library offers a UMD build that can be loaded via a script tag and rendered into any DOM node. If a project already includes React, the component can be used directly; otherwise, the full UMD bundle includes React internally.

<!-- Load UMD bundle -->
<script src="https://storage.jd.com/taro/aigc-ui/1.0.6/aigcjdfe-autobots-full.umd.js"></script>

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

Business Integration Cases

Multiple multi‑platform cases have been integrated, demonstrating MP, Web, Hybrid, and Android AI conversation capabilities. The library currently provides 8 MP conversation components and 14 Web business components (version 1.0.6).

Long‑Term Direction and Value

Future work focuses on:

Enhancing core capabilities: flexible configuration, component generation, and AI platform integration.

Expanding multi‑end, multi‑framework support: NPM/UMD packages for technology‑agnostic integration.

Extending underlying abilities: OCR, ASR/TTS, agents, knowledge bases.

Supporting B2B and B2C scenarios with low‑cost, configurable AI interaction components.

Appendix: Streaming Processing Techniques

1. Streaming Data Reception

Frontend fetch can consume streaming APIs via ReadableStream. Using AbortController allows request cancellation.

async function fetchStream(url, params) {
  const { onmessage, onclose, ...otherParams } = params;
  const response = await fetch(url, otherParams);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let result = '';
  while (true) {
    const { done, value } = await reader.read();
    if (done) { onclose?.(); break; }
    result = decoder.decode(value, { stream: true });
    onmessage?.(result);
  }
  console.log('Stream complete');
}

const controller = new AbortController();
const signal = controller.signal;
fetchStream('https://example.com/stream-endpoint', {
  signal,
  onmessage: (text) => console.log(text),
  onclose: () => console.log('Stream abort')
});
// To abort early
controller.abort();

Two processing modes are supported: true streaming (handle each chunk) and non‑streaming (process full result after completion).

2. Streaming Markdown Rendering

Using react-markdown with rehype-highlight, markdown content can be rendered in real time, with customizable component mapping.

const BubbleMarkdown: React.FC<{ children?: string }> = ({ children }) => {
  return (
    <div className="chat-result-bubble-text chat-result-bubble-markdown">
      <Markdown
        rehypePlugins={[[RehypeHighlight, { detect: false, ignoreMissing: true }]]}
        components={{
          a: (aProps) => {
            const href = aProps?.href || "";
            const isInternal = /^\//.test(href);
            const target = isInternal ? "_self" : aProps?.target ?? "_blank";
            return <a {...aProps} target={target} />;
          },
        }}
      >
        {children}
      </Markdown>
    </div>
  );
};

Both streaming and non‑streaming responses support typewriter and full‑render effects, with recommendations to avoid parent re‑renders, simulate input pacing, throttle scrolling, and disable user input during streaming.