Component catalog
Three families: a Composer is the input surface for a request — prompt, attachments, model and param controls, submit; a Result renders and lets a person curate what came back; a Panel holds both beside your page. With the tokens and the core code for model calls, they make up the design system.
Figma
Design with these components in Figma: the Chai UI Kit has each one in its states, with every color, size and font as a Variable from the same tokens. Get the Chai UI Kit on Figma Community
Composers
Composer bar
A compose bar pattern for generative AI input — prompt field, media attachment, and submit as standard features; use case, model and aspect ratio selection, smart prompt optimization, automatic model routing, and abort as advanced ones.
Media analyzer
Generate an analysis of attached media (images, a video, or an audio clip) and transform the extracted details into a prompt. Includes analysis model selection, prompt length selection (terse, concise and detailed), and automatic media type detection.
Results
Result card
Displays the generated media result from the composer bar. Includes interface elements for download, share, like, dislike, redo and a more menu with configurable actions. An info button flips the card to display the prompt and model meta data.
Edit card
Combine this card with the composer bar in edit mode. Apply draggable bounding boxes to an image to create precise edit regions. Each region contains a prompt for the selected image editing model. Paginate from the original image to each edited image.