\n\n

Anyone that's interacted with an application like this knows that the AI model's responses quickly get lost in conversation threads and producing something from a set of chat replies can be painful. This kind of interface isn't optimal for tasks like authoring a document, writing code, or creating slides. To account for this some applications now include a canvas or artifact area where the output of the AI model's work can go.

\n\n

In these layouts, the chat interface usually goes from being a single-pane layout to a split-pane layout. Roughly half the UI for input in the form of chat and half of it for output in the form of a canvas or artifact viewer. In these kinds of applications, we already begin to see the prominence of chat receding as people move between providing input and reviewing, editing, or acting on output.

\n\n

\n\n

In this model, however, the onus is still on the user to chat back and forth with a model until it produces their desired output in the artifact or canvas pane. Agents (AI models to make use of tools) change this dynamic. People state their objectives and the AI model(s) plans which tools to use and how to accomplish their task.

\n\n

\n\n

Instead of each step being a back and forth chat between a person and an AI model, the vast majority, if not all, of the steps are coordinated by the model(s) itself. This again reduces the role of chat. The model(s) takes care of the back and forth and in most cases simply lets people know when its done so they can review and make use of its output.

\n\n

\n\n

When agents can use multiple tools, call other agents and run in the background, a person's role moves to kicking things off, clarifying things when needed, and making use of the final output. There's a lot less chatting back and forth. As such, the prominence of the chat interface can recede even further. It's there if you want to check the steps an AI took to accomplish your task. But until then it's out of your way so you can focus on the output.

\n\n

$\"The$

\n\n

You can see this UI transition in the AI workspace, Bench. The first version was focused on back and forth instructions with models to get things done: a single-pane AI chat UI. Then a split-paned interface put more emphasis on the results of these instructions with half the screen devoted to an output pane. Today Bench runs and coordinates agents in the background. So the primary interaction is kicking off tasks and reviewing results when they're ready.

\n\n\n

In this UI, the chat interface is not only reduced to less than a fourth of the screen but also collapsed by default hiding the model's back and forth conversations with itself unless people want to dig into it.

\n\n

\n\n

\n\n

When working with AI models this way, the process of chatting back and forth to create things within in messaging UI feels dated. AI that takes your instructions, figures out how to get things done using tools, multiple models, changeable plans, and just tells you when it's finished feels a lot more like \"the future\". Of course I put future in quotes because at the rate AI moves these days the future will be here way sooner than any of us think. So... more UI changes to come!

