Tool Switching in Composer
Tool switching is an AI UX pattern that lets users activate, deactivate, or change capabilities—search, code, image, connectors—from the composer before send. Chips, menus, or mode controls make the active tool set visible so users know what the model can do on this turn.
When to use
Essential for multi-capability AI assistants, developer tools, and creative platforms where users need to explicitly select which AI tools to use for their queries.
When not to use
- Single-capability products where a tool picker is empty ceremony.
- Agent flows that must choose tools automatically and only need post-hoc disclosure.
- Mobile composers where more than one primary mode chip crowds the send control.
Anti-patterns
- Hidden tools with no discoverable entry until after the user fails.
- Active tools with no removable chip or clear off state.
- Parallel discovery paths (slash, +, mode chips) with no shared mental model.
- Mode labels that change cost or latency without saying so.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | One + menu for attach, tools, and modes; removable chips show scope before send. |
| Claude | Web search default on; + menu for skills and attach; model/effort on the bar. |
| Perplexity | Primary mode chips (Search, Computer); + for uploads and connectors. |
| Gemini | + menu leads with Drive; Deep research and creation tools in flyouts. |
Use this pattern in your project
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Tool Switching in Composer" AI interface design pattern.
Pattern Definition:Real-world examples
How shipped products implement tool switching in composer, from our teardown guides.
ChatGPTChatGPT composer UX: input bar, tools & voice design
Design the composer
ClaudeClaude composer UX: model picker, skills & attachments
Design the composer
DeepSeekDeepSeek composer UX: DeepThink, Search & modes
Design the composer
GeminiGemini composer UX: tools, Drive & thinking modes
Design the composer
Google AI ModeGoogle AI Mode composer UX: Canvas, Create & Lens
Design the composer
GrokGrok composer UX: skills, models & voice input
Design the composer
LovableLovable composer UX: Build, Plan & templates
Design the composer
ManusManus composer UX: assign tasks, modes & agent tiers
Design the composer
PerplexityPerplexity composer UX: search modes & connectors
Design the composer
Frequently asked questions
What is tool switching in an AI composer?
Tool switching lets users pick which capabilities the model may use on the next message—web search, code execution, image generation, connectors—usually via chips or a + menu in the input bar.
Should tools live in the bar or behind a menu?
Put mode chips in the bar when mode is the product (research depth). Use a + menu when most users should just type. Avoid three competing entry points with no bridge.
How is tool switching different from model selection?
Tool switching chooses capabilities for a turn. Model selection chooses which model or tier runs. Products often expose both; conflating them in one unlabeled control confuses cost and behavior.
How do I show which tools are active?
Use removable chips or persistent mode indicators in the composer so scope is legible before send. Silent tool activation without UI is a trust failure.
Related patterns
- Inputs
Context Chip Management
Adding context sources via menu with removable chips
- Inputs
Input Mode Toggle
Switch between text, voice, and dictation modes
- Inputs
Follow-up Chips
Suggested next turns
- Inputs
Command Bar
Cmd+K for AI
- Inputs
Context Mentions
Reference files via @
- Inputs
Slash Commands
Quick actions via /