### Install Dependencies and Setup

Source: https://github.com/lynx-family/lynx-stack/blob/main/AGENTS.md

Install global corepack, enable it, and then install project dependencies using pnpm. This is a required first step for reliable builds.

```bash
npm install -g corepack
corepack enable
pnpm install --frozen-lockfile
```

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

### Create Lynx Library (Interactive)

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/lynx/create-lynx-library/README.md

Run this command to start the interactive setup for a new Lynx library. The tool will guide you through selecting features like Native Module, Element, or Service, and platforms such as Android or iOS.

```bash
npm create lynx-library
```

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

### Build and Run Example

Source: https://github.com/lynx-family/lynx-stack/blob/main/examples/react-externals/README.md

Commands to build the component library and start the development server. The dev server automatically serves the necessary ReactLynx runtime and component bundles.

```bash
pnpm build:comp-lib
pnpm dev
```

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

### Setup Project Dependencies

Source: https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md

Installs necessary Rust toolchains and project dependencies using pnpm. Ensure Node.js and pnpm are installed and Rustup is configured.

```sh
rustup toolchain install
pnpm install
```

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

### Install and Run A2UI CLI

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui-catalog-extractor/README.md

Install the genui package and run the A2UI CLI to get help. Add a script to your package.json to build the catalog.

```bash
genui a2ui --help
```

```json
{
  "scripts": {
    "build:catalog": "genui a2ui generate catalog --catalog-dir src/catalog --out-dir dist"
  }
}
```

```bash
pnpm build:catalog
```

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

### Production Build and Start

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/server/AGENTS.md

Build the production-ready server and then start it using pnpm commands.

```bash
pnpm build
pnpm start
```

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

### Start Development Server

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/create-rspeedy/template-common/AGENTS.md

Use this command to start the development server for local testing and iteration.

```bash
npm run dev
```

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

### Install Lynx Explorer PWA

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-explorer/index.html

Handles the 'beforeinstallprompt' event to show an install button and manage the PWA installation flow. Includes logic to fade out and hide the button after a delay or user interaction.

```javascript
window.addEventListener('load', () => {
  let deferredPrompt;
  const addBtn = document.getElementById('install-button');
  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    addBtn.style.display = 'block';
    setTimeout(() => {
      addBtn.classList.add('fade-out');
      setTimeout(() => {
        addBtn.style.display = 'none';
      }, 500);
    }, 5000);
    addBtn.addEventListener('click', () => {
      addBtn.style.display = 'none';
      deferredPrompt.prompt();
      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the install prompt');
        } else {
          console.log('User dismissed the install prompt');
        }
        deferredPrompt = null;
      });
    });
  });
  if (window.matchMedia('(display-mode: standalone)').matches) {
    console.log('PWA is installed');
  } else {
    console.log('PWA is not installed');
  }
});
```

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

### Start A2UI Playground

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui-playground/README.md

Starts the A2UI playground development server. The default URL is http://localhost:3000. This command should be run after starting the GenUI server.

```bash
pnpm -C packages/genui/a2ui-playground dev
```

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

### Install Dependencies with pnpm

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/create-rspeedy/template-common/README.md

Use this command to install all necessary project dependencies.

```bash
pnpm install
```

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

### Install Workspace Dependencies

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui-playground/README.md

Installs all necessary dependencies for the workspace. Run this command once when setting up the project.

```bash
pnpm install
```

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

### Build and Run Commands

Source: https://github.com/lynx-family/lynx-stack/blob/main/examples/template-webpack/README.md

Commands to build and run the template-webpack example locally.

```bash
pnpm build
pnpm dev
```

```bash
pnpm --dir examples/template-webpack build
pnpm --dir examples/template-webpack dev
```

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

### Install @lynx-js/motion

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/motion/README.md

Install the @lynx-js/motion package using npm.

```bash
npm install @lynx-js/motion
```

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

### Install Dependencies

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/i18n/i18next-translation-dedupe/README.md

Install the necessary i18next and related packages for deduplication and extraction.

```bash
npm install i18next
npm install -D @lynx-js/i18next-translation-dedupe rsbuild-plugin-i18next-extractor i18next-cli
```

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

### Install Dependencies and Run Tests

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/tailwind-preset/CONTRIBUTING.md

Commands to install project dependencies and run automated tests using pnpm.

```bash
pnpm install

pnpm test
```

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

### Start Development Server with pnpm

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/create-rspeedy/template-common/README.md

Run this command to start the local development server and view your Rspeedy application.

