Skip to content

code-interface.md

Latest commit

 

History

History
847 lines (635 loc) · 45.6 KB

code-interface.md

File metadata and controls

847 lines (635 loc) · 45.6 KB
Raw
title Draw in the interface with a mod
source https://code.claude.com/docs/en/plugins/mods/interface
category code
generated true

Documentation Index

Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt Use this file to discover all available pages before exploring further.

Draw in the interface with a mod

Draw panes, a band above the prompt, buttons, and text fields from a Claude Code mod, handle presses and input, and keep state between redraws and sessions.

A mod can draw its own interface in Claude Code and change parts of the interface Claude Code already draws. Each place a mod can draw is called a render site, such as a pane, the band above the prompt, or the spinner. Claude Code fires the ui.render event each time it's about to draw a render site, and your hook for that event returns what to draw there.

This map shows where a mod can draw in a terminal session:

Map of a Claude Code terminal session. A mod can add a pane as a sidebar on the right, a toast at the top right of the transcript, a log line in the transcript, a band above the prompt, and a status line under the prompt. A mod can redraw messages, tool call rows, and the spinner. The prompt is Claude Code's own.

Map of a Claude Code terminal session. A mod can add a pane as a sidebar on the right, a toast at the top right of the transcript, a log line in the transcript, a band above the prompt, and a status line under the prompt. A mod can redraw messages, tool call rows, and the spinner. The prompt is Claude Code's own.

In a narrower terminal, the pane sits above the prompt instead of beside the transcript.

Build your first mod before you start here. Begin with the worked example, which builds a pane with two tabs and a counter, then read the section for each piece you want to change.

To look up one prop or limit, see the [reference](/docs/en/plugins/mods/reference#render-sites).

Build a pane with tabs

In this section you build a mod that adds a /hello-tabs command, and the command opens a pane. A pane is a sidebar beside the transcript in a wide fullscreen terminal, or a framed region above the prompt otherwise. This pane shows two tabs, and the second tab has a button that adds one to a counter. The count is still there after you restart Claude Code.

The finished mod looks like this. The recording opens the pane, switches to the second tab, presses the button a few times, and returns to the first tab: