Agent Copilot

My Role

I am the sole designer on Agent Copilot at Sprinklr. I work on the copilot widget that agents use during a live case, and on the admin configuration side. I collaborate with the designers on Sprinklr's other Copilots to keep patterns consistent across the platform.

Agents lose time managing the work around a customer conversation.

To resolve a case, an agent has to understand the customer's problem, find the right information, respond clearly, take any required action, and document the case. The information needed is spread across customer history, knowledge articles, previous cases, and external documentation.

Opportunity: bring AI-assistance into the flow of a case

Agent copilot gathers relevant context, generates or recommends responses and next steps, and helps complete routine tasks. The agent reviews its work, applies judgement, and stays focused on the customer interaction.

Understanding stakeholder goals

• Brands want more efficient service operations, lower handling time, consistent quality, customer retention, and revenue growth.
• Agents want less repetitive work, easier access to information, and better performance metrics. Sprinklr wants customers to adopt Agent Copilot, continue using it, and expand its use across teams and workflows.

Design goals

Designing around the existing conversation

In a consumer AI product, the interaction is usually one loop between a person and an AI assistant. In the context of customer service, the agent is already managing a live conversation with another person. Copilot creates a second interaction loop that must support the customer conversation without competing with it. So the design challenge here was to make the loop between agent-copilot as easy to manage as possible.

Resolving a case happens in three stages: understand, respond, and act. Below, I have grouped the design solutions by these stages

Understanding the case

Copilot proactively summarizes the case and suggests a response

The first thing an agent does on a new case is understand the full context (past conversations, the customer's problem) and then greet the customer, usually with a canned response.

I designed the case summary template to be easily scannable for the agent. The avalaible actions for each response / part of response are upfront to again, reduce cognitive load, and speed up decision to action loop.

Context tags scope copilot's search

Large enterprises have huge knowledge bases that span sub-brands, product lines, regions, etc. Copilot detects and adds context tags to the composer when a case is assigned. This scopes the search for copilot, directly affecting time, cost and accuracy of the response. The tags are based on the case's metadata, and can be changed or removed by the agent.

I gave these category tags a dropdown so agents can switch a value without having to delete and re-add. The tags sit above the input rather than inline with the prompt, for two reasons:

• Context typically remains the same throughout the case. Unlike how context tags behave in products like cursor, claude code etc, these tags persist.
• The agent cannot accidentally delete context tags while editing prompt text.

For long cases, or cases where the topic shifts, agents can manually add specific messages as context. This was added based on customer feedback for more granular control.

For this pattern, Cursor's interface was a key inspiration for me, seeing how they allowed users to add lines of code as context and see the mini preview for verification.

Citations are inline

Agents pass Copilot's information to customers, so they need to verify it. Citations reveal on hover and open the source in the third pane.

I have noticed a lot interfaces in the consumer sector, like Claude and ChatGPT move away from this pattern and show sources collectively at the bottom of a response. But for customer service context, I would retain this inline pattern. Agents can't afford the time to dig through a list of sources to find out what generated line came from where.

Responding to the customer

Out-of-box prompts

Agents use copilot for the same tasks repeatedly, like summarizing a case or answering a customer question. Out-of-box prompts make these visible upfront.

Prompt bar is designed, so that overflow of prompts goes into a dropdown with a search bar. This was another decision in favor of speed.

Because the prompts compete for space, I designed a toggle for agents to show or hide, giving them greater control over their how to use their limited workspace.

Canned vs generated responses are labeled, not styled differently

Copilot recommends canned responses (pre-defined responses written by brands) as well as generates responses itself. Even though trust in AI models, and in turn in Copilot, is improving, many brands are still hesitant about agents using AI-generated responses.

I called out the difference in the response header instead of building two components. As models improve, I foresee agents will use the best suited response, whether canned or generated, and a visual split could hardcode a temporary bias of trust into the UI and make it harder to change in the future.

Acting to resolve and close

Copilot speeds up after-call documentation

At the end of a case, the agent can ask Copilot for a summary, then review and record it with one click. Copilot also pre-fills the after-call work (ACW) form from what it observed during the conversation, and the agent reviews and submits.

Copilot is integrating more of the surrounding workflow

• Proactive task creation: Agents used to spend time creating follow-up tasks. I designed the how copilot would stream and fill out the task, accomodating a lag in backend. Since agents are typically responding to customer or have other external tools open, the streaming and the gradient border is meant to capture their attention.

• Upsell opportunities. Agents are expected to catch opportunities to upsell to happy customers. But in a live conversation they often forget. I designed the card for copilot to surface relevant offers at the case resolution point, when customer CSAT is high. This feature maps most directly to brand revenue.

Added a little celebratory animation for the pitched state, to encourage agents to use this upsell opportunity more often.

Play with it yourself!

AI disclaimer placement across touchpoints

A little outside of Agent Copilot, but an interesting problem: we needed AI disclaimers across every touchpoint on the platform, and I wanted a framework that scaled with our products. IBM's Carbon Design System had solid documentation on AI labeling, and [this talk] gave me the split I built on: sorting touchpoints into AI-native and AI-augmented.

AI-native touchpoints are places the user goes to use AI, like Copilot itself. The user initiates the interaction and the UI already reads as AI, so a light, persistent disclaimer at the bottom is enough.

Disclaimer across AI-native touchpoints

AI-augmented touchpoints are ordinary product surfaces with AI folded in, like a smart-response list or an ACW form Copilot pre-fills. These do not look like AI, and the user is usually about to act on the content, so the disclaimer here is upfront, before user makes a decision and has a subtle branding of Sprinklr AI.

Disclaimer across AI-augmented touchpoints

Impact

I am exploring new patterns for AI interfaces and documenting them in my AI patterns note. I would love it if you took some time to check it out and play with the prototypes there!