```bash
pnpm run dev
```

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

### Add Lynx Docs MCP Server using Codex CLI

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/mcp-servers/docs-mcp-server/README.md

Install the Lynx Docs MCP server using the Codex CLI. Follow the Codex MCP configuration guide for standard setup.

```bash
codex mcp add lynx-docs -- npx @lynx-js/docs-mcp-server@latest
```

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

### Example package.json

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/resolve.md

Illustrates the fields present in a package.json that are considered by `mainFields` resolution.

```json
{
  "name": "upstream",
  "lynx": "build/lynx.js",
  "module": "build/index.js"
}
```

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

### Install Rspeedy External Bundle Plugin

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/plugin-external-bundle/README.md

Install the Rspeedy external bundle plugin and the reactlynx preset if needed.

```bash
npm install -D @lynx-js/external-bundle-rsbuild-plugin
```

```bash
npm install -D @lynx-js/react-umd
```

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

### Initialize Markdown Component and Content

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-elements/tests/fixtures/x-markdown/text-selection.html

Sets up the markdown content and initializes the web component. This is the initial setup for most tests.

```javascript
const content = `# Title\n\nthis is **bold** and *italic*.

- item 1
- item 2

inline code: \
code\
.

\
\
\
block code
\
\
\
`;
const markdown = document.getElementById('markdown');
markdown.setAttribute('content', content);
```

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

### Using Less with ReactLynx

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/css.mdx

Example of importing Less files (both global and module-scoped) into your ReactLynx application. Requires installing and configuring the `@rsbuild/plugin-less`.

```jsx
import './global.less'
import styles from './button.module.less'

export function App() {
  return (
    <view className={styles.red}>
      <text className="title">Hello, Less</text>
    </view>
  )
}
```

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

### Install Lynx DevTool MCP Server using Gemini CLI (Project Wide)

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/mcp-servers/devtool-mcp-server/README.md

Install the Lynx DevTool MCP server for the current project using the Gemini CLI.

```bash
gemini mcp add lynx-devtool npx @lynx-js/devtool-mcp-server@latest
```

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

### Development Server Start

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/server/AGENTS.md

Run the development server using pnpm. The server defaults to listening on port 3060.

```bash
pnpm dev
```

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

### Install GenUI OpenUI

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/openui/README.md

Install the GenUI package, which includes the OpenUI renderer and related utilities.

```bash
pnpm add @lynx-js/genui
```

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

### Install and Use Speedscope

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/build-profiling.mdx

Install Speedscope globally using npm and then use it to view the generated cpuprofile file for detailed performance insights.

```bash
# Install speedscope
npm install -g speedscope

# View cpuprofile content
# Replace the name with the local file name
speedscope CPU.date.000000.00000.0.001.cpuprofile
```

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

### Install Lynx DevTool MCP Server using Gemini CLI (Globally)

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/mcp-servers/devtool-mcp-server/README.md

Install the Lynx DevTool MCP server globally for all projects using the Gemini CLI.

```bash
gemini mcp add -s user lynx-devtool npx @lynx-js/devtool-mcp-server@latest
```

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

### Install GenUI Package

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui/README.md

Install the published GenUI package in a ReactLynx app using pnpm.

```sh
pnpm add @lynx-js/genui @lynx-js/react
```

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

### Start GenUI Server

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui-playground/README.md

Starts the GenUI server on port 3060. Requires an OpenAI API key. This server handles agent responses and preview publishing.

```bash
OPENAI_API_KEY=sk-... pnpm -C packages/genui/server dev
```

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

### Install React Rsbuild Plugin

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/plugin-react/README.md

Install the plugin as a development dependency using npm.

```bash
npm install -D @lynx-js/react-rsbuild-plugin
```

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

### Rsbuild Dev Command Help

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/cli.md

View the available options for the `rspeedy dev` command, used for starting a local development server.

```text
➜ rspeedy dev --help

Usage: rspeedy dev [options]

Run the dev server and watch for source file changes while serving.

Options:
  --base <base>            specify the base path of the server
  --environment <name...>  specify the name of environment to build
  -c --config <config>     specify the configuration file, can be a relative or absolute path
  --env-mode <mode>        specify the env mode to load the .env.[mode] file
  --no-env                 disable loading `.env` files"
  -m --mode <mode>         specify the build mode, can be `development`, `production` or `none`
  -r --root <root>         set the project root directory (absolute path or relative to cwd)
  -h, --help               display help for command
```

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

