In the era of Generative AI, product design transcends functional implementation to focus on the orchestration of human-AI collaboration. AI Agent Input UX is an experimental initiative dedicated to deconstructing and presenting interaction archetypes within high-fidelity AI applications.
This is more than a component library; it is a set of interaction guidelines (Design Guidelines) defined for Generative AI products, helping your product navigate beyond the "single chat box" design bottleneck.
Most current AI products are trapped by the "Input Box"—where users are forced into repetitive chat cycles to get results. Input UX aims to shatter this inefficient pattern by establishing a design standard based on Agency and Context.
- Black Box Anxiety: Users are unclear about what the AI is doing, leading to a breakdown in trust.
- Cognitive Loss: Excessively long conversations make it difficult to track key points, resulting in continuous workflow disruption.
- Cold Start Anxiety: Users standing before an empty input box struggle to unlock the AI's full potential.
In this design language, the AI is no longer a passive responder, but a:
- Proactive Guide: Offering Nudges when the user is stuck.
- Knowledge Miner: Solidifying value from scattered dialogue.
- Transparent Partner: Actively demonstrating its reasoning to build trust.
We deconstruct the AI product interaction lifecycle into three core phases:
- Wayfinders (Guidance): Eliminating the "blank canvas" dilemma.
- Inputs & Tuners (Persistence): Converting chat into persistent workplanes and knowledge sources.
- Governors (Oversight): Ensuring the AI's logical path is visible and auditable.
A. Breaking "Transient Chat" — Knowledge Solidification
- Flow: Identify highlights -> Persistent mounting -> Sidebar collection.
- Archetypes: Source Mining, Canvas Preview, Attachments.
- Value: Transforms temporary chat into long-term productivity, solving the common problem of AI being "forgetful" or hard to reuse.
B. Breaking "Text Input" — Multi-modal Interaction
- Flow: Select and Quote -> Inline Trigger -> Parameter refinement.
- Archetypes: Quote Reply, Inline Action, Parameters.
- Value: Enables interaction at the "Source of Content," rather than forcing tedious copy-pasting, maximizing operational efficiency.
C. Breaking "Black Box" — Transparency & Oversight
- Flow: Reveal Chain of Thought -> Citation Mapping -> Footprint tracking.
- Archetypes: Stream of Thought, Citations, Footprints.
- Value: Externalizes explanations, allowing users to see the underlying logic and evidence alongside the results.
The high-fidelity archetypes provided are not just UI components; they are benchmarks for AI interaction. Through these details, we want designers and developers to understand that a great AI product requires more than just a powerful model—it requires a refined and "thoughtful" interaction design.
npm install && npm run devPrototyping the next generation of human-AI collaboration.