5 UX Lessons From Notion's AI Agent Builder UI - Notion UI Breakdown

The left is a chat that guides setup, while the right holds structured config. The same agent is built two ways at once. Beginners talk it out, power users edit directly. Serving both mental models on one screen removes the "which mode am I in?" friction and lets users move fluidly between describing and configuring.

Inside the conversation, the AI surfaces buttons like "Search my workspace for a tasks database" or "Create a new task database" rather than making the user type. Converting decisions into tappable options is faster, error-proof, and guides users toward valid choices. Conversational setup does not have to mean typing everything. The best chat flows anticipate the next decision and offer it as a single tap.

The right panel opens with a blue "Finish Setup" section listing tasks with radio circles. The onboarding checklist is embedded directly in the configuration, not hidden in a separate flow. Showing remaining steps inline with checkable circles means users never guess what is required. Visible progress at the point of work reduces abandonment in any multi-step setup.

The sidebar shows agents as colorful avatars (Clopie, Task triager, plus New agent), each with its own visual identity. When agents look like distinct entities, users relate to them as collaborators rather than features. Giving the "New agent" button the same avatar treatment makes creating one feel natural. Visual identity is what turns an abstract automation into something users feel they work alongside.

"Trial, 21 days left" sits with a gift icon in the sidebar. The gift framing reads as "you have 21 days of a gift" rather than "21 days until you must pay." Small framing choices shift the emotional tone of monetization from pressure to generosity. How you present a trial counter changes whether users feel rushed or rewarded, and the icon does that reframing almost subconsciously.