### Install QR Code Rsbuild Plugin

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/plugin-qrcode/README.md

Install the QR code plugin as a development dependency using npm.

```bash
npm install -D @lynx-js/qrcode-rsbuild-plugin
```

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

### installLynxTestingEnv

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/testing-library/testing-environment/etc/testing-environment.api.md

Installs the Lynx testing environment into the global scope.

```APIDOC
## Function: installLynxTestingEnv

### Description
Installs the Lynx testing environment into the global scope, making its functionalities available globally.

### Parameters
- **target**: (typeof globalThis & { lynxEnv?: LynxEnv; lynxTestingEnv?: LynxTestingEnv; Node?: typeof Node; }) - The target global object to install the environment onto.
- **env**: LynxEnv - The Lynx environment configuration.
```

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

### Configure Vitest with Testing Library Plugin

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/react/testing-library/README.md

Setup Vitest by importing the `vitestTestingLibraryPlugin` from `@lynx-js/react/testing-library/plugins`. This integrates the testing library with Vitest.

```javascript
import { defineConfig } from 'vitest/config';
import { vitestTestingLibraryPlugin } from '@lynx-js/react/testing-library/plugins';

export default defineConfig({
  plugins: [
    vitestTestingLibraryPlugin(),
  ],
  test: {
    // ...
  },
});
```

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

### Install i18next

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/i18n.mdx

Use the PackageManagerTabs component to install the i18next package. Ensure you use a compatible version (e.g., v23.x.x) or polyfill Intl.PluralRules for v24+.

```bash
npm install i18next@^23.16.8
# or
yarn add i18next@^23.16.8
# or
pnpm add i18next@^23.16.8
```

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

### NAPI Modules Definition Example

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-rsbuild-plugin/README.md

Example of how to define custom NAPI modules for the Lynx Web Platform. This allows integration with Node.js native addons.

```typescript
// index.napi-modules.ts
export default {
  custom_module: function(NapiModules, NapiModulesCall) {
    return {
      async test(name) {
        console.log('CustomModule', NapiModules, NapiModulesCall);
      },
    };
  },
};
```

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

### Global CSS Example

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/css.mdx

Demonstrates how to use global CSS styles in ReactLynx by importing a CSS file directly into your JSX and applying classes.

```css
.red {
  background: red;
}

.red > text {
  color: blue;
}
```

```jsx
import './styles.css'

export default function App() {
  return (
    <view className="red">
      <text>Hello, ReactLynx!</text>
    </view>
  )
}
```

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

### Configure PostCSS with postcss.config.js

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/css.mdx

Example of configuring PostCSS plugins, such as `postcss-px-to-viewport`, in a `postcss.config.js` file.

```js
export default {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
}
```

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

### Create Rspeedy Project with npm create

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/create-rspeedy/README.md

Use this command to start a new Rspeedy project with the latest version.

```bash
npm create rspeedy@latest
```

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

### OpenUI DSL Syntax Example

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/openui/README.md

Illustrates the functional notation used in the OpenUI DSL for defining UI elements and their structure. Each statement assigns a component instance to an identifier.

```plaintext
root = Stack([header, card], "column", "l", "center")
header = TextContent("Choose Your Plan", "large-heavy")
card = Card([cardHeader, sep, features, btn], "card")
cardHeader = CardHeader("Pro", "For growing teams")
sep = Separator("horizontal", true)
features = Stack([f1, f2], "column", "s")
f1 = TextContent("✓  Unlimited projects")
f2 = TextContent("✓  Priority support")
btn = Buttons([Button("Start Trial", Action([@ToAssistant("start")]), "primary")])
```

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

### Add Lynx DevTool MCP Server using VS Code CLI

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/mcp-servers/devtool-mcp-server/README.md

Install the Lynx DevTool MCP server using the VS Code CLI. Refer to the MCP install guide for more information.

```bash
code --add-mcp '{"name":"lynx-devtool","command":"npx","args":["@lynx-js/devtool-mcp-server@latest"]}'
```

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

### Configure UI Plugin with Custom Options

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/tailwind-preset/README.md

Configure a UI plugin, like uiVariants, with custom options. This example shows how to set custom prefixes for the uiVariants plugin.

```typescript
createLynxPreset({
  lynxUIPlugins: {
    uiVariants: {
      prefixes: {
        ui: ['open', 'checked'],
      },
    },
  },
});
```

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

### Lynx Build Pipeline Steps

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/repl/README.md

Illustrates the standard 8 steps of a Lynx project build pipeline, from source transformation to emitting the final bundle.

