### Navigate and Start AIUI Agent Project

Source: https://github.com/jsar-project/aiui/blob/main/packages/create-aiui-agent/README.md

After creating the project, navigate into the directory, install dependencies, and start the development server.

```bash
cd my-agent
npm install
npm start
```

--------------------------------

### AIUI Single File Component (.ink) Example

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

A standard .ink file structure demonstrating the use of <script def>, <script setup>, <page>, and <style> tags for defining page configuration, JavaScript logic, WXML template, and CSS.

```html
<script def>
{
  "navigationBarTitleText": "Home"
}
</script>

<script setup>
import wx from 'wx';

export default {
  data: {
    greeting: 'Hello AIUI!'
  },
  onLoad() {
    console.log('Page loaded');
  },
  handleTap() {
    this.setData({
      greeting: 'Hello, World!'
    });
  }
}
</script>

<page>
  <view class="container">
    <text class="title">{{ greeting }}</text>
    <button bindtap="handleTap">Click Me</button>
  </view>
</page>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>
```

--------------------------------

### Install AIUI Developer Skill via CLI (Latest)

Source: https://github.com/jsar-project/aiui/blob/main/README.md

Install the AIUI developer skill into your project using the 'npx skills add' command to fetch the latest context files from the main branch.

```bash
npx skills add https://github.com/jsar-project/AIUI/tree/main/skills/aiui-dev
```

--------------------------------

### Install AIUI Developer Skill via CLI (Specific Version)

Source: https://github.com/jsar-project/aiui/blob/main/README.md

Install a specific released version of the AIUI developer skill by replacing 'main' with the desired tag name in the command.

```bash
npx skills add https://github.com/jsar-project/AIUI/tree/v0.1.0/skills/aiui-dev
```

--------------------------------

### Global Configuration Example (app.json)

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Sets up application page routes and global UI styles. The 'pages' field is mandatory for declaring navigation order.

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

--------------------------------

### wx.speech.startRecognition

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Starts speech recognition. Requires an interactive call site and throws an error if the interaction gate check fails.

```APIDOC
## wx.speech.startRecognition()

### Description
Starts the speech recognition process.

### Method
`startRecognition`

### Parameters
None

### Return Behavior
- Returns a string.

### Error Behavior
- Throws when the interaction gate check fails, as it requires an interactive call site.
```

--------------------------------

### WXML Data Binding Examples

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Demonstrates basic WXML syntax for text binding, attribute binding, and expression binding using double curly braces {{ }}.

```html
<!-- Text binding -->
<view>{{ message }}</view>

<!-- Attribute binding -->
<view class="{{ dynamicClass }}"></view>

<!-- Expression binding -->
<view>{{ count + 1 }}</view>
```

--------------------------------

### Prompting with Multimodal Input

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-ai.md

This example shows how to send a prompt that includes both text and an image. The image is provided as a base64 encoded data URL.

```javascript
const multimodalAnswer = await session.prompt([
  {
    role: 'user',
    content: [
      { type: 'text', text: 'Describe this image in one sentence.' },
      {
        type: 'image_url',
        image_url: {
          url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...',
        },
      },
    ],
  },
]);
```

--------------------------------

### Agent Manifest Example (AGENTS.md)

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Defines an agent's identity, version, description, author, and capabilities including permissions and 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
```

--------------------------------

### Application Registration Example (app.js)

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Registers the AIUI application using an ES module default export configuration object, including lifecycle hooks like onLaunch.

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

--------------------------------

### View Component Example

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

Use the view component as a base layout container for general composition. It supports standard WXML attributes and generic interaction handlers. Layout and styling are primarily controlled via WXSS.

```xml
<view class="card" bindtap="openDetail">
  <text class="title">{{ title }}</text>
</view>
```

--------------------------------

### Access Bluetooth API

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Get the Bluetooth API object from the navigator. The Bluetooth API is mounted by the runtime.

```javascript
const bluetooth = navigator.bluetooth;
```

--------------------------------

### Use Web Speech API globally

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Utilize global objects for speech synthesis and recognition. This includes creating utterances, speaking them, and starting speech recognition.

```javascript
const utterance = new SpeechSynthesisUtterance('Hello Ink');
speechSynthesis.speak(utterance);

const recognition = new SpeechRecognition();
recognition.start();
```

--------------------------------

### RecorderManager

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Manages audio recording functionalities, including starting, stopping, pausing, and resuming recordings, along with various event callbacks.

```APIDOC
## RecorderManager

### Description
Manages audio recording operations, providing methods to control recording and listen to various recording events.

### Methods