", "textOnlyHtml": "While chat interfaces to AI models aren't going away anytime soon, the\nincreasing capabilities of AI agents are making the concept of chatting back and\nforth with an AI model to get things done feel archaic.\n\nLet me first clarify that I don't mean open-ended text fields where people\ndeclare their intent are going away. As I wrote recently there will be even more\nbroad input affordances in software whether for text, image, audio, video, or\nmore. When I say chat AIs, I mean applications whose primary mode of getting\nthings done is through a back and forth messaging conversation with an AI model:\nyou type something, the model responds, you type something... and on it goes\nuntil you get the output you need.\n\n\n\nAnyone that's interacted with an application like this knows that the AI model's\nresponses quickly get lost in conversation threads and producing something from\na set of chat replies can be painful. This kind of interface isn't optimal for\ntasks like authoring a document, writing code, or creating slides. To account\nfor this some applications now include a canvas or artifact area where the\noutput of the AI model's work can go.\n\nIn these layouts, the chat interface usually goes from being a single-pane\nlayout to a split-pane layout. Roughly half the UI for input in the form of chat\nand half of it for output in the form of a canvas or artifact viewer. In these\nkinds of applications, we already begin to see the prominence of chat receding\nas people move between providing input and reviewing, editing, or acting on\noutput.\n\n\n\nIn this model, however, the onus is still on the user to chat back and forth\nwith a model until it produces their desired output in the artifact or canvas\npane. Agents (AI models to make use of tools) change this dynamic. People state\ntheir objectives and the AI model(s) plans which tools to use and how to\naccomplish their task.\n\n\n\nInstead of each step being a back and forth chat between a person and an AI\nmodel, the vast majority, if not all, of the steps are coordinated by the\nmodel(s) itself. This again reduces the role of chat. The model(s) takes care of\nthe back and forth and in most cases simply lets people know when its done so\nthey can review and make use of its output.\n\n\n\nWhen agents can use multiple tools, call other agents and run in the background,\na person's role moves to kicking things off, clarifying things when needed, and\nmaking use of the final output. There's a lot less chatting back and forth. As\nsuch, the prominence of the chat interface can recede even further. It's there\nif you want to check the steps an AI took to accomplish your task. But until\nthen it's out of your way so you can focus on the output.\n\n\n\nYou can see this UI transition in the AI workspace, Bench. The first version was\nfocused on back and forth instructions with models to get things done: a\nsingle-pane AI chat UI. Then a split-paned interface put more emphasis on the\nresults of these instructions with half the screen devoted to an output pane.\nToday Bench runs and coordinates agents in the background. So the primary\ninteraction is kicking off tasks and reviewing results when they're ready.\n\nIn this UI, the chat interface is not only reduced to less than a fourth of the\nscreen but also collapsed by default hiding the model's back and forth\nconversations with itself unless people want to dig into it.\n\n\n\n\n\nWhen working with AI models this way, the process of chatting back and forth to\ncreate things within in messaging UI feels dated. AI that takes your\ninstructions, figures out how to get things done using tools, multiple models,\nchangeable plans, and just tells you when it's finished feels a lot more like\n\"the future\". Of course I put future in quotes because at the rate AI moves\nthese days the future will be here way sooner than any of us think. So... more\nUI changes to come!"}, {"id": "e045f0cb-7b14-4be1-88ae-151844fd6e8e", "url": "https://lukew.com/ff/entry.asp?2097", "type": 1, "title": "Make the AI Models do the Prompting", "summary": "AI models have made significant strides, but their potential is hindered by people's lack of understanding of their capabilities and how to guide them. To address this, language learning models (LLMs) are used to rewrite people's prompts. Reve, an AI for creative tooling, optimizes image generation by rewriting vague prompts into detailed ones, teaching users about the model's capabilities. Reve also harmonizes prompts when changes are made and allows users to start image generation with an image. Bench, an AI for knowledge work, uses an AI model to plan actions in response to instructions, including the use of tools and their settings. Bench also rewrites instructions to make effective use of tools and decides which AI models to call. The approach is to let AI models rewrite and optimize people's initial prompts for the best outcome.", "entities": [], "metadata": {"tags": ["Enhancing Prompts with Contextual Retrieval", "Prompt Building User Interfaces", "Early Glimpses of Really Personal Assistants", "ai design", "LLMs", "prompts", "ai models", "ai", "chat"], "title": "LukeW | Make the AI Models do the Prompting", "author": "Luke Wroblewski", "longDate": "May 5, 2025", "shortDate": "May 5, 2025"}, "coverImage": "https://static.lukew.com/reve_enhancefeature.png", "renderHtml": "

Despite all the mind-blowing advances in AI models over the past few years, they still face a massive obstacle to achieving their potential: people don't know what AI can do nor how to guide it. One of the ways we've been addressing this is by having LLMs rewrite people's prompts.

\n\n

Prompt Writing & Editing

The preview release of Reve's (our AI for creative tooling company) text to image model helps people get better image generation results by re-writing their prompts in several ways.

\n\n

Reve's enhance feature (on by default) takes someone's image prompt and re-writes it in a way that optimizes for a better result but also teaches people about the image model's capabilities. Reve is especially strong at adhering to very detailed prompts but many people's initial instructions are short and vague. To get to a better result, the enhance feature drafts a much comprehensive prompt which not only makes Reve's strengths clear but also teaches people how to get the most of the model.

\n\n

$\"Reve$

\n\n

The enhance feature also harmonizes prompts when someone make changes. For instance, if the prompt includes several mentions of the main subject, like a horse, and you change one of them to a cow, the enhance feature will make sure to harmonize all the \"horse\" mentions to \"cow\" for you.

\n\n

But aren't these long prompts too complicated for most people to edit? This is why the default mode in Reve is instruct and prompt editing is one click away. Through natural language instructions, people can edit any image they create without having to dig through a wall of prompt text.

\n\n

$\"Reve$

\n\n

