Card renderer methods

Frontend card methods handle user configuration changes, parse terminal feeds for server URLs, and populate description fields in card details modals.

Server URL detection

LynxHub launches a companion browser tab automatically when a card starts its server process. To enable this, your card must inspect the console stream and locate the active address.

Method: catchAddress(line: string): string | undefined
Responsibility: Checks each incoming line of terminal output. Returns the web address (URL) if discovered.

Example

line => {
  const match = line.match(/Running on local URL:\s+(http:\/\/127\.0\.0\.1:\d+)/);
  return match ? match[1] : undefined;
};

Arguments serialization

If your card supports custom parameters, you must implement serialization methods. These serialize argument states into command parameters and reconstruct argument views from saved commands.

Methods: parseArgsToString(args: ChosenArgument[]): string and parseStringToArgs(args: string): ChosenArgument[]
Responsibility: Converts the React UI arguments state array into a single execution string, and parses configuration strings back into the UI state.

Example

const methods = {
  parseArgsToString: args => {
    return args.map(arg => `${arg.name} ${arg.value}`).join(' ');
  },
  parseStringToArgs: str => {
    // Reconstruct arguments array from saved string
    return [];
  },
};

You can populate metadata and status details dynamically when users open a card’s info dialog.

Method: cardInfo(api: CardInfoApi, callback: CardInfoCallback): void
Responsibility: Queries the local environment using the helper api parameter and pushes formatted fields to the view via the callback interface.

Example

async (api, callback) => {
  const folderSize = await api.getFolderSize(api.installationFolder);
  const gitTag = await api.getCurrentReleaseTag(api.installationFolder);

  callback.setDescription([
    {
      title: 'Storage Details',
      items: [
        {label: 'Size on Disk', result: `${(folderSize / (1024 * 1024)).toFixed(2)} MB`},
        {label: 'Release Version', result: gitTag},
      ],
    },
  ]);
};

Application

Plugins

AI Agents Setup

Card renderer methods

Server URL detection

Example

Arguments serialization

Example

Example

​Server URL detection

​Example

​Arguments serialization

​Example

​Card details modal

​Example

Server URL detection

Example

Arguments serialization

Example

Card details modal

Example