```text
Step  What happens                        Tool / Plugin
────  ──────────────────────────────────   ─────────────────────────────
 1.   Source Transform (JSX/TS → JS)       rspack loader (SWC)
 2.   Module Resolution (import/require)   rspack resolver
 3.   CSS Processing (CSS → LynxStyleNode) @lynx-js/css-serializer
 4.   Bundling (multi-file → chunks)       rspack
 5.   Asset Tagging (lynx:main-thread)     MarkMainThreadPlugin
 6.   Template Assembly (assets → data)    LynxTemplatePlugin
 7.   Encoding (data → binary/JSON)        @lynx-js/tasm / WebEncodePlugin
 8.   Emit (write to disk)                 rspack compilation
```

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

### Using Sass with ReactLynx

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/css.mdx

Example of importing Sass files (both global and module-scoped) into your ReactLynx application. Requires installing and configuring the `@rsbuild/plugin-sass`.

```jsx
import './global.sass'
import styles from './button.module.scss'

export function App() {
  return (
    <view className={styles.red}>
      <text className="title">Hello, Sass</text>
    </view>
  )
}
```

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

### Quick Start: A2UI Integration

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui/README.md

Integrate A2UI into your ReactLynx app by creating a MessageStore, registering components, and handling actions. This example demonstrates sending a prompt to an Agent and rendering the response.

```tsx
import {
  A2UI,
  Button,
  Text,
  basicFunctions,
  createMessageStore,
  normalizePayloadToMessages,
} from '@lynx-js/genui/a2ui';

const store = createMessageStore();
const catalogs = [Text, Button, ...basicFunctions];

async function sendPrompt(input: string) {
  const res = await fetch('/a2ui/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages: [{ role: 'user', content: input }] }),
  });

  store.push(normalizePayloadToMessages(await res.json()));
}

<A2UI
  messageStore={store}
  catalogs={catalogs}
  wrapSurface={(children) => <view className='a2ui-light'>{children}</view>}
  onAction={(action) => {
    void fetch('/a2ui/action', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(action),
    })
      .then((res) => res.json())
      .then((payload) => store.push(normalizePayloadToMessages(payload)));
  }}
/>;
```

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

### Add Lynx DevTool MCP Server using Codex CLI

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/mcp-servers/devtool-mcp-server/README.md

Install the Lynx DevTool MCP server using the Codex CLI. Follow the advanced MCP guide for configuration.

```bash
codex mcp add lynx-devtool -- npx @lynx-js/devtool-mcp-server@latest
```

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

### Build for Production

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/create-rspeedy/template-common/AGENTS.md

Execute this command to build the application for production deployment.

```bash
npm run build
```

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

### Add Lynx Docs MCP Server using VS Code CLI

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/mcp-servers/docs-mcp-server/README.md

Install the Lynx Docs MCP server using the VS Code CLI. Refer to the VS Code MCP server guide for detailed instructions.

```bash
code --add-mcp '{"name":"lynx-docs","command":"npx","args":["@lynx-js/docs-mcp-server@latest"]}'
```

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

### Kitten-Lynx Example Test Script with Vitest

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/testing-library/kitten-lynx/README.md

This script demonstrates setting up Kitten-Lynx, navigating to a bundle, locating elements, reading attributes and styles, and simulating taps. Ensure prerequisites like ADB and Lynx Explorer are set up.

```typescript
import { expect, test, beforeAll, afterAll } from 'vitest';
import { Lynx } from '@lynx-js/kitten-lynx-test-infra';
import type { KittenLynxView } from '@lynx-js/kitten-lynx-test-infra';

let lynx: Lynx;
let page: KittenLynxView;

// Setup: Connect to device
beforeAll(async () => {
  // Connects to the first available ADB device and opens com.lynx.explorer
  lynx = await Lynx.connect();
  page = await lynx.newPage();
}, 60000); // Give ADB enough time to boot!

// Teardown: Clean up resources
afterAll(async () => {
  await lynx.close();
});

test('Basic Navigation and Interaction', async () => {
  // 1. Navigate to the bundle (Will poll until the session is found)
  await page.goto('http://10.0.2.2:8080/dist/main.lynx.bundle');

  // 2. Locate an element by CSS Selector
  const button = await page.locator('#submit-btn');
  expect(button).toBeDefined();

  // 3. Read an attribute.
  // (Note: 'id' maps internally to Lynx's 'idSelector')
  const idValue = await button!.getAttribute('id');
  expect(idValue).toBe('submit-btn');

  // 4. Read computed CSS styles
  const styles = await button!.computedStyleMap();
  expect(styles.get('display')).toBe('flex');

  // 5. Simulate a native tap
  await button!.tap();

  // 6. Assert DOM changes (re-query the new element)
  const successText = await page.locator('.success-message');
  expect(successText).toBeDefined();
}, 30000);

```

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