Even better, though, is starting an image generation with an image. In this approach you simply upload an image and Reve writes a comprehensive prompt for it. From there you can either use the instruct mode to make changes or dive into the full prompt to make edits.

\n\n

$\"Reve$

\n\n

Plan Creation & Tool Use

As if it wasn't hard enough to prompt an AI model to do what you want, things get even harder with agentic interfaces. When AI models can make use of tools to get things done in addition to using their own built-in capabilities, people now have to know not only what AI models can do but what the tools they have access to can do as well.

\n\n

In response to an instruction in Bench (our AI for knowledge work company), the system uses an AI model to plan an appropriate set of actions in response. This plan includes not only the tools (search, browse, fact check, create PowerPoint, etc.) that make the most sense to complete the task but also their settings. Since people don't know what tools Bench can use nor what parameters the tools accept, once again an AI model rewrites people's prompts for them into something much more effective.

\n\n

For instance, when using the search tool, Bench will not only decide on and execute the most relevant search queries but also set parameters like date range or site-specific constraints. In most cases, people don't need to worry about these parameters. In fact, we put them all behind a little settings icon so people can focus on the results of their task and let Bench do the thinking. But in cases where people want to make modifications to the choices Bench made, they can.

\n\n

\n\n

Behind the scenes in Bench, the system not only re-writes people's instructions to pick and make effective use of tools but it also decides which AI models to call and when. How much of that should be exposed to people so they can both modify it if needed and understand how things work has been a topic of debate. There's clearly a tradeoff with doing everything for people automatically and giving them more explicit (but more complicated) controls.

\n\n

At a high level, though, AI models are much better at writing prompts for AI models than most people are. So the approach we've continued to take is letting the AI models rewrite and optimize people's initial prompts for the best possible outcome.

