@antglobal/copilot-cards-mini-program

Native renderer for schema-driven cards in Alipay and WeChat mini-programs. It converts the same card schema used by the Web renderer into mini-program data trees and native component templates.

The package includes platform adapters, action integration, incremental streaming, and ready-to-register native components.

Installation

npm install @antglobal/copilot-cards-mini-program

@antglobal/copilot-cards-core is installed automatically.

Quick start

import {
  AlipayAdapter,
  renderForMiniProgram,
} from "@antglobal/copilot-cards-mini-program";

const adapter = new AlipayAdapter();

const card = renderForMiniProgram(schema, {
  adapter,
  data: { userName: "Alice" },
  onEmit: (eventName, payload) => {
    console.log(eventName, payload);
  },
});

this.setData(card.getData());

await card.handleEvent(nodeId, eventName, detail);
this.setData(card.getData());

card.dispose();

Use WeChatAdapter instead of AlipayAdapter in WeChat mini-programs.

Register native components

Register the components used by your pages in app.json or the page-level JSON file:

{
  "usingComponents": {
    "card-root": "@antglobal/copilot-cards-mini-program/components/card-root/index",
    "card-node": "@antglobal/copilot-cards-mini-program/components/card-node/index",
    "card-text": "@antglobal/copilot-cards-mini-program/components/card-text/index",
    "card-button": "@antglobal/copilot-cards-mini-program/components/card-button/index",
    "card-image": "@antglobal/copilot-cards-mini-program/components/card-image/index",
    "card-icon": "@antglobal/copilot-cards-mini-program/components/card-icon/index",
    "card-input": "@antglobal/copilot-cards-mini-program/components/card-input/index",
    "card-divider": "@antglobal/copilot-cards-mini-program/components/card-divider/index"
  }
}

The npm package contains both Alipay .axml/.acss assets and WeChat .wxml/.wxss assets.

Supported components

| Component | Schema type | Purpose | | --- | --- | --- | | card-root | Root | Owns the renderer instance and event bridge | | card-node | Layout node | Recursively renders the card tree | | card-text | Text | Styled text content | | card-button | Button | Interactive button variants | | card-image | Image | Images with fit modes | | card-icon | Icon | Built-in SVG names, external sources, or emoji fallback | | card-input | Input | Text input and variable synchronization | | card-divider | Divider | Horizontal separators |

Platform adapters

AlipayAdapter and WeChatAdapter implement a shared interface for:

• HTTP requests
• toast notifications
• page navigation
• system information
• clipboard access

You can supply your own MiniProgramAdapter when integrating another compatible runtime.

Events and actions

handleEvent(nodeId, eventName, detail) maps native mini-program events back to schema actions. Supported action behavior is shared with @antglobal/copilot-cards-core, including requests, emitted events, variable updates, toast notifications, navigation, and copy actions.

The package exports event-name maps and createEventDetail for custom component integration.

Streaming

Use createStreamingCardInstance for incrementally generated cards:

import {
  createStreamingCardInstance,
  WeChatAdapter,
} from "@antglobal/copilot-cards-mini-program";

const stream = createStreamingCardInstance({
  adapter: new WeChatAdapter(),
});

for (const patch of stream.feed(chunk)) {
  this.setData(patch.data);
}

for (const patch of stream.flush()) {
  this.setData(patch.data);
}

Streaming returns minimal setData patches instead of mutating a browser DOM.

Related packages

• @antglobal/copilot-cards-core — shared schema, expression, action, lifecycle, icon, and streaming logic.
• @antglobal/copilot-cards-web — browser and WebView renderer.

License

MIT