- `start(options)`: Starts audio recording. Requires an interactive call site. Returns a Promise. Throws an error if the interaction gate check fails.
- `pause()`: Pauses the current audio recording. Returns a Promise. Rejects with a generic error if the operation fails.
- `resume()`: Resumes a paused audio recording. Returns a Promise. Rejects with a generic error if the operation fails.
- `stop()`: Stops the audio recording. Returns a Promise. Rejects with a generic error if the operation fails.
- `onStart(callback)`: Registers a callback function to be executed when recording starts. The callback receives no payload.
- `onResume(callback)`: Registers a callback function to be executed when recording resumes. The callback receives no payload.
- `onPause(callback)`: Registers a callback function to be executed when recording is paused. The callback receives no payload.
- `onStop(callback)`: Registers a callback function to be executed when recording stops. The callback receives an object with `tempFilePath`.
- `onHeader(callback)`: Registers a callback function to be executed when the recording header is received. The callback receives two positional arguments: `format` and `buffer`.
- `onFrameRecorded(callback)`: Registers a callback function to be executed when a frame of audio is recorded. The callback receives an object with `frameBuffer`.
- `onError(callback)`: Registers a callback function to be executed when an error occurs during recording. The callback receives an object with `errMsg`.
- `onInterruptionBegin(callback)`: Registers a callback function to be executed when an interruption begins. The callback receives no payload.
- `onInterruptionEnd(callback)`: Registers a callback function to be executed when an interruption ends. The callback receives no payload.
```

--------------------------------

### Image Component Example

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

Use the image component to display local or remote images. Specify the image source with 'src' and control scaling behavior with the 'mode' attribute, such as 'widthFix' or 'heightFix' to preserve aspect ratio.

```xml
<image class="avatar" src="{{ user.avatar }}" mode="widthFix"></image>
```

--------------------------------

### Button Component Example

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

The button component serves as a clickable container for actions. It supports generic tap events like 'bindtap' and can be styled using 'class' and 'style'. Child nodes are rendered normally.

```xml
<button class="btn-primary" bindtap="submitForm">Submit</button>
```

--------------------------------

### wx.media.getRecorderManager

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Gets an instance of the RecorderManager. Returns `undefined` if the current context does not provide the required media capability, in unsupported app lifecycle modes, or when recording capability is unavailable.

```APIDOC
## wx.media.getRecorderManager()

### Description
Retrieves the RecorderManager instance.

### Method
`getRecorderManager`

### Parameters
None

### Return Behavior
- Returns a `RecorderManager` instance or `undefined`.
- Returns `undefined` if the current context does not provide the required media capability.
- Returns `undefined` in unsupported app lifecycle modes.
- Returns `undefined` when recording capability is unavailable.
```

--------------------------------

### Importing External Stylesheets in WXSS

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Use the `@import` statement to include styles from other WXSS files. This example imports './common.wxss' and defines a basic box style.

```css
@import "./common.wxss";

.box {
  width: 240px;
  height: 100px;
  background-color: #40FF5E;
}
```

--------------------------------

### Weather Card Page Schema Data Example

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Declares the input data contract for a weather card page using JSON Schema, specifying properties and required fields.

```json
{
  "description": "Displays a weather summary for a city.",
  "schema": {
    "data": {
      "type": "object",
      "properties": {
        "city": {
          "type": "string",
          "description": "The city for which to display weather information."
        },
        "temperature": {
          "type": "number",
          "description": "The current temperature in Celsius."
        },
        "condition": {
          "type": "string",
          "description": "The current weather condition (e.g., 'Sunny', 'Cloudy')."
        }
      },
      "required": ["city", "temperature", "condition"]
    }
  }
}
```

--------------------------------

### Canvas Component Example

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

The canvas component provides a native-backed 2D drawing surface. Set the 'width' and 'height' attributes to define the backing pixel dimensions. The rendered snapshot is displayed through the native view tree.

```xml
<canvas id="chartCanvas" width="320" height="180"></canvas>
```

--------------------------------

### Create LanguageModel Session with Tools

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-ai.md

Demonstrates how to check LanguageModel availability and create a session with initial prompts and function tools. Ensure the LanguageModel is available before creating a session.

```javascript
import { LanguageModel } from 'language-model';

if ((await LanguageModel.availability()) !== 'available') {
  throw new Error('LanguageModel is unavailable');
}

