ai for designers

Tool Surfaces

Tool surfaces are the named verbs your product exposes for agents to call directly. Every primary action becomes a tool surface when its human label, its ARIA name, its DOM selector, its API endpoint, and its Model Context Protocol handler all carry the identical verb. Agents do not parse intent from pixels or hover states. They invoke tools by name. A button that looks obvious to a human but carries an ambiguous accessible name like action-1 is useless to Cursor, Claude, Anthropic Computer Use, or OpenAI Operator. The machine plane demands precision that most 2024 interfaces never delivered. Designers must now treat every important action as a public contract shared by two users. The surface includes the visible button, the underlying semantic HTML, the stable data-testid attribute, the route structure, and the backend handler. When all these pieces align on the same verb, agents can drive your product the same way humans do, just through different doors. This is Layer 1 of the dual-user stack in 2026. Without solid tool surfaces the remaining four layers have nothing to grip.

Tool surfaces are not your entire interface. They are not decorative CTAs, secondary links, or every div with an onClick handler. They are not hover-only menus that vanish from the DOM when an agent inspects it. A tool surface is never a moving target that changes its name or selector during a refactor. It is not something you hand to engineering as an afterthought or treat as pure API work. Designers own the vocabulary. If your button says Save Changes but the API method is updateRecordV2 and the ARIA label is btn-7x9, the agent now plays telephone with your product. That never ends well. Tool surfaces are also not static. They evolve with versioned stability the same way Stripe versions its API so nothing breaks for agents that learned the surface last year.

Stripe remains the gold standard. Their customers.create, invoices.send, and payments.capture actions have matched between dashboard, API, and documentation since the early 2010s. The Create customer button carries the exact verb in its accessible name, its data-testid, and its MCP manifest. When Anthropic released Computer Use in October 2024 dozens of fintech sites immediately failed because their payment buttons were unlabeled divs. Stripe worked instantly. The agent called the surface, received a structured response object, and continued without hallucinating next steps. Linear copied the religion. Its Create issue, Change status, and Add comment surfaces live in the command bar, the API as issues.create, the frontend with stable selectors, and AGENTS.md that lists every parameter an agent should send. Replit Agent and Cursor therefore drive Linear without humans in the loop for routine work. Vercel v0 treats generation as a tool surface with clear inputs and reviewable artifacts. GitHub Copilot Workspace splits planning and execution into two distinct surfaces so the agent cannot race ahead. Raycast goes even further: its entire command palette is a shared surface where human and agent speak the same verbs with rich metadata. These products did not retrofit selectors after launch. They designed the machine plane on day one.

Apply tool surfaces to every action that changes state or carries risk. Checkout flows, content publishing, data imports, user invites, report generation, and billing changes all qualify. List your product's verbs first, then align the human copy, the ARIA label, the testid, the route, the API contract, and the MCP definition. Run the dual-user audit before shipping. If an agent might drive it, give the surface the same care you give the human experience. The cost of skipping this step is silent breakage the moment Cursor or Claude tries to act on behalf of a user.

Skip tool surfaces on footer links, static marketing pages, decorative icons, or internal admin tools no partner will ever integrate with. Throwaway prototypes and one-off experiments also get a pass. Everything else in 2026 does not. Even your lead-gen form benefits from a named submit-lead surface if agents start filing it automatically.

Name your actions like you name your API endpoints because to an agent that is exactly what they are.

Related terms

Keep exploring