", "textOnlyHtml": "Despite all the mind-blowing advances in AI models over the past few years, they\nstill face a massive obstacle to achieving their potential: people don't know\nwhat AI can do nor how to guide it. One of the ways we've been addressing this\nis by having LLMs rewrite people's prompts.\n\n\nPROMPT WRITING & EDITING\n\nThe preview release of Reve's (our AI for creative tooling company) text to\nimage model helps people get better image generation results by re-writing their\nprompts in several ways.\n\nReve's enhance feature (on by default) takes someone's image prompt and\nre-writes it in a way that optimizes for a better result but also teaches people\nabout the image model's capabilities. Reve is especially strong at adhering to\nvery detailed prompts but many people's initial instructions are short and\nvague. To get to a better result, the enhance feature drafts a much\ncomprehensive prompt which not only makes Reve's strengths clear but also\nteaches people how to get the most of the model.\n\n\n\nThe enhance feature also harmonizes prompts when someone make changes. For\ninstance, if the prompt includes several mentions of the main subject, like a\nhorse, and you change one of them to a cow, the enhance feature will make sure\nto harmonize all the \"horse\" mentions to \"cow\" for you.\n\nBut aren't these long prompts too complicated for most people to edit? This is\nwhy the default mode in Reve is instruct and prompt editing is one click away.\nThrough natural language instructions, people can edit any image they create\nwithout having to dig through a wall of prompt text.\n\n\n\nEven better, though, is starting an image generation with an image. In this\napproach you simply upload an image and Reve writes a comprehensive prompt for\nit. From there you can either use the instruct mode to make changes or dive into\nthe full prompt to make edits.\n\n\n\n\nPLAN CREATION & TOOL USE\n\nAs if it wasn't hard enough to prompt an AI model to do what you want, things\nget even harder with agentic interfaces. When AI models can make use of tools to\nget things done in addition to using their own built-in capabilities, people now\nhave to know not only what AI models can do but what the tools they have access\nto can do as well.\n\nIn response to an instruction in Bench (our AI for knowledge work company), the\nsystem uses an AI model to plan an appropriate set of actions in response. This\nplan includes not only the tools (search, browse, fact check, create PowerPoint,\netc.) that make the most sense to complete the task but also their settings.\nSince people don't know what tools Bench can use nor what parameters the tools\naccept, once again an AI model rewrites people's prompts for them into something\nmuch more effective.\n\nFor instance, when using the search tool, Bench will not only decide on and\nexecute the most relevant search queries but also set parameters like date range\nor site-specific constraints. In most cases, people don't need to worry about\nthese parameters. In fact, we put them all behind a little settings icon so\npeople can focus on the results of their task and let Bench do the thinking. But\nin cases where people want to make modifications to the choices Bench made, they\ncan.\n\n\n\nBehind the scenes in Bench, the system not only re-writes people's instructions\nto pick and make effective use of tools but it also decides which AI models to\ncall and when. How much of that should be exposed to people so they can both\nmodify it if needed and understand how things work has been a topic of debate.\nThere's clearly a tradeoff with doing everything for people automatically and\ngiving them more explicit (but more complicated) controls.\n\nAt a high level, though, AI models are much better at writing prompts for AI\nmodels than most people are. So the approach we've continued to take is letting\nthe AI models rewrite and optimize people's initial prompts for the best\npossible outcome."}], "timestamp": 1771262143997, "openaiAnswer": "", "fromSuggestion": false, "backfillResources": [{"id": "cb3ea93f-5e98-46f3-bcd7-3c2f58b5ce6f", "url": "https://lukew.com/ff/entry.asp?2096", "type": 1, "title": "The Evolution of AI Products", "summary": "The evolution of AI products has accelerated over the past three years, moving from behind-the-scenes models to chat interfaces and agents. AI adoption is most evident in coding companies like Augment, which has transitioned from using AI models for code completions to launching a chat interface and an AI-powered tool. Initially, machine learning systems powered software interfaces indirectly, but with the launch of ChatGPT, AI models moved to the foreground. Companies soon realized that AI models provided better results with more context, leading to the emergence of retrieval-augmented-generation (RAG) products. The next step in AI product evolution is the use of tools and foreground agents, where AI models can plan and use different tools. This has led to the development of AI products that allow multiple processes to run in the background, known as background agents. The future of AI products may involve these products interacting and collaborating with each other, as suggested by Google's recently announced Agent to Agent protocol.", "entities": [], "metadata": {"tags": ["Early Glimpses of Really Personal Assistants", "Ask LukeW: Text Generation Differences", "Do All AI Models Need To Be Assistants?", "ai design", "ai models", "agents", "chat", "UI design", "ai"], "title": "LukeW | The Evolution of AI Products", "author": "Luke Wroblewski", "longDate": "April 28, 2025", "shortDate": "Apr 28, 2025"}, "coverImage": "https://static.lukew.com/aiproducts_Claudeindex2.png", "renderHtml": "

At this point, the use of artificial intelligence and machine learning models in software has a long history. But the past three years really accelerated the evolution of \"AI products\". From behind the scenes models to chat to agents, here's how I've seen things evolve for the AI-first companies we've built during this period.

\n\n

Anthropic, one of the World's leading AI labs, recently released data on what kinds of jobs make the most use of their foundation model, Claude. Computer and math use outpaced other jobs by a very wide margin which matches up with AI adoption by software engineers. To date, they've been the most open to not only trying AI but applying it to their daily tasks.

\n\n

\n\n

As such, the evolution of AI products is currently most clear in AI for coding companies like Augment. When Augment started over two years ago, they used AI models to power code completions in existing developer tools. A short time later, they launched a chat interface where developers could interact directly with AI models. Last month, they launched Augment Agent which pairs AI models with tools to get more things done. Their transition isn't an isolated example.

\n\n

\n\n

Machine Learning Behind the Scenes

Before everyone was creating chat interfaces and agents, large-scale machine learning systems were powering software interfaces behind the scenes. Back in 2016 Google Translate announced the use of deep learning to enable better translations across more languages. YouTube's video recommendations also dramatically improved the same year from deep learning techniques.

\n\n

\n\n

Although machine-learning and AI models were responsible for key parts of these product's overall experience, they remained in the background providing critical functionality but they did so indirectly.

\n\n

Chat Interfaces to AI Models

The practice of directly interacting with AI models was mostly limited to research efforts until the launch of ChatGPT. All the sudden, millions of people were directly interacting with an AI model and the information found in its weights (think fuzzy database that accesses its information through complex predictive instead of simple look-up techniques).

\n\n

\n\n