const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: 'system',
      content: 'You are a concise travel assistant.',
    },
  ],
  tools: [
    {
      type: 'function',
      function: {
        name: 'get_weather',
        description: 'Look up current weather by city name',
        parameters: {
          type: 'object',
          properties: {
            city: { type: 'string' },
          },
          required: ['city'],
        },
      },
    },
  ],
});
```

--------------------------------

### Create a New AIUI Agent Project

Source: https://github.com/jsar-project/aiui/blob/main/README.md

Use the official npm CLI to quickly scaffold a new AIUI Agent project. Follow the prompts to set up a basic project structure.

```bash
npm create @yodaos-pkg/aiui-agent my-agent
```

--------------------------------

### Get canvas context from a page node

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Get the 2D rendering context for a canvas node specified by its ID on the current page. Returns null if the page, node, or canvas is not found.

```javascript
import wx from 'wx';

const ctx = wx.createCanvasContext('chartCanvas');
```

--------------------------------

### Script-owned Canvas

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Creating and getting the context for a script-owned canvas.

```APIDOC
## Script-owned Canvas

### Description
Allows creation of a canvas element directly in script and obtaining its 2D rendering context.

### Constructor
```javascript
const canvas = new Canvas(width, height);
```

### Get Context
```javascript
const ctx = canvas.getContext('2d');
```

### Notes
- `canvas.getContext(type)` only accepts `'2d'`. Any other value returns `null`.
```

--------------------------------

### Line Dash

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-canvas.md

Methods for setting and getting the line dash pattern.

```APIDOC
## setLineDash(dashArray)

### Description
Sets the line dash pattern for strokes.

### Parameters
- **dashArray** (Array<number>) - An array of numbers specifying the lengths of alternating dashes and gaps.

## getLineDash()

### Description
Returns the current line dash pattern.

### Returns
- **Array<number>** - The current line dash pattern.
```

--------------------------------

### wx canvas entry point

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Creates a 2D rendering context for a canvas element.

```APIDOC
## wx canvas entry point

### Description
Creates a 2D rendering context for a canvas element.

### Method
- `wx.createCanvasContext(canvasId)`: Creates a canvas rendering context for the specified canvas element.
```

--------------------------------

### Prompting for Text Response

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-ai.md

Use this snippet to get a single text response from the language model. Ensure a session is initialized before calling.

```javascript
const answer = await session.prompt('Plan a 2-day trip in Kyoto.');
console.log(answer);
```

--------------------------------

### Initialize sensors

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Create instances of Accelerometer, AbsoluteOrientationSensor, and Gyroscope with a specified frequency. These sensors are registered globally.

```javascript
const accelerometer = new Accelerometer({ frequency: 60 });
const orientation = new AbsoluteOrientationSensor({ frequency: 60 });
const gyroscope = new Gyroscope({ frequency: 60 });
```

--------------------------------

### Create and get context for a script-owned canvas

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Create a new canvas element and obtain its 2D rendering context. The getContext method only accepts '2d'.

```javascript
const canvas = new Canvas(300, 150);
const ctx = canvas.getContext('2d');
```

--------------------------------

### wx.media.createCameraContext

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Creates a CameraContext instance. Returns `undefined` if the current context does not provide the required media capability or in unsupported app lifecycle modes.

```APIDOC
## wx.media.createCameraContext()

### Description
Creates a CameraContext instance.

### Method
`createCameraContext`

### Parameters
None

### Return Behavior
- Returns a `CameraContext` instance or `undefined`.
- Returns `undefined` if the current context does not provide the required media capability.
- Returns `undefined` in unsupported app lifecycle modes.
```

--------------------------------

### Create New AIUI Agent Project

Source: https://github.com/jsar-project/aiui/blob/main/packages/create-aiui-agent/README.md

Use this command to scaffold a new AIUI Agent project with a given name.

```bash
npx @yodaos-pkg/create-aiui-agent my-agent
```

--------------------------------

### System Methods

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Methods for interacting with the mini-program system.

```APIDOC
## `wx.exitMiniProgram(options?)`

### Description
Exits the current mini-program.

### Parameters
#### Path Parameters
- **options** (Object) - Optional - Configuration options.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **complete** (Function) - Optional - Callback function executed after the operation completes (success or fail).

### Behavior Notes
- Calls `success()` and `complete()` when present, then sends the app exit event.
```

--------------------------------

### Create Sound object globally

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Instantiate a Sound object using its global constructor, specifying the audio file path. The Sound object is also available as a named export from 'audio'.

```javascript
const click = new Sound('./click.wav');
```

--------------------------------

### SpeechRecognition

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-ai.md

Provides an interface for recognizing speech input from a microphone. It allows starting, stopping, and aborting the recognition process, and handles various events related to speech recognition.

```APIDOC
## `SpeechRecognition`

### Constructor

- `new SpeechRecognition()`

### Properties

