aiui-dev

Files (10)

• SKILL.md
• apis-ai.md
• apis-canvas.md
• apis-device.md
• apis-media.md
• apis-wx.md
• apis.md
• components.md
• design-system-green.md
• wxss.md

SKILL.md (first lines)

# AIUI Agent Developer Guide

This guide provides independent and comprehensive context for AI agents developing AIUI applications. It includes project structure, SFC `.ink` support specifications, and standard API references, designed to help Large Language Models (LLMs) generate accurate AIUI pages and logic code.

At present, AIUI is used in two forms. These two forms describe the current AIUI product shape only; more forms may be added in the future. Different forms can also transition into one another as the user flow changes, for example from a conversation-flow card into a full-screen page.

- **Conversation-flow cards**: Cards embedded in a conversation flow are display-only and should be treated as non-interactive surfaces for presenting information.
- **Full-screen pages**: Full-screen pages provide complete interaction capabilities and support richer page logic, event handling, and user input.

## 1. Project Structure

A standard AIUI application project typically contains the following core files:

- `AGENTS.md`: The agent manifest, defining the agent's identity and capabilities.
- `app.json`: Global configuration, including page routes, window settings, etc.
- `app.js`: Application lifecycle and global logic.
- `pages/`: Page directory containing the application's pages, primarily using the Single File Component (SFC) `.ink` format.
- `assets/`: Directory for storing static resources like images and audio.

### 1.1 Agent Manifest (AGENTS.md)

The manifest file defines the agent's basic information and required permissions/skills:

```markdown
# Agent Manifest

## Identity
- **Name**: My AIUI Agent
- **Version**: 1.0.0
- **Description**: A brief application description.
- **Author**: Developer Name

## Capabilities
- **Permissions**:
  - camera
  - microphone
  - network
  - audio
- **Skills**:
  - weather-lookup
```

### 1.2 Global Configuration (app.json)

Defines application page paths and global UI styles. The `pages` field is required and declares the routing order for all application pages:

```json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "My AIUI Agent",
    "viewport": {
      "width": "device-width"
    }
  }
}
```

- `pages` is an array of page route strings without file extensions.
- Each entry maps to a page directory such as `pages/index/index`, which resolves to the corresponding page files in that folder.
- The first item in the array is treated as the application's default landing page.
- Add new pages here whenever you create additional screens, otherwise the framework will not register them for navigation.

### 1.3 Application Registration (app.js)

AIUI uses an ES module-based registration system, registering the application by exporting a default configuration object:

```javascript
export default {
  onLaunch() {
    console.log('App Launch');
  },
  globalData: {
    userInfo: null
  }
};
```

### 1.4 Page

In AIUI, each page acts as a Model Context Protocol (MCP) UI component. A complete page should define the following parts:

- **Configuration**: Page-level metadata such as `description`, and `schema`. The `description` explains what the page represents, and `schema.data` uses JSON Schema to declare the input data required to render the page.
- **Logic**: Page state, lifecycle hooks, and custom methods used to initialize data and respond to user interactions.
- **Structure**: The UI template that describes the page layout and binds data to components.
- **Style**: The WXSS or CSS rules that control the visual presentation of the page.

When writing page configuration, pay special attention to `description` and `schema.data`:

- `description` should describe the page in natural language from a UI perspective.
  - State what the page displays or helps the user accomplish.
  - Mention the most important dynamic data if the page depends on external input.
  - Keep it specific and observable. Prefer "Displays a weather summary for a city" over "Weather page".
- `schema.data` should define the complete input contract required to render the page.
  - Use `type: "object"` at the top level.
  - Put all render-time fields in `properties`.
  - Use `required` for fields that must exist before the page can render correctly.
  - Add `description`, `enum`, `items`, and nested object definitions when they help clarify the data contract.

Examples:

**Example 1: Weather card page**

```json
{
  "description": "Displays the current weather summary for a city, including temperature, condition, and humidity.",
  "schema": {
    "data": {
      "type": "object",
      "properties": {
        "city": {
          "type": "string",
          "description": "City name shown in the page header"
        },
        "temperature": {
          "type": "number",
          "description": "Current temperature in Celsius"

From vb2250158/RabiRoute, MIT.

More from vb2250158/RabiRoute