Displays

Render formatted output from runs
Airplane's display SDKs provide utilities for rendering formatted content within the run UI. This is commonly used to surface contextual information about a run to operators.
See Displays documentation to learn more.

File
Creates a display that renders a file and allows users to download it from the UI. If the file is a text, csv, image, video, or audio file, it will be rendered inline in the UI.
typescript
Copied
1
// First ask the user for a file.
2
const { photo } = await airplane.prompt({ photo: "upload" });
3


4
// Then display it in the UI
5
await airplane.display.file(photo);
airplane.display.file(file)
file
REQUIRED
AirplaneFile

The file to render, as a download link. If the file is a text, csv, image, video, or audio file, it will also be shown inline alongside the download link.

JSON
Creates a display that renders a JSON document with syntax highlighting.
typescript
Copied
1
await airplane.display.json(httpResponse);
airplane.display.json(data)
data
REQUIRED
unknown

The object to render.

Table
Creates a display that renders a list of rows in a table.
typescript
Copied
1
await airplane.display.table(users);
airplane.display.table(rows, opts)
rows
REQUIRED
Record<string, unknown>[]

The list of rows to render in the table. Each row should be an object mapping header slugs to values. Columns that are not specified will default to None. The selection, ordering, and naming of columns can be customized via opts.columns.

opts.columns
optional
Default
inferred from rows
TableOptions<TColumnSlug>

Declares the list of columns to include in the table. The order of columns in this list determines the order of columns when rendering the table. Each column can optionally specify a human-readable name that will be used when rendering the table. The name defaults to the slug. Columns found in rows that are not included in columns will not be rendered.

If not specified, columns are inferred automatically from the provided rows:

  • The set of columns is the union of all keys across all rows.
  • The column order is inferred from the key order of the first row. All other columns not present in the first row are ordered after.
  • Columns are named by their slug.

Override column names
Columns names are inferred from the object keys of rows. These can be overridden with opts.columns.
typescript
Copied
1
await airplane.display.table(users, {
2
  columns: [
3
    { name: "Username", slug: "name" },
4
    { name: "Email", slug: "email" },
5
  ],
6
});

Text
Creates a display that renders markdown-rendered text.
typescript
Copied
1
await airplane.display.text(`Found **${users.length}** users from team "${team.name}".`);
airplane.display.text(content)
content
REQUIRED
string

The markdown-formatted content to render. See the CommonMark docs for an introduction to markdown formatting.

PrivacyTermsSupport