How Baidu’s AMIS Powers the Aisuda Low‑Code Platform: Architecture Deep Dive

Introduction

The article, originally presented at the GMTC Global Front‑End Technology Conference, summarizes the architecture of Baidu's low‑code platform, focusing on the open‑source AMIS framework and the commercial Aisuda (爱速搭) platform.

Platform Overview

Aisuda consists of three layers: the front‑end drag‑and‑drop editor built on AMIS and amis‑editor , back‑end services such as API Proxy, permission, data model, and workflow engine, and platform‑level features like page management and data model lists.

AMIS: From UI Library to Low‑Code Front‑End Framework

AMIS converts JSON schema into React components. It abstracts common business logic into component configurations, allowing developers to create complex pages with minimal code.

Why AMIS?

Traditional development requires handling asynchronous requests, state management, and data sharing manually. AMIS encapsulates these concerns, letting users define interactions via JSON.

{
  "type": "page",
  "body": {
    "title": "",
    "type": "form",
    "mode": "horizontal",
    "body": [
      {
        "label": "选项 1",
        "type": "radios",
        "name": "a",
        "inline": true,
        "options": [
          {"label": "选项 A", "value": 1},
          {"label": "选项 B", "value": 2},
          {"label": "选项 C", "value": 3}
        ]
      },
      {
        "label": "选项 2",
        "type": "select",
        "size": "sm",
        "name": "b",
        "source": "/amis/api/mock2/options/level2?a=${a}",
        "description": "切换<code>选项 1</code>的值，会触发<code>选项 2</code>的<code>source</code>接口重新拉取"
      }
    ],
    "actions": []
  }
}

The source field demonstrates data linking: changing the radio component triggers a request for the select component, passing the selected value as a URL parameter.

Rendering Process

AMIS registers components in a pool, creates a data store, and renders each component based on its schema. The core SchemaRenderer resolves the component from the schema and renders it recursively.

Data Scope and Data Chain

AMIS manages page data through a hierarchical data scope. Variables are first looked up in the current component’s scope, then in parent scopes, up to the page root. URL parameters are also accessible via the same syntax.

API Request Pre‑/Post‑Processing

AMIS allows declarative API configuration. Data mapping and requestAdaptor / responseAdaptor functions can transform request payloads and responses without writing extra code.

const schema = {
  type: 'form',
  api: {
    method: 'post',
    url: '/amis/api/mock2/form/saveForm',
    requestAdaptor: function (api) {
      return {
        ...api,
        data: {
          ...api.data,
          foo: 'bar'
        }
      };
    }
  },
  body: [
    {type: 'input-text', name: 'name', label: '姓名：'},
    {type: 'input-email', name: 'email', label: '邮箱：'}
  ]
};

Custom Component Integration

When default components are insufficient, AMIS supports custom components via SDK or React, allowing teams to extend the platform with domain‑specific logic.

Aisuda Visual Editor

The visual editor provides drag‑and‑drop page building, generating AMIS schema in real time and rendering a preview using the same engine.

Backend Services

API Proxy

Aisuda routes all front‑end API calls through a unified proxy (e.g., /api/proxy/:apiId) to handle CORS, header injection, and request/response transformation.

API Orchestration

Visual API orchestration enables chaining of multiple endpoints (e.g., using the result of API A as input to API B) without writing additional backend code.

Entity Model

Entity modeling provides a visual CRUD interface for database tables, allowing non‑technical users to define data structures and operations.

Workflow Engine

The workflow engine supports approval and business processes through a visual designer and an integrated task center.

Conclusion

Low‑code platforms are not a fleeting hype; they have demonstrably solved many real business problems. Baidu’s AMIS and Aisuda illustrate a mature, production‑ready stack that combines front‑end configurability with robust back‑end services, offering ample opportunities for further exploration.