- `lang` (string) - The language for speech recognition. Defaults to an empty string, letting the host choose.
- `continuous` (boolean) - Whether to continuously listen for speech. Defaults to false.
- `interimResults` (boolean) - Whether to provide interim results during recognition. Defaults to false.
- `maxAlternatives` (number) - The maximum number of alternative interpretations to return. Defaults to 1.

### Methods

- `start()` - Starts the speech recognition session.
- `stop()` - Stops the speech recognition session and finalizes the current result.
- `abort()` - Aborts the speech recognition session immediately.

### Event Behavior

- Inherits from `EventTarget`.
- Supported event names: `start`, `audiostart`, `soundstart`, `speechstart`, `result`, `nomatch`, `error`, `speechend`, `soundend`, `audioend`, `end`.
- Supported event handler properties: `onstart`, `onaudiostart`, `onsoundstart`, `onspeechstart`, `onresult`, `onnomatch`, `onerror`, `onspeechend`, `onsoundend`, `onaudioend`, `onend`.
- `result` events expose `resultIndex`, `results`, and `sessionId`.
- `error` events expose `error`, `message`, and `sessionId`.

### Behavior Notes

- Default values: `lang = ''`, `continuous = false`, `interimResults = false`, `maxAlternatives = 1`.
- If `lang` is empty, the host selects the default language.
- `start()` initiates a new recognition session.
- `stop()` requests the host to stop listening and finalize the session.
- `abort()` stops the session without finalizing.
- New `start()` calls require the owning InkView to be interactive.

### Error Behavior

- `start()` fails with `InvalidStateError` if the owning InkView is non-interactive.
```

--------------------------------

### Create AIUI Agent Project Locally

Source: https://github.com/jsar-project/aiui/blob/main/packages/create-aiui-agent/README.md

If the package is available locally, use this command to create a new AIUI Agent project.

```bash
npx create-aiui-agent my-agent
```

--------------------------------

### WXML List Rendering with ink:for

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Illustrates how to render lists of data in WXML using the ink:for directive. Use 'item' for the current element and 'index' for its position. A stable ink:key is recommended.

```html
<view ink:for="{{cities}}" ink:key="name">
  <text>{{item.name}}</text>
  <text>{{item.temperature}}</text>
</view>
```

--------------------------------

### Gyroscope API

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-device.md

Provides an interface to access the device's gyroscope sensor data. Users can start and stop the sensor, and listen for activation, reading, and error events.

```APIDOC
## Gyroscope

### Description
Provides an interface to access the device's gyroscope sensor data. Users can start and stop the sensor, and listen for activation, reading, and error events.

### Constructor
- `new Gyroscope(options?)`
  - `options` (object) - Optional constructor options.
    - `frequency` (number) - Optional hint for the desired sensor update frequency.

### Properties
- `x` (number | null) - The x-axis component of the gyroscope reading. Null until the first reading.
- `y` (number | null) - The y-axis component of the gyroscope reading. Null until the first reading.
- `z` (number | null) - The z-axis component of the gyroscope reading. Null until the first reading.
- `timestamp` (DOMHighResTimeStamp | null) - The high-resolution timestamp of the last reading. Null until the first reading.
- `activated` (boolean) - Indicates if the gyroscope sensor is currently active.
- `hasReading` (boolean) - Indicates if the gyroscope sensor has ever provided a reading.

### Methods
- `start()`: Activates the gyroscope sensor. If already active, this is a no-op.
- `stop()`: Deactivates the gyroscope sensor. The last reading is cached. If already inactive, this is a no-op.

### Event Behavior
- Inherits from `EventTarget`.
- Supported event names: `activate`, `reading`, `error`.

#### `activate` Event
- Exposes `sessionId`.

#### `reading` Event
- Exposes `sessionId`, `x`, `y`, `z`, and `timestamp`.

#### `error` Event
- Exposes `sessionId`, `error`, and `message`.

### Behavior Notes
- The `frequency` option is a best-effort hint to the host.
- Initially, `activated` and `hasReading` are `false`.
- `x`, `y`, `z`, and `timestamp` are `null` until the first reading.
- The first successful reading sets `activated` and `hasReading` to `true`.
- `stop()` sets `activated` to `false` but retains the last reading.
```

--------------------------------

### wx Module

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Import and usage of the wx module for canvas context creation.

```APIDOC
## wx Module

### Description
Provides access to canvas contexts on the current page.

### Import
```javascript
import wx from 'wx';
```

### Usage
```javascript
const ctx = wx.createCanvasContext('chartCanvas');
```