### A2UI Client Runtime Setup and Rendering

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui/docs/overview.md

Set up the message store, define allowed components and functions, and render the A2UI component. The onAction callback handles user interactions by sending actions back to the Agent and updating the store with the response.

```tsx
import {
  A2UI,
  basicFunctions,
  Button,
  createMessageStore,
  normalizePayloadToMessages,
  Text,
} from '@lynx-js/genui/a2ui';

// 1. A buffer your transport writes raw protocol messages into.
const store = createMessageStore();

// 2. The components and functions generated UI is allowed to use.
const catalogs = [Text, Button, ...basicFunctions];

// 3. Send a prompt and push the Agent's reply into the store.
async function sendPrompt(input: string) {
  const res = await fetch('/a2ui/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages: [{ role: 'user', content: input }] }),
  });
  store.push(normalizePayloadToMessages(await res.json()));
}

// 4. Render. onAction round-trips user taps back to the Agent.
<A2UI
  messageStore={store}
  catalogs={catalogs}
  onAction={(action) => {
    void fetch('/a2ui/action', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(action),
    })
      .then((res) => res.json())
      .then((payload) => store.push(normalizePayloadToMessages(payload)));
  }}
/>;
```

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

### Install Rspeedy Plugin Config

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/plugin-config/README.md

Install the Rspeedy plugin configuration as a development dependency using npm.

```bash
npm install -D @lynx-js/config-rsbuild-plugin
```

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

### Preview Production Build

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/create-rspeedy/template-common/AGENTS.md

Locally preview the production build of the application before deploying.

```bash
npm run preview
```

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

### Install Dependencies After Upgrade

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/upgrade-rspeedy/README.md

After updating package.json with the upgrade command, run your package manager to install the new dependencies.

```bash
npm install
```

```bash
yarn install
```

```bash
pnpm install
```

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

### GenUI CLI Help

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/README.md

View help information for the GenUI CLI and its related binaries.

```bash
genui --help
genui-cli --help
a2ui-catalog-extractor --help
```

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

### Build Publishable Bundle

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui-prompt/README.md

Use this command to build the publishable bundle for the `@lynx-js/genui/a2ui-prompt` package. This is typically done before publishing or for local testing.

```bash
pnpm -C packages/genui/a2ui-prompt build
```

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

### Basic GenUI CLI Usage

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/cli/README.md

Illustrates the general command structure for the GenUI CLI. Use this to understand how to invoke different commands and namespaces.

```bash
genui <namespace> <command> [options]
```

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

### Install Type Check Plugin

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/typescript.md

Install the `@rsbuild/plugin-type-check` package as a development dependency to enable TypeScript type checking in your Rspeedy project.

```bash
pnpm add -D @rsbuild/plugin-type-check
```

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

### Build Script

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/react-umd/README.md

Command to build the project, generating ReactLynx runtime bundles.

```bash
pnpm build
```

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

### Install Rust and Wasm Target

Source: https://github.com/lynx-family/lynx-stack/blob/main/AGENTS.md

Use this command to install the Rust toolchain and add the wasm32-unknown-unknown target, necessary for WebAssembly compilation.

```bash
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustup target add wasm32-unknown-unknown
```

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

### Create i18next instance and initialize

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/i18n.mdx

Set up an i18next instance, import locale resources, and initialize the instance with the desired language and resources. Use `compatibilityJSON: 'v3'` for i18next v23.x.x to avoid issues with the missing Intl.PluralRules API in Lynx.

```typescript
import i18next from 'i18next';
import type { i18n } from 'i18next';

import enTranslation from './locales/en.json';

const localI18nInstance: i18n = i18next.createInstance();

localI18nInstance.init({
  lng: 'en',
  // The default JSON format needs `Intl.PluralRules` API, which is currently unavailable in Lynx.
  compatibilityJSON: 'v3',
  resources: {
    en: {
      translation: enTranslation, // `translation` is the default namespace
    },
  },
});

export { localI18nInstance as i18n };
```

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

### Install Type Checking Plugin

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/installation.mdx