ChatGPT was exactly that: one could chat with the GPT model trained by OpenAI. This brought AI models from the background of products to the foreground and led to an explosion of chat interfaces to text, image, video, and 3D models of various sizes.

\n\n

Retrieval Augmented Products

Pretty quickly companies realized that AI models provided much better results if they were given more context. At first, this meant people writing prompts (or instructions for AI models) with more explicit intent and often increasing length. To scale this approach beyond prompting, retrieval-augmented-generation (RAG) products began to emerge.

\n\n

\n\n

My personal AI system, Ask LukeW, makes extensive use of indexing, retrieval, and re-ranking systems to create a product that serves as a natural language interface to my nearly 30 years of writings and talks. ChatGPT has also become retrieval-augmented product as it regularly makes use of Web search instead of just its weights when it responds to user instructions.

\n\n

Tool Use & Foreground Agents

Though it can significantly improve AI products, information retrieval is only one tool that AI systems can now (with a few of the most recent foundation models) make use of. When AI models have access to a number of different tools and can plan which ones to use and how, things become agentic.

\n\n

\n\n

For instance our AI-powered workspace, Bench, has many tools it can use to retrieve information but also tools to fact-check data, do data analysis, generate Powerpoint decks, create images, and much more. In this type of product experience, people give AI models instructions. Then the models make plans, pick tools, configure them, and make use of the results to move on to the next step or not. People can steer or refine this process with user interface controls or, more commonly, further instructions.

\n\n

Bench allows people to interrupt agentic process with natural language, to configure tool parameters and rerun them, select models to use with different tools and much more. But in the vast majority of cases, the system evaluates its options and makes these decisions itself to give people the best possible outcome.

\n\n

Background Agents

When people first begin using agentic AI products, they tend to monitor and steer the system to make sure it's doing the things they asked for correctly. After a while though, confidence sets in and the work of monitoring AI models as they execute multi-step processes becomes a chore. You quickly get to wanting multiple process to run in the background and only bother you when they are done or need help. Enter... background agents.

\n\n

\n\n

AI products that make use of background agents, allow people to run multiple process in parallel, across devices, and even schedule them to run at specific times or with particular triggers. In these products, the interface needs to support monitoring and managing lots of agentic workflows concurrently instead of guiding one at a time.

\n\n

Agent to Agent

So what's next? Once AI products can run multiple tasks themselves remotely, it feels like the inevitable next step is for these products to begin to collaborate and interact with each other. Google's recently announced Agent to Agent protocol is specifically designed to enable \"multi-agent ecosystem across siloed data systems and applications.\" Does this result in very different product and UI experience? Probably. What does it look like? I don't know yet.

\n\n

\n\n

AI Product Evolution To Date

As it's highly unlikely the pace of change in AI products will slow down anytime soon. The evolution of AI products I outlined is a timestamp of where we are now. In fact, I put it all into one image for just that reason: to reference the \"current\" state of things. Pretty confident that I'll have to revisit this in the not too distant future...

\n\n