### Notes
- `wx.createCanvasContext(canvasId)` looks up a `<canvas id="...">` node.
- Returns `null` if the page, node, or canvas cannot be found.
```

--------------------------------

### Create and Write to A2UI Context

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

Create an A2UI context for a specific component and write initial commands to it. Dynamic updates are handled through the A2UI runtime context.

```javascript
const ctx = a2ui.createA2UIContext('agent-view');
ctx.write(JSON.stringify([{ type: 'createSurface', surfaceId: 'main' }]));
```

--------------------------------

### UI Methods

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Methods for controlling the mini-program's user interface.

```APIDOC
## `wx.setBackgroundColor(options)`

### Description
Sets the background color of the mini-program window.

### Parameters
#### Path Parameters
- **options** (Object) - Required - Configuration options.
  - **backgroundColor** (string) - Optional - The background color.
  - **backgroundColorTop** (string) - Optional - The top background color.
  - **backgroundColorBottom** (string) - Optional - The bottom background color.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Reads `backgroundColor`, `backgroundColorTop`, and `backgroundColorBottom` fields from `options` when present.
- Calls `success()` and `complete()` when present.
- The current implementation does not expose a `fail()` path.
```

--------------------------------

### Text Component Example

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

The text component is used to display text content. It supports standard attributes like 'class' and 'style' for typography and alignment. Text content can be directly within the tags or interpolated.

```xml
<text class="headline">{{ greeting }}</text>
```

--------------------------------

### takePhoto(options)

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Initiates the process of taking a photo. This method requires an interactive call site and returns a Promise that resolves with the photo data and MIME type, or rejects if the operation fails.

```APIDOC
## takePhoto(options)

### Description
Initiates the process of taking a photo. This method requires an interactive call site and returns a Promise that resolves with the photo data and MIME type, or rejects if the operation fails.

### Method
`takePhoto`

### Parameters
#### Options
- **options** (object) - Required - Configuration options for taking a photo. Specific options are not detailed in the source.

### Return Behavior
- Returns a `Promise`.
- The promise resolves to an object with the following fields:
  - **data** (ArrayBuffer) - The photo data.
  - **mimeType** (string) - The MIME type of the photo.

### Error Behavior
- Throws an error when the interaction gate check fails.
- If the operation fails, the promise rejects with a generic exception.
```

--------------------------------

### Media runtime APIs

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Provides interfaces for handling media elements, specifically sound playback.

```APIDOC
## Media runtime APIs

### Description
Provides interfaces for handling media elements, specifically sound playback.

### Interface
- `Sound`
```

--------------------------------

### onKeyDown and onKeyUp Events

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Handles hardware key press and release events for immediate feedback and default behavior interception.

```APIDOC
## onKeyDown(event)

### Description
This method is useful for immediate feedback when a hardware key is pressed. It can be used for actions like moving focus or reacting to directional input. However, preventing `onKeyDown` does not stop the host's default key behavior, as those actions are processed on key release.

### Method
`onKeyDown(event)`

### Parameters
- **event** (object) - An object containing information about the key event. It includes a `code` property representing the pressed key.

### Request Example
```js
export default {
  data: {
    status: 'idle'
  },

  onKeyDown(event) {
    if (event.code === 'Enter') {
      this.setData({
        status: 'enter pressed'
      });
    }
  }
}
```

## onKeyUp(event)

### Description
This method is useful when the page needs to react after a key is released. It is also the effective interception point for key default behavior, as hosts evaluate actions like back, scroll, and activation on key release. Common `event.code` values include `Backspace`, `ArrowUp`, `ArrowDown`, `Enter`, and `GlobalHook`.

### Method
`onKeyUp(event)`

### Parameters
- **event** (object) - An object containing information about the key event. It includes a `code` property representing the released key. `event.preventDefault()` can be called to prevent default host behavior.

### Request Example
```js
export default {
  data: {
    status: 'idle'
  },

  onKeyUp(event) {
    switch (event.code) {
      case 'Backspace':
        event.preventDefault();
        this.setData({ status: 'back action intercepted' });
        break;
      case 'ArrowDown':
        this.setData({ status: 'arrow down received' });
        break;
      case 'Enter':
        this.setData({ status: 'enter released' });
        break;
      case 'GlobalHook':
        this.setData({ status: 'temple button touched' });
        break;
      default:
        break;
    }
  }
}
```
```

--------------------------------

### Router Methods

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Methods for navigating between pages within the mini-program.

```APIDOC
## `wx.navigateTo(options)`

### Description
Requests navigation to a new page.

### Parameters
#### Path Parameters
- **options** (Object) - Required - Configuration options.
  - **url** (string) - Required - The URL of the page to navigate to.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Requests page navigation.
