UI Components for Agents

Spikefrost provides special UI components that agents can render in the chat window by outputting specific message formats.

Approval Buttons

Display interactive buttons in the chat that either send messages back to Claude or execute local actions.

[[APPROVAL:(color|action|label)|(color|action|label)|...]]

Parameter	Description
`color`	Button color: `red`, `green`, `yellow`, `blue`, `gray`
`action`	Identifier (sends label to Claude) or `action:name:param` (executes local action)
`label`	Button text displayed to user

Buttons that send the label text back to Claude when clicked.

[[APPROVAL:(green|accept|I Accept)|(red|cancel|Cancel)]]

Result: Two buttons appear. Clicking "I Accept" sends that text to Claude.

Buttons that execute local commands instead of sending messages to Claude.

action:actionName           → Action with no parameter
action:actionName:parameter → Action with parameter

Action	Parameter	Description
`openEditor`	Path (optional)	Opens a folder in VS Code. Uses project folder if no path specified.
`dismiss`	None	Hides the buttons without sending a message.

Open current project folder:

[[APPROVAL:(blue|action:openEditor|Open in VS Code)]]

Open specific path:

[[APPROVAL:(blue|action:openEditor:/Users/john/Projects/myapp|Open Project)]]

Mixed buttons (action + message):

[[APPROVAL:(blue|action:openEditor:/path/to/folder|Open in VS Code)|(red|cancel|Cancel)|(green|accept|Accept)]]

Color	Use Case
`green`	Positive actions (Accept, Confirm, Yes)
`red`	Negative actions (Cancel, Reject, Delete)
`blue`	Neutral actions (Open, View, Info)
`yellow`	Warning actions (Proceed with caution)
`gray`	Dismiss or secondary actions

Keep it simple – Use 2-3 buttons maximum
Clear labels – Button text should clearly describe the action
Standalone syntax – Output the [[APPROVAL:...]] as its own line/paragraph
Use action buttons – For local commands, avoid sending unnecessary messages back to Claude