", "textOnlyHtml": "At this point, the use of artificial intelligence and machine learning models in\nsoftware has a long history. But the past three years really accelerated the\nevolution of \"AI products\". From behind the scenes models to chat to agents,\nhere's how I've seen things evolve for the AI-first companies we've built during\nthis period.\n\nAnthropic, one of the World's leading AI labs, recently released data on what\nkinds of jobs make the most use of their foundation model, Claude. Computer and\nmath use outpaced other jobs by a very wide margin which matches up with AI\nadoption by software engineers. To date, they've been the most open to not only\ntrying AI but applying it to their daily tasks.\n\n\n\nAs such, the evolution of AI products is currently most clear in AI for coding\ncompanies like Augment. When Augment started over two years ago, they used AI\nmodels to power code completions in existing developer tools. A short time\nlater, they launched a chat interface where developers could interact directly\nwith AI models. Last month, they launched Augment Agent which pairs AI models\nwith tools to get more things done. Their transition isn't an isolated example.\n\n\n\n\nMACHINE LEARNING BEHIND THE SCENES\n\nBefore everyone was creating chat interfaces and agents, large-scale machine\nlearning systems were powering software interfaces behind the scenes. Back in\n2016 Google Translate announced the use of deep learning to enable better\ntranslations across more languages. YouTube's video recommendations also\ndramatically improved the same year from deep learning techniques.\n\n\n\nAlthough machine-learning and AI models were responsible for key parts of these\nproduct's overall experience, they remained in the background providing critical\nfunctionality but they did so indirectly.\n\n\nCHAT INTERFACES TO AI MODELS\n\nThe practice of directly interacting with AI models was mostly limited to\nresearch efforts until the launch of ChatGPT. All the sudden, millions of people\nwere directly interacting with an AI model and the information found in its\nweights (think fuzzy database that accesses its information through complex\npredictive instead of simple look-up techniques).\n\n\n\nChatGPT was exactly that: one could chat with the GPT model trained by OpenAI.\nThis brought AI models from the background of products to the foreground and led\nto an explosion of chat interfaces to text, image, video, and 3D models of\nvarious sizes.\n\n\nRETRIEVAL AUGMENTED PRODUCTS\n\nPretty quickly companies realized that AI models provided much better results if\nthey were given more context. At first, this meant people writing prompts (or\ninstructions for AI models) with more explicit intent and often increasing\nlength. To scale this approach beyond prompting, retrieval-augmented-generation\n(RAG) products began to emerge.\n\n\n\nMy personal AI system, Ask LukeW, makes extensive use of indexing, retrieval,\nand re-ranking systems to create a product that serves as a natural language\ninterface to my nearly 30 years of writings and talks. ChatGPT has also become\nretrieval-augmented product as it regularly makes use of Web search instead of\njust its weights when it responds to user instructions.\n\n\nTOOL USE & FOREGROUND AGENTS\n\nThough it can significantly improve AI products, information retrieval is only\none tool that AI systems can now (with a few of the most recent foundation\nmodels) make use of. When AI models have access to a number of different tools\nand can plan which ones to use and how, things become agentic.\n\n\n\nFor instance our AI-powered workspace, Bench, has many tools it can use to\nretrieve information but also tools to fact-check data, do data analysis,\ngenerate Powerpoint decks, create images, and much more. In this type of product\nexperience, people give AI models instructions. Then the models make plans, pick\ntools, configure them, and make use of the results to move on to the next step\nor not. People can steer or refine this process with user interface controls or,\nmore commonly, further instructions.\n\nBench allows people to interrupt agentic process with natural language, to\nconfigure tool parameters and rerun them, select models to use with different\ntools and much more. But in the vast majority of cases, the system evaluates its\noptions and makes these decisions itself to give people the best possible\noutcome.\n\n\nBACKGROUND AGENTS\n\nWhen people first begin using agentic AI products, they tend to monitor and\nsteer the system to make sure it's doing the things they asked for correctly.\nAfter a while though, confidence sets in and the work of monitoring AI models as\nthey execute multi-step processes becomes a chore. You quickly get to wanting\nmultiple process to run in the background and only bother you when they are done\nor need help. Enter... background agents.\n\n\n\nAI products that make use of background agents, allow people to run multiple\nprocess in parallel, across devices, and even schedule them to run at specific\ntimes or with particular triggers. In these products, the interface needs to\nsupport monitoring and managing lots of agentic workflows concurrently instead\nof guiding one at a time.\n\n\nAGENT TO AGENT\n\nSo what's next? Once AI products can run multiple tasks themselves remotely, it\nfeels like the inevitable next step is for these products to begin to\ncollaborate and interact with each other. Google's recently announced Agent to\nAgent protocol is specifically designed to enable \"multi-agent ecosystem across\nsiloed data systems and applications.\" Does this result in very different\nproduct and UI experience? Probably. What does it look like? I don't know yet.\n\n\n\n\nAI PRODUCT EVOLUTION TO DATE\n\nAs it's highly unlikely the pace of change in AI products will slow down anytime\nsoon. The evolution of AI products I outlined is a timestamp of where we are\nnow. In fact, I put it all into one image for just that reason: to reference the\n\"current\" state of things. Pretty confident that I'll have to revisit this in\nthe not too distant future...\n\n"}, {"id": "255902d0-7e4c-4cff-a0f6-2037d5a41309", "url": "https://www.lukew.com/ff/entry.asp?2093", "type": 1, "title": "Usable Chat Interfaces to AI Models", "summary": "The article discusses the challenges and solutions related to the design of AI-chatbot interfaces. The author notes that while open-ended interfaces are flexible, they often lead to user confusion due to lengthy outputs. To address this, the author suggests using an expand and collapse pattern, as demonstrated in the Ask LukeW feature. This pattern allows users to focus on specific content and easily navigate through previous interactions. The author also discusses the interface for Bench, an AI-powered workspace, which uses separate panels for each tool's output and a collapse timeline feature to manage multiple outputs. Additionally, a home page for each session is suggested to further streamline navigation and access to outputs.", "entities": [], "metadata": {"tags": ["Expanding Conversational User Interfaces", "Ask LukeW: New Ways into Web Content", "Personal Computation Mediums & AI", "ai", "llms", "chat", "interface", "ui", "ai design"], "title": "LukeW | Usable Chat Interfaces to AI Models", "author": "Luke Wroblewski", "longDate": "April 6, 2025", "shortDate": "Apr 6, 2025"}, "coverImage": "https://static.lukew.com/chat_scrolling.png", "renderHtml": "

Seems like every app these days, including this Web site, has a chat interface. While giving powerful AI models an open-ended UI supports an enormous amount of use cases, these interfaces also come with issues. So here's some design approaches to address one of the most prominent ones.

\n\n

First of all, I'm not against open-ended interfaces. While these kinds of UIs face the typical \"blank slate\" problem of what can or should I do here? They are an extremely flexible way to allow people to declare their intent (if they have one).

\n\n

So what's the problem? In their article on Early Generative-AI User Behaviors, the Nielsen/Norman Group highlighted several usability issues in AI-chatbot interfaces. At the root of most was the observation that \"people get lost when scrolling\" streams of replies. Especially when AI models deliver lengthy outputs (as many are prone to do).

\n\n

$\"Nielsen/Norman$ \n

\n\n

To account for these issues in the Ask LukeW feature on this site, where people ask relatively short questions and get long-form detailed answers, I made use of an expand and collapse pattern. You can see the difference between this approach and a more common chat UI pattern below.

\n\n

$\"Comparing$ \n

\n\n

Here's how this pattern looks in the Ask LukeW interface. The previous question and answer pairs are collapsed and therefore the same size, making it easier to focus on the content within and pick out relevant messages from the list when needed.

\n\n

$\"Expanding$ \n

\n\n

If you want to expand the content of an earlier question and answer pair, just tap on it to see its contents and the other messages collapse automatically.

\n\n

$\"Expanding$ \n

\n\n

We took this a step further in the interface for Bench, an AI-powered workspace for knowledge work. Unlike Ask LukeW, Bench has many tools it can use to help people get work done (search, data science, fact check, remember, etc.).

\n\n

$\"Bench$ \n

\n\n

Each of these tools can create a lot of output. When they do, we place the results of each tool in a separate interface panel on the right. This panel is also editable so people can refine a tool's output manually when they just want to modify things a little bit.

\n\n

$\"Bench$ \n

\n\n

When the next tool creates output or people start another task, that output shows up on the right. The tool that created the output, however, remains in the timeline on the left with link to what it produced. So you can quickly navigate to and open outputs.

\n\n

$\"Click$ \n

\n\n

But what happens when there's multiple outputs... don't we end up with the same problem of a long scrolling list to find what you need? To account for this, we (thanks Amelia) added a collapse timeline feature in Bench. Hovering over any reply reveals a little \"condense this\" icon on the timeline.

\n\n

$\"Click$

\n\n

Selecting this icon will collapse the timeline down to just a list of tools with links to their output. This allows you to easily find what was produced for you in Bench and get back to it.

\n\n

\n\n

OK but even if the timeline is collapsed, people still have to scroll the timeline to find the things they need right? So they're still scrolling just less? For this reason, we also added a home page for each session in Bench.

\n\n

If you close any output in the pane on the right, you see a title and summary of your session, all the files you used in it, and a list of all the outputs created in the session. This list can be sorted by the time the output was produced or by the tool that made the output. Selecting an output in this list opens it up. Selecting the tool that created it takes you to the point in the timeline where it was produced.

\n\n

Here's some questions you can ask Luke Wroblewski

2027