- Calls `success()` and `complete()` when present.
```

```APIDOC
## `wx.redirectTo(options)`

### Description
Requests redirection to a new page, closing the current one.

### Parameters
#### Path Parameters
- **options** (Object) - Required - Configuration options.
  - **url** (string) - Required - The URL of the page to redirect to.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Requests page redirection.
- Calls `success()` and `complete()` when present.
```

```APIDOC
## `wx.navigateBack(options?)`

### Description
Requests backward navigation to a previous page.

### Parameters
#### Path Parameters
- **options** (Object) - Optional - Configuration options.
  - **delta** (number) - Optional - The number of pages to go back. Defaults to 1.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Requests backward navigation.
- Uses `delta = 1` when omitted.
- Calls `success()` and `complete()` when present.
```

--------------------------------

### Storage Methods (Async)

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Asynchronous methods for interacting with local storage.

```APIDOC
## `wx.setStorage(options)`

### Description
Asynchronously sets a key-value pair in local storage.

### Parameters
#### Path Parameters
- **options** (Object) - Required - Configuration options.
  - **key** (string) - Required - The key to store the data under.
  - **data** (any) - Required - The data to store. Will be JSON serialized.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **fail** (Function) - Optional - Callback function when the operation fails.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Requires storage support in the current context; throws if unavailable.
- Serializes `data` through JSON before storing.
- Calls `fail({ errMsg })` on storage errors if `fail` is present.
- Calls `complete()` after success or fail path if `complete` is present.
```

```APIDOC
## `wx.getStorage(options)`

### Description
Asynchronously retrieves data from local storage by key.

### Parameters
#### Path Parameters
- **options** (Object) - Required - Configuration options.
  - **key** (string) - Required - The key of the data to retrieve.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **fail** (Function) - Optional - Callback function when the operation fails.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Requires storage support in the current context; throws if unavailable.
- Calls `success({ data })` when the key exists.
- Calls `fail({ errMsg: 'Key not found' })` when the key does not exist.
- Calls `fail({ errMsg })` on other storage errors if `fail` is present.
- Calls `complete()` after success or fail path if `complete` is present.
```

```APIDOC
## `wx.removeStorage(options)`

### Description
Asynchronously removes a key-value pair from local storage.

### Parameters
#### Path Parameters
- **options** (Object) - Required - Configuration options.
  - **key** (string) - Required - The key of the data to remove.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **fail** (Function) - Optional - Callback function when the operation fails.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Requires storage support in the current context; throws if unavailable.
- Calls `success()` on success.
- Calls `fail({ errMsg })` on storage errors if `fail` is present.
- Calls `complete()` after success or fail path if `complete` is present.
```

```APIDOC
## `wx.clearStorage(options)`

### Description
Asynchronously clears all data from local storage.

### Parameters
#### Path Parameters
- **options** (Object) - Required - Configuration options.
  - **success** (Function) - Optional - Callback function when the operation is successful.
  - **fail** (Function) - Optional - Callback function when the operation fails.
  - **complete** (Function) - Optional - Callback function executed after the operation completes.

### Behavior Notes
- Requires storage support in the current context; throws if unavailable.
- Calls `success()` on success.
- Calls `fail({ errMsg })` on storage errors if `fail` is present.
- Calls `complete()` after success or fail path if `complete` is present.
```

--------------------------------

### WXML Conditional Rendering Directives

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Shows how to use ink:if, ink:elif, and ink:else directives in WXML for conditional rendering of components based on specified conditions.

```html
<view ink:if="{{condition === 1}}"> Rendered if condition is 1 </view>
<view ink:elif="{{condition === 2}}"> Rendered if condition is 2 </view>
<view ink:else> Rendered otherwise </view>
```

--------------------------------

### wx media APIs

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Provides access to media-related functionalities such as recording and camera contexts.

```APIDOC
## wx media APIs

### Description
Provides access to media-related functionalities such as recording and camera contexts.

### Methods
- `wx.media.getRecorderManager()`: Gets the RecorderManager instance.
- `wx.media.createCameraContext()`: Creates a CameraContext instance.
```

--------------------------------

### Storage Methods (Sync)

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Synchronous methods for interacting with local storage.

```APIDOC
## `wx.setStorageSync(key, data)`

### Description
Synchronously sets a key-value pair in local storage.

### Parameters
#### Path Parameters
- **key** (string) - Required - The key to store the data under.
- **data** (any) - Required - The data to store. Will be JSON serialized.

### Behavior Notes
- Serializes `data` through JSON before storing.

