Designing Flexible Low‑Code Component Systems: Insights from Baidu’s AI‑SuDa Platform

In Baidu AI Cloud low‑code platform “AI‑SuDa”, components are the “flesh and blood” of application development, covering page creation, layout, and data binding.

1. Component System Construction

The page editing capability consists of three parts: the amis open‑source framework, a visual editor, and a backend component management service. The blue‑highlighted part in Figure 1 is the component focus.

Figure 1: Page editing capability in AI‑SuDa.

1.1 From UI Component Libraries to Low‑Code Component Systems

Before low‑code, developers saved front‑end effort by packaging reusable UI components as libraries. A typical requirement is a radio group whose selection drives a remote‑data‑filled dropdown (Figures 2‑3).

Figure 2: Remote options for “Option A”.

Figure 3: Remote options for “Option B”.

1.2 Implementing Linked Effects with React and AntD

The following React + AntD code demonstrates how to achieve the linked behavior.

import React, { FC, useEffect, useState } from "react";
import { Radio, Select, Form } from "antd";
import type { RadioChangeEvent } from "antd";
import axios from "axios";
import "./App.css";
const { Option } = Select;
interface OptionData {
  label: string;
  value: string;
}
const App: FC = () => {
  const [value, setValue] = useState(1);
  const [options, setOptions] = useState([] as OptionData[]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    axios
      .get(`https://aisuda.bce.baidu.com/amis/api/mock2/options/level2?a=${value}`)
      .then((deferOptions) => {
        setOptions(deferOptions.data.data.options);
        setLoading(false);
      });
  }, [value]);
  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };
  return (
    <div className="App">
      <Form name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} initialValues={{ remember: true }} autoComplete="off">
        <Form.Item label="选项1">
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={1}>选项A</Radio>
            <Radio value={2}>选项B</Radio>
            <Radio value={3}>选项C</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="选项2">
          <Select style={{ width: 120 }} loading={loading}>
            {options.map((item, idx) => (
              <Option value={item.value} key={idx}>{item.label}</Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </div>
  );
};
export default App;

The effect (Figure 4) shows the dropdown updating when a radio option is selected.

Figure 4: Dropdown updates according to selected radio.

1.3 Low‑Code Implementation of Linked Effects

In the visual editor, the same effect is achieved in three steps: drag a radio and a select component, configure the radio’s field name, options and default value (Figure 5), then set the select’s option source using the ${} syntax to bind the radio’s value (Figure 6).

Figure 5: Radio component properties.

Figure 6: Using ${} syntax for data binding.

This declarative approach eliminates the need to write React code or manage state libraries manually.

2. Designing a Highly Flexible Low‑Code Component System

The goal is to replace imperative component integration with declarative descriptions and move “glue” code into platform‑provided configuration.

Declare component usage and state management instead of writing import‑and‑hook code.

Replace hand‑written glue with configuration that drives component interaction.

2.1 Pre‑set Component Library

Amis provides over 140 pre‑set components (layout, function, data input, display, feedback, others) built on React and managed by MobX‑state‑tree. Additional platform‑specific components (e.g., personnel selector) extend the library.

Figure 7: Platform extension components.

2.2 Component Tree Nesting Rendering

Components are rendered as a tree; the editor translates a dragged button into a schema node (type: "button") which the renderer resolves to a React component.

Figure 8: Adding a button by drag‑and‑drop.

Figure 9: Component tree structure.

2.3 Data Propagation and Binding

Amis defines a data domain and data chain. Components can use data mapping (${var}), templates (lodash‑based), or expressions to react to data changes. Examples include text fields bound to variables and conditional visibility.

Figure 10: Text field binding.

Figure 11: Text component reflects input.

Figure 12: Live component update.

2.4 Event Actions

New event‑action feature enables flexible component interaction via renderer event listeners. Documentation: https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action.

3. Underlying Mechanism – Component Registration

Both pre‑set and custom components are registered globally via the @Renderer decorator, which calls registerRenderer. This allows schema nodes to reference components by type.

export function Renderer(config: RendererBasicConfig) {
  return function<T extends RendererComponent>(component: T): T {
    const renderer = registerRenderer({
      ...config,
      component: component
    });
    return renderer.component as T;
  };
}

Custom components can be added via a custom renderer, uploaded JS files, or npm extension packages.

Figure 17: Pre‑set components in amis.

Figure 18: Uploading custom component code.

Figure 19: Using uploaded custom component in the editor.

Figure 20: Managing component extension packages.

4. Summary

The rich set of pre‑set components, flexible custom‑component mechanisms, data chain, and event‑action system enable AI‑SuDa to build applications without writing code, covering typical development needs with higher efficiency.