How Baidu’s AMIS Powers the Aisuda Low‑Code Platform: Architecture, Rendering, and API Integration

Background

AMIS is an open‑source low‑code front‑end framework (first commit 7 years ago, open‑source for ~3 years). It powers Baidu’s internal low‑code platform Aisuda and the commercial version "Aisuda" used in finance, government, and industry.

Platform Architecture

Aisuda consists of:

Front‑end layer : AMIS framework + amis‑editor for visual drag‑and‑drop page construction.

Back‑end layer : API Proxy, permission management, unified data model, and a workflow engine.

AMIS Framework Fundamentals

AMIS converts a JSON schema into React components at runtime. It abstracts asynchronous requests, state management (MobX + mobx‑state‑tree), and component communication.

Simple Form Example

{
  "type": "page",
  "body": {
    "type": "form",
    "mode": "horizontal",
    "body": [
      {
        "label": "Option 1",
        "type": "radios",
        "name": "a",
        "inline": true,
        "options": [
          {"label": "A", "value": 1},
          {"label": "B", "value": 2},
          {"label": "C", "value": 3}
        ]
      },
      {
        "label": "Option 2",
        "type": "select",
        "size": "sm",
        "name": "b",
        "source": "/amis/api/mock2/options/level2?a=${a}",
        "description": "Changing Option 1 triggers a request for Option 2"
      }
    ],
    "actions": []
  }
}

The source field uses ${a} to bind the select’s request parameter to the radio’s value, eliminating manual request handling.

Rendering Pipeline

Locate the component type in the registered component pool.

Create a MobX‑based data store (using mobx‑state‑tree).

Render the component tree; container components may recursively render nested bodies.

Data Domain and Data Chain

AMIS manages page data with a hierarchical "data domain" and a "data chain" lookup:

Search the current component’s data domain.

If not found, ascend to the parent component’s domain.

Continue upward until the page root.

URL parameters are also considered during lookup.

Expressions such as ${title} or this.title === 'x' can access data from any level.

API Request Pre‑ and Post‑Processing

Components declare data sources via an api configuration. Before sending a request, AMIS can apply:

Data mapping : e.g., "target": ${source} to reshape payload fields.

requestAdaptor : a JavaScript function that modifies the request object.

Adaptor Example

const schema = {
  type: 'form',
  api: {
    method: 'post',
    url: '/amis/api/mock2/form/saveForm',
    requestAdaptor: function (api) {
      return {
        ...api,
        data: {
          ...api.data,
          foo: 'bar' // add custom field
        }
      };
    }
  },
  body: [
    {type: 'input-text', name: 'name', label: 'Name:'},
    {type: 'input-email', name: 'email', label: 'Email:'}
  ]
};

In Aisuda, raw APIs are automatically wrapped by a unified API Proxy that adds CORS handling and composes headers/body.

Visual Page Editor

The visual editor ( amis‑editor) sits on top of AMIS and provides drag‑and‑drop schema generation with live preview. It does not replace the rendering engine; it merely assists non‑developers in composing pages by editing the underlying JSON schema.

Backend Services Overview

API Proxy : Centralized request forwarding with CORS handling.

API Orchestration : Visual workflow to chain API calls, reducing the need for custom aggregation services.

Entity Model : Visual CRUD and DDL operations for database tables, enabling business users to manage data without writing SQL.

Workflow Engine : Visual approval flow designer and task center for business processes.

Custom Component Integration

AMIS supports custom components via SDK or direct React integration. Developers can register new components in the component pool, allowing them to be used like built‑in components in schemas.

References

AMIS repository: https://github.com/baidu/amis amis‑editor demo:

https://github.com/aisuda/amis-editor-demo