### Error Behavior
- Throws if storage support is unavailable.
- Throws if JSON serialization or storage write fails.
```

```APIDOC
## `wx.getStorageSync(key)`

### Description
Synchronously retrieves data from local storage by key.

### Parameters
#### Path Parameters
- **key** (string) - Required - The key of the data to retrieve.

### Returns
- (any) - The stored data, or `undefined` if the key does not exist.

### Behavior Notes
- Returns the parsed stored value when the key exists.
- Returns `undefined` when the key does not exist.

### Error Behavior
- Throws if storage support is unavailable.
- Throws if the stored JSON cannot be parsed.
```

```APIDOC
## `wx.removeStorageSync(key)`

### Description
Synchronously removes a key-value pair from local storage.

### Parameters
#### Path Parameters
- **key** (string) - Required - The key of the data to remove.

### Behavior Notes
- No specific behavior notes beyond error handling.

### Error Behavior
- Throws if storage support is unavailable.
- Throws on storage removal failure.
```

```APIDOC
## `wx.clearStorageSync()`

### Description
Synchronously clears all data from local storage.

### Parameters
- None

### Behavior Notes
- No specific behavior notes beyond error handling.

### Error Behavior
- Throws if storage support is unavailable.
- Throws on storage clear failure.
```

--------------------------------

### Import Sound from audio module

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Import the Sound class from the 'audio' module. This provides an alternative way to access sound functionalities.

```javascript
import { Sound } from 'audio';
```

--------------------------------

### Import and use BarcodeDetector from module

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Import BarcodeDetector from the 'barcode' module, both as a default and named export. Allows for creating detector instances.

```javascript
import BarcodeDetector, { BarcodeDetector as NamedBarcodeDetector } from 'barcode';

const detector = new BarcodeDetector();
const namedDetector = new NamedBarcodeDetector();
```

--------------------------------

### Check LanguageModel availability and create session globally

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Check the availability of the LanguageModel and create a new session using a specified model. The LanguageModel is available globally and exported by 'language-model'.

```javascript
const status = await LanguageModel.availability();
const session = await LanguageModel.create({ model: 'gpt-4o-mini' });
```

--------------------------------

### Initialize BarcodeDetector globally

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Instantiate the BarcodeDetector using its global constructor. This detector can be used to scan for barcodes.

```javascript
const detector = new BarcodeDetector();
```

--------------------------------

### Displaying Lottie Animations with `<lottie-view>`

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

Use `<lottie-view>` to display Lottie animations from various sources. Control playback, looping, and speed. For manual frame control, disable auto-play.

```xml
<lottie-view src="/assets/loading.json" auto-play="true" loop="true" class="loading"></lottie-view>
```

--------------------------------

### Import Web Speech API from speech module

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Import speech synthesis and recognition functionalities from the 'speech' module. This provides a structured way to access these APIs.

```javascript
import {
  speechSynthesis,
  SpeechSynthesisUtterance,
  SpeechRecognition,
} from 'speech';
```

--------------------------------

### Gradients and Patterns

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-canvas.md

Methods for creating gradients and patterns.

```APIDOC
## createLinearGradient(x0, y0, x1, y1)

### Description
Creates a linear gradient.

### Parameters
- **x0** (number) - The x-coordinate of the gradient's starting point.
- **y0** (number) - The y-coordinate of the gradient's starting point.
- **x1** (number) - The x-coordinate of the gradient's ending point.
- **y1** (number) - The y-coordinate of the gradient's ending point.

### Returns
- **CanvasGradient** - A CanvasGradient object.

## createRadialGradient(x0, y0, r0, x1, y1, r1)

### Description
Creates a radial gradient.

### Parameters
- **x0** (number) - The x-coordinate of the inner circle's center.
- **y0** (number) - The y-coordinate of the inner circle's center.
- **r0** (number) - The radius of the inner circle.
- **x1** (number) - The x-coordinate of the outer circle's center.
- **y1** (number) - The y-coordinate of the outer circle's center.
- **r1** (number) - The radius of the outer circle.

### Returns
- **CanvasGradient** - A CanvasGradient object.

## createPattern(image, repetition)

### Description
Creates a pattern with the specified image and repetition.

### Parameters
- **image** (CanvasImageSource) - The image to use for the pattern.
- **repetition** (string) - The repetition mode. Supported values are `"repeat"`, `"repeat-x"`, `"repeat-y"`, and `"no-repeat"`.

