# How Pi Web Implements Extension UI Context Bindings (select, confirm, input, editor)
> Learn how Pi Web uses context bindings like select, confirm, input, and editor to manage UI interactions, routing JSON-RPC requests for seamless agent execution.
- Repository: [Alex Yang/pi-web](https://github.com/agegr/pi-web)
- Tags: internals
- Published: 2026-07-25
---
**Pi Web implements extension UI context bindings by routing JSON-RPC requests from agents through an RPC manager to a React dialog queue, rendering modality-specific interfaces for select, confirm, input, and editor interactions before returning user responses to resume agent execution.**
The `agegr/pi-web` repository provides a browser-based interface for AI agents that requires seamless user interaction without breaking execution flow. This article examines how the codebase implements **extension UI context bindings** to handle four core interaction patterns—select, confirm, input, and editor—allowing running skills to pause, collect user input, and resume operation.
## Extension UI Request Architecture
The system relies on a bidirectional JSON-RPC channel where agents emit **ExtensionUiRequest** messages that the frontend renders as modal dialogs. When a skill or plugin needs user input, it dispatches a request with a specific `method` field—`select`, `confirm`, `input`, or `editor`—containing UI-specific parameters like `title`, `message`, `options`, `placeholder`, or `prefill`.
### Request Creation in Agent Code
Agent-side code constructs these requests and awaits responses through an async wrapper. The payload structure varies by interaction type: select requests include an `options` array, while input and editor requests may specify `placeholder` text or `prefill` content.
```ts
// lib/skill-example.ts
import { sendExtensionUiRequest } from "./rpc-manager";
export async function askUserForName() {
const request = {
method: "input",
title: "Enter your name",
message: "What should we call you?",
placeholder: "Your name…",
prefill: "",
};
const { value } = await sendExtensionUiRequest(request);
return value; // e.g. "Alice"
}
```
### RPC Routing and Session Management
Incoming RPC payloads arrive at [`lib/rpc-manager.ts`](https://github.com/agegr/pi-web/blob/main/lib/rpc-manager.ts), which forwards them to the active `AgentSession`. The session handler treats the payload as an `ExtensionUiRequest` and pushes it onto a **dialog queue** maintained in the application state. This queue drives the modal rendering logic in [`components/ChatWindow.tsx`](https://github.com/agegr/pi-web/blob/main/components/ChatWindow.tsx).
## Rendering Extension Dialogs in ChatWindow
The `ExtensionDialog` component in [`components/ChatWindow.tsx`](https://github.com/agegr/pi-web/blob/main/components/ChatWindow.tsx) (lines 667–720) serves as the primary renderer for all four interaction types. It initializes local state from the request properties—using `prefill` content for editor mode or empty strings for other modes—and manages the `onRespond` callback that transmits user actions back to the agent.
```tsx
// components/ChatWindow.tsx (excerpt)
type ExtensionDialogRequest = Extract<
ExtensionUiRequest,
{ method: "select" | "confirm" | "input" | "editor" }
>;
function ExtensionDialog({
request,
onRespond,
}: {
request: ExtensionDialogRequest;
onRespond: (
req: ExtensionDialogRequest,
resp:
| { value: string }
| { confirmed: boolean }
| { cancelled: true }
) => void;
}) {
const [value, setValue] = useState(
request.method === "editor" ? request.prefill ?? "" : ""
);
const submitValue = () => {
if (request.method === "confirm") {
onRespond(request, { confirmed: true });
} else {
onRespond(request, { value });
}
};
// ...
}
```
## UI Mode Implementations
Each binding type renders distinct controls but shares the same response pipeline through `onRespond`.
### Select Bindings
**Select** bindings render each option as a full-width button within a CSS grid layout. Clicking an option immediately calls `onRespond(request, { value: option })`, transmitting the selection back through the RPC channel without additional confirmation steps.
```tsx
{request.method === "select" && (
{request.options.map((option) => (
))}
)}
```
### Confirm Dialogs
For `confirm` requests, the component displays the provided message alongside an **OK** button. When clicked, `onRespond` fires with `{ confirmed: true }`, allowing the agent to proceed with the approved action. The pattern appears in [`components/SessionSidebar.tsx`](https://github.com/agegr/pi-web/blob/main/components/SessionSidebar.tsx) (lines 660–678) for destructive actions like worktree removal.
### Input Fields
**Input** requests generate a single-line text field. The component monitors for **Enter** key presses to trigger `submitValue`, which returns `{ value: string }` to the awaiting agent. This provides a lightweight mechanism for collecting short text responses like filenames or search queries.
### Multi-line Editors
The `editor` method creates a `