Install the `@rsbuild/plugin-type-check` to enable type checking within your Rspeedy project. This is an optional step for enhanced code quality.

```bash
npm install -D @rsbuild/plugin-type-check
```

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

### Install Lynx Testing Environment

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/testing-library/testing-environment/etc/testing-environment.api.md

Installs the Lynx testing environment into the global scope. This function is essential for setting up the testing environment before running tests.

```typescript
export function installLynxTestingEnv(target: typeof globalThis & {
    lynxEnv?: LynxEnv;
    lynxTestingEnv?: LynxTestingEnv;
    Node?: typeof Node;
}, env: LynxEnv): void;
```

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

### Rsbuild Preview Command Help

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/cli.md

Understand the options for the `rspeedy preview` command, used to locally preview production build outputs after running `rspeedy build`.

```text
➜ rspeedy preview --help

Usage: rspeedy preview [options]

Preview the production build outputs locally.

Options:
  --base <base>         specify the base path of the server
  -c --config <config>  specify the configuration file, can be a relative or absolute path
  --env-mode <mode>     specify the env mode to load the .env.[mode] file
  --no-env              disable loading `.env` files"
  -m --mode <mode>      specify the build mode, can be `development`, `production` or `none`
  -r --root <root>      set the project root directory (absolute path or relative to cwd)
  -h, --help            display help for command
```

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

### Build Performance Summary with Turbo

Source: https://github.com/lynx-family/lynx-stack/blob/main/AGENTS.md

Use this command to view build performance metrics. It helps in identifying bottlenecks and optimizing the build process.

```bash
pnpm turbo build --summarize
```

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

### Initialize and Configure X-Markdown Menu

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-elements/tests/fixtures/x-markdown/menu.html

Sets up the content for the x-markdown element and initializes event listeners for selection changes and mouse events to control the visibility and position of a context menu.

```javascript
const content = 
# Title\n\nthis is **bold** and *italic*.

this paragraph is used to verify menu positioning.

const markdown = document.getElementById('markdown');
const menu = document.getElementById('menu');
let isPointerSelecting = false;
const getSelection = () => ( markdown.shadowRoot?.getSelection?.() ?? document.getSelection() );
const isSelectingMarkdown = (event) => event.composedPath?.().includes(markdown) ?? false;
const setRange = (selector, start, end) => {
  const textNode = markdown.shadowRoot?.querySelector(selector) 
    ?.firstChild;
  if (!textNode) {
    throw new Error(`missing text node for ${selector}`);
  }
  const selection = getSelection();
  if (!selection) {
    throw new Error('missing selection');
  }
  const range = document.createRange();
  range.setStart(textNode, start);
  range.setEnd(textNode, end);
  selection.removeAllRanges();
  selection.addRange(range);
};
const hideMenu = () => {
  menu.style.visibility = 'hidden';
};
const updateMenu = (detail) => {
  if (detail.start === -1 || detail.end === -1) {
    hideMenu();
    return;
  }
  const rect = markdown.getTextBoundingRect({
    start: detail.start,
    end: detail.end,
  })?.boundingRect;
  if (!rect) {
    hideMenu();
    return;
  }
  menu.style.left = `${rect.left + rect.width / 2 - 30}px`;
  menu.style.top = `${rect.top + rect.height / 2 - 10}px`;
  menu.style.visibility = 'visible';
};
const syncMenu = () => {
  updateMenu(window._menu_detail ?? { start: -1, end: -1 });
};
window._menu_detail = null;
window._selectShadowText = (selector, start, end) => {
  setRange(selector, start, end);
  document.dispatchEvent(new Event('selectionchange'));
};
window._selectShadowTextByMouseup = (selector, start, end) => {
  setRange(selector, start, end);
  document.dispatchEvent(new Event('selectionchange'));
  document.dispatchEvent(
    new MouseEvent('mouseup', { bubbles: true }),
  );
};
window._selectShadowTextToMenu = () => {
  const textNode = markdown.shadowRoot?.querySelector('h1') 
    ?.firstChild;
  const menuTextNode = menu.querySelector('span:last-child') 
    ?.firstChild;
  if (!textNode || !menuTextNode) {
    throw new Error('missing selection nodes');
  }
  const selection = getSelection();
  if (!selection) {
    throw new Error('missing selection');
  }
  const range = document.createRange();
  range.setStart(textNode, 0);
  range.setEnd(menuTextNode, menuTextNode.textContent?.length ?? 0);
  selection.removeAllRanges();
  selection.addRange(range);
  document.dispatchEvent(new Event('selectionchange'));
};
window._clearShadowText = () => {
  const selection = getSelection();
  selection?.removeAllRanges();
  document.dispatchEvent(new Event('selectionchange'));
};
window._getMenuState = () => ({
  visibility: getComputedStyle(menu).visibility,
  left: getComputedStyle(menu).left,
  top: getComputedStyle(menu).top,
  labels: Array.from(menu.querySelectorAll('span')).map((node) => node.textContent?.trim() ?? '' ),
  detail: window._menu_detail,
  selectedText: markdown.getSelectedText(),
});
document.addEventListener('mousedown', (event) => {
  if (!isSelectingMarkdown(event)) {
    return;
  }
  isPointerSelecting = true;
  hideMenu();
});
document.addEventListener('mouseup', () => {
  if (!isPointerSelecting) {
    return;
  }
  isPointerSelecting = false;
  syncMenu();
});
markdown.addEventListener('bindselectionchange', (event) => {
  window._menu_detail = event.detail;
  if (isPointerSelecting) {
    hideMenu();
    return;
  }
  updateMenu(event.detail);
});
markdown.setAttribute('content', content);
```

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