### Returns
- **CanvasPattern** - A CanvasPattern object.
```

--------------------------------

### Import wx module

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Import the wx module for accessing platform-specific APIs. The wx module currently exports only its default.

```javascript
import wx from 'wx';
```

--------------------------------

### Product Detail Page Schema

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Defines the structure for a product detail page, including title, price, image, and stock status.

```json
{
  "description": "Shows product information for an item, including title, price, primary image, and purchase status.",
  "schema": {
    "data": {
      "type": "object",
      "properties": {
        "title": {
          "type": "string",
          "description": "Product title"
        },
        "price": {
          "type": "number",
          "description": "Current selling price"
        },
        "imageUrl": {
          "type": "string",
          "description": "Primary product image URL"
        },
        "inStock": {
          "type": "boolean",
          "description": "Whether the product can be purchased"
        },
        "tags": {
          "type": "array",
          "description": "Short product labels shown near the title",
          "items": {
            "type": "string"
          }
        }
      },
      "required": ["title", "price", "imageUrl", "inStock"]
    }
  }
}
```

--------------------------------

### wx.speech.playTTS

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Plays text as speech using the Text-to-Speech (TTS) engine. Forwards the request to the speech subsystem. Returns an empty string if the utterance request cannot be created.

```APIDOC
## wx.speech.playTTS(text)

### Description
Plays the given text as speech.

### Method
`playTTS`

### Parameters
#### Path Parameters
- **text** (string) - Required - The text to be spoken.

### Return Behavior
- Returns a string.
- Returns an empty string if the utterance request cannot be created.
```

--------------------------------

### Sound API

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis.md

Playing sounds using the Sound API, available globally or via module import.

```APIDOC
## Sound API

### Description
API for playing audio clips.

### Global Constructor
```javascript
const click = new Sound('./click.wav');
```

### Module Import
```javascript
import { Sound } from 'audio';
```

### Notes
- `Sound` is available globally and as a named export from `'audio'`.
```

--------------------------------

### Base Methods

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-wx.md

Provides utility functions for common operations.

```APIDOC
## `wx.arrayBufferToBase64(buffer)`

### Description
Converts an ArrayBuffer to a base64 encoded string.

### Parameters
#### Path Parameters
- **buffer** (ArrayBuffer) - Required - The ArrayBuffer to convert.

### Error Behavior
- Throws if the `ArrayBuffer` is detached.
```

--------------------------------

### Path2D Constructor

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-canvas.md

Creates a new Path2D object. Can be initialized with no arguments, another Path2D object, or an SVG path string.

```APIDOC
## Path2D Constructor

### Description
Creates a new Path2D object. It can be initialized empty, by cloning another `Path2D` object, or by parsing an SVG path string. Providing any other constructor value will result in an error.

### Method
new Path2D

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **path** (Path2D) - Optional - Another Path2D object to clone.
- **svgPathString** (string) - Optional - An SVG path data string to parse.
```

--------------------------------

### Render UI with a2ui Component

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/components.md

Use the a2ui component to render UI described by A2UI command streams. The initial commands payload is consumed once per component instance.

```xml
<a2ui id="agent-view" commands="{{ initialUIJson }}" class="agent-surface"></a2ui>
```

--------------------------------

### Prompt Input and Rules

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/apis-ai.md

Defines the acceptable formats for prompt input and the rules applied during prompt processing.

```APIDOC
## Prompt Input and Rules

### Input Formats
- **string**: A simple text input.
- **LanguageModelMessage[]**: An array of message objects.

### Prompt-time Message Rules
- **String Input**: Normalized to a single message with `role: 'user'` and `content: string`.
- **Array Input Roles**: Only `user` and `assistant` roles are permitted.
- **System Role**: The `system` role is not allowed in per-request input.
- **Structured Content**: Content arrays are only supported for `user` messages.
```

--------------------------------

### Handle Key Press and Release Events in AIUI

Source: https://github.com/jsar-project/aiui/blob/main/skills/aiui-dev/SKILL.md

Use `onKeyDown` for immediate feedback and `onKeyUp` to intercept default host behaviors like back navigation or activation. The `event.code` property provides specific key information.

```javascript
export default {
  data: {
    status: 'idle'
  },

  onKeyDown(event) {
    if (event.code === 'Enter') {
      this.setData({
        status: 'enter pressed'
      });
    }
  },

  onKeyUp(event) {
    switch (event.code) {
      case 'Backspace':
        event.preventDefault();
        this.setData({ status: 'back action intercepted' });
        break;
      case 'ArrowDown':
        this.setData({ status: 'arrow down received' });
        break;
      case 'Enter':
        this.setData({ status: 'enter released' });
        break;
      case 'GlobalHook':
        this.setData({ status: 'temple button touched' });
        break;
      default:
        break;
    }
  }
}
```