Apps SDK UI

Apps SDK UI is a design system specifically tailored for building high-quality applications within the ChatGPT Apps SDK. It provides the styling foundations and UI building blocks necessary to ensure apps feel native to the ChatGPT environment.

Key features include:

• Design tokens: Standardized values for colors, typography, spacing, sizing, shadows, and surfaces.
• Tailwind 4: A pre-configured version of Tailwind CSS that is integrated with Apps SDK UI's design tokens.
• Component library: A collection of accessible, high-quality components built on top of Radix UI.
• Utilities: Tools for managing dark mode, responsive layouts, and other common UI patterns.

The Menu component is designed for structured actions in a dropdown list. It consists of a Menu.Trigger (the element that opens the menu) and Menu.Content (the container for the menu items).

Important Accessibility Note: Menu prevents Tab presses from advancing focus. Because of this, Menu is not suitable for generic popover use-cases. For general popovers, use the Popover component instead.

<Menu>
  <Menu.Trigger>
    <button>Open Menu</button>
  </Menu.Trigger>
  <Menu.Content>
    <Menu.Item onSelect={() => console.log('Selected')}>Action</Menu.Item>
  </Menu.Content>
</Menu>

You can override the default appearance of the Select component by providing custom styling or rendering logic for the trigger and the dropdown options.

To customize the Trigger:

• Use triggerClassName for custom CSS classes.
• Use TriggerStartIcon to provide a leading icon.
• Use TriggerView to provide a custom rendering function for the selected state.

To customize the Options:

• Use optionClassName for custom CSS classes on individual items.
• Use OptionView to provide a custom rendering function for each option.
• Include description and tooltip fields within your options data to provide additional context for each item.

For advanced layouts, use <CodeBlockBase> for component composition. This allows you to wrap the code in custom markup (like a header or custom title bar) while still using the internal code rendering logic.

• Use <CodeBlockBase.Code> to render the actual code content with a specific language.
• Use <CodeBlockBase.CopyButton> if you want to include a copy functionality within your custom layout.

import { CodeBlockBase } from "@openai/apps-sdk-ui/components/CodeBlock";

const codeSnippet = 'const x = 10;';

return (
  <CodeBlockBase>
    <div className="custom-header">
      <span>typescript</span>
      <CodeBlockBase.CopyButton copyValue={codeSnippet} />
    </div>
    <CodeBlockBase.Code language="typescript">
      {codeSnippet}
    </CodeBlockBase.Code>
  </CodeBlockBase>
);

All floating UI components in the Apps SDK UI, including Popovers, can be infinitely nested. This is achieved through z-index: auto; and natural stacking order.

Key behavior:

• Esc keypresses are handled independently based on the stacking order, allowing users to close the topmost nested popover without closing all of them.

You can disable options at two levels:

1. Entire Group: Pass the disabled prop to the SegmentedControl root to disable all options within the control.
2. Individual Option: Pass the disabled prop to a specific SegmentedControl.Option to disable only that particular choice.

You can control the disabled state at both the group and individual item levels:

• Disable the entire group: Pass the disabled prop to the RadioGroup component to disable all radio options within that group.
• Disable a single item: Pass the disabled prop to a specific RadioGroup.Item to disable only that particular option.

You can customize the layout of the radio group using the following props:

• direction: Controls whether the items flow in a column or row. The component dynamically applies an optimal gap based on the chosen orientation.
• Complex Layouts: You can instrument complex layouts by leveraging component composition and using className overrides on the components.

You can customize the visual appearance of the SegmentedControl using the following props:

• size: Sets the height of the control. Each size provides default values for gutterSize, font-size, and border-radius.
• gutterSize: Sets the horizontal padding of the inner options. This can override the default provided by the size prop.
• pill: When enabled, creates a fully rounded control. It dynamically applies extra horizontal gutter to the inner options to maintain the pill shape.