### Linear Gravity Start Alignment

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-elements/tests/fixtures/scroll-view/scroll-view-linear-gravity.html

Sets CSS custom properties for aligning content to the start of the main axis, applicable to both columns and rows. This is often the default behavior.

```css
.linear-gravity-start { --justify-content-column: flex-start; --justify-content-column-reverse: flex-start; --justify-content-row: flex-start; --justify-content-row-reverse: flex-start; }
```

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

### Native Modules Definition Example

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-rsbuild-plugin/README.md

Example of how to define custom native modules for the Lynx Web Platform. This structure allows you to expose native functionalities to your web application.

```typescript
// index.native-modules.ts
export default {
  CustomModule: function(NativeModules, NativeModulesCall) {
    return {
      async getColor(data, callback) {
        const color = await NativeModulesCall('getColor', data);
        callback(color);
      },
    };
  },
};
```

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

### Bundle Web Core with Project

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-core/README.md

Import the web core client and render a lynx-view component. Ensure the URL points to your main thread JavaScript file.

```javascript
import '@lynx-js/web-core/client';

document.body.innerHTML = `
<lynx-view 
  style="height:100vh; width:100vw;"
  url="http://localhost:3000/main/main-thread.js">
</lynx-view>`;
```

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

### Generate All Platforms

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/lynx/create-lynx-library/README.md

Use the `--platforms all` flag to generate native directories for all supported native platforms.

```bash
npm create lynx-library -- --platforms all
```

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

### Example A2UI JSON Output

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui/docs/system-prompts.md

The model should return a JSON array of A2UI messages, not Markdown or prose. This example shows the structure for creating a surface and updating components.

```json
[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "https://a2ui.org/specification/v0_9/basic_catalog.json"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Text",
          "text": "Hello A2UI"
        }
      ]
    }
  }
]
```

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

### Append Instructions to A2UI System Prompt

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui/docs/system-prompts.md

Generate a system prompt and append custom deployment-specific instructions to it, saving the result to a file.

```bash
npx @lynx-js/genui a2ui generate prompt \
  --appendix "Prefer compact mobile layouts for travel booking flows." \
  --out dist/a2ui-system-prompt.txt
```

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

### Initialize LynxTestingEnv

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/testing-library/testing-environment/README.md

Instantiate the LynxTestingEnv with a jsdom window. This is the primary way to set up the testing environment.

```javascript
import { LynxTestingEnv } from '@lynx-js/testing-environment';
import { JSDOM } from 'jsdom';

const lynxTestingEnv = new LynxTestingEnv({ window: new JSDOM().window });
```

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

### Rsbuild Build Command Help

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/cli.md

Explore the options for the `rspeedy build` command, which compiles the project for production.

```text
➜ rspeedy build --help

Usage: rspeedy build [options]

Build the project in production mode

Options:
  --environment <name...>  specify the name of environment to build
  --watch                  Enable watch mode to automatically rebuild on file changes
  -c --config <config>     specify the configuration file, can be a relative or absolute path
  --env-mode <mode>        specify the env mode to load the .env.[mode] file
  --no-env                 disable loading `.env` files"
  -m --mode <mode>         specify the build mode, can be `development`, `production` or `none`
  -r --root <root>         set the project root directory (absolute path or relative to cwd)
  -h, --help               display help for command
```

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

### Get Known Fields

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/tools/debug-metadata/etc/debug-metadata.api.md

Returns an array of strings representing the names of all known fields that can be resolved from debug metadata.

```typescript
// @public
export function knownFields(): string[];
```

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

### LynxCacheEventsPluginOptions Interface

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/webpack/cache-events-webpack-plugin/etc/cache-events-webpack-plugin.api.md

Defines the options available for the LynxCacheEventsPlugin. The `setupListTransformer` function can be provided to modify the list of setup items.

```typescript
// @public
export interface LynxCacheEventsPluginOptions {
    setupListTransformer?: (setupList: string[]) => string[];
}
```

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

### Configure Producer Project Build

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/code-splitting.md

Set up the `lynx.config.consumer.js` file for the producer project. Specify the entry point and include the React Lynx plugin for the build process.

```js
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
import { defineConfig } from '@lynx-js/rspeedy';

export default defineConfig({
  source: {
    entry: './src/Consumer.tsx',
  },
  plugins: [
    pluginReactLynx(),
  ],
});

```

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

### CSS Modules - Basic Usage

Source: https://github.com/lynx-family/lynx-stack/blob/main/website/docs/en/guide/css.mdx

Demonstrates how to define and import CSS Modules for locally scoped styles. Use the `[name].module.css` filename convention.

```css
.red {
  background: red;
}
```

```jsx
import styles from './button.module.css'

export function Button() {
  return (
    <view className={styles.red}>
      <text>Button</text>
    </view>
  )
}
```

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

### Get Player Info from x-audio-tt

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/web-platform/web-elements/tests/fixtures/x-audio-tt/method-player-info.html

Attaches an event listener to a button to retrieve and log player information from the x-audio-tt component.

```javascript
document.querySelector('#playerInfo').addEventListener( 'click', function() { console.log(document.querySelector('x-audio-tt').playerInfo()); }, );
```

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

### Add Lynx Docs MCP Server using Gemini CLI (Globally)

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/mcp-servers/docs-mcp-server/README.md

Install the Lynx Docs MCP server globally for your user using the Gemini CLI. This makes the server available across all your projects.

```bash
gemini mcp add -s user lynx-docs npx @lynx-js/docs-mcp-server@latest
```

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

### Use OpenUI v0.5 Runtime with Queries and Mutations

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/openui/README.md

Utilize the `response` renderer entry point for v0.5 features, enabling dynamic UI generation with `Query()`, `Mutation()`, `$variables`, and runtime expression evaluation. This example demonstrates a simple list display and save functionality.

```tsx
const ui = `
$title = ""
data = Query("list_items", { search: $title }, { rows: [] })
save = Mutation("save_item", { title: $title })
root = Stack([
  TextContent("Rows: " + @Count(data.rows)),
  Button("Save", Action([@Run(save), @Run(data), @Reset($title)]))
])
`.trim();

<OpenUiRenderer
  response={ui}
  library={library}
  toolProvider={{
    list_items: async (args) => ({ rows: [] }),
    save_item: async (args) => ({ ok: true }),
  }}
  onStateUpdate={(state) => persist(state)}
  initialState={{ $title: 'Draft' }}
/>;
```

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

### Configure rstest with Default Config

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/react/testing-library/README.md

Setup rstest for library projects using `withDefaultConfig` from `@lynx-js/react/testing-library/rstest-config`. This applies testing-library defaults.

```typescript
import { defineConfig } from '@rstest/core';
import { withDefaultConfig } from '@lynx-js/react/testing-library/rstest-config';

export default defineConfig({
  extends: withDefaultConfig(),
});
```

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

### Build A2UI System Prompt with Appendix

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/a2ui/docs/system-prompts.md

Extend the default prompt by adding request- or deployment-specific instructions via the 'appendix' option. Instructions should be newline-separated.

```typescript
import { buildA2UISystemPrompt } from '@lynx-js/genui/a2ui-prompt';

const systemPrompt = buildA2UISystemPrompt({
  appendix: [
    'Prefer concise mobile-first layouts.',
    'When the user asks for charts, use LineChart only when numeric series are available.',
  ].join('\n'),
});
```

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

### Create New A2UI Project

Source: https://github.com/lynx-family/lynx-stack/blob/main/packages/genui/cli/README.md

Command to create a new A2UI project. It defaults to the 'my-a2ui-app' directory name and the 'default' template. Ensure the target directory is empty before execution.

```bash
genui a2ui create my-a2ui-app
cd my-a2ui-app
pnpm install
pnpm run dev
```