# How to Design an AI Copilot for SaaS | Gr8r Studio

> How to design an AI copilot for SaaS: when a sidebar beats inline AI, the six parts of a copilot panel, context chips, permissions and a review checklist.

Source: https://gr8rstudio.com/blog/ai-copilot-in-saas

[Product Design](https://gr8rstudio.com/blog)

# How to Design an AI Copilot Sidebar for B2B SaaS

Tanjim Islam

Founder & CEO · 26 Oct 26 · 6 min read

Summarise with AI [Summarise with AI: ChatGPT](https://chatgpt.com/?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-copilot-in-saas)[Summarise with AI: Claude](https://claude.ai/new?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-copilot-in-saas)[Summarise with AI: Perplexity](https://www.perplexity.ai/search?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-copilot-in-saas)

On this page

1. [ 01Should the copilot be a sidebar or inline?](#should-the-copilot-be-a-sidebar-or-inline)
2. [ 02What are the six parts of a copilot sidebar?](#what-are-the-six-parts-of-a-copilot-sidebar)
3. [ 03How should the copilot handle permissions?](#how-should-the-copilot-handle-permissions)
4. [ 04What does a full copilot flow look like?](#what-does-a-full-copilot-flow-look-like)
5. [ 05What has Gr8r built that you can open?](#what-has-gr8r-built-that-you-can-open)
6. [ 06What should you check in a design review?](#what-should-you-check-in-a-design-review)
7. [ 07Frequently asked questions](#frequently-asked-questions)
8. [ 08About the author](#about-the-author)
9. [ 09Related reading](#related-reading)

This article supports

[Product Design](https://gr8rstudio.com/services/product-design)[Review your product challenge](https://cal.com/tanjim-38/30min)

## TL;DR

- A copilot sidebar works when people need help across a whole screen, not one field.
- Design six parts: a context chip, suggested actions, the prompt box, drafts with an apply step, sources, and history.
- Show what the copilot can see, respect the user's permissions, and never apply changes without a visible review.

To design an AI copilot for SaaS, put it in a sidebar only when people need help across a whole screen or several records. Then design six parts: a context chip, suggested actions, a prompt box, draft cards with an apply step, sources and history. The copilot sees only what the user can see, and changes go through review.

## Should the copilot be a sidebar or inline?

Start with the job, not the panel. If the help is about one field, such as "rewrite this note", put the AI inline, next to the field. A sidebar for a one field job is a detour.

A sidebar earns its space when the work spans the screen: questions across many records, a task with several steps, or a draft that touches more than one place. It also helps when people want to keep the AI's work in view while they keep working.

Many products end up with both. Inline buttons for small jobs, a sidebar for the bigger ones. Where AI fits in an existing product is covered in [adding an AI feature to an existing SaaS product](https://gr8rstudio.com/blog/add-ai-feature-to-saas).

## What are the six parts of a copilot sidebar?

A good copilot sidebar has six parts: a context chip, suggested actions, a prompt box, draft cards with Apply and Discard, sources, and history.

Illustrative diagram based on this article. Not product UI, not real data.

### 1\. Context chip

At the top of the panel, show what the copilot is looking at: "Looking at: Invoice 1042" or "Looking at: 38 filtered rows." People can remove it or swap it. This one chip answers the question users ask most: what does it know right now?

Microsoft's guidelines for human AI interaction ask designers to "Show contextually relevant information" and to "Make clear what the system can do" ([Microsoft Research, Guidelines for human AI interaction design, published 1 February 2019](https://www.microsoft.com/en-us/research/blog/guidelines-for-human-ai-interaction-design/)). The chip does both in one line.

### 2\. Suggested actions

Three or four buttons based on the current screen: "Summarize this account", "Draft a reply", "Find overdue items." They teach people what the copilot is good at, without a tutorial. Change them when the screen changes.

### 3\. Prompt box

Keep it pinned to the bottom of the panel. AWS's Cloudscape design system says to "Keep the composer pinned and let only the message log scroll so the input is always reachable" ([AWS Cloudscape, Generative AI chat, published 20 November 2024](https://cloudscape.design/gen-ai/patterns/generative-ai-chat/)). For narrow side panels, Cloudscape also recommends aligning every message to the same side and telling authors apart with an avatar or name.

### 4\. Draft cards with an apply step

The copilot should never edit the record silently. It produces a draft card. The person opens it, sees the change against the current version, then applies or discards it. After applying, show an undo.

### 5\. Sources

Every answer that states a fact links to the record, file or message it came from. Cloudscape recommends inline citations with numbered markers and a "Sources" list for this reason ([AWS Cloudscape, Generative AI chat, published 20 November 2024](https://cloudscape.design/gen-ai/patterns/generative-ai-chat/)). How to show sources and doubt in detail is in [how to show AI confidence and sources in your UI](https://gr8rstudio.com/blog/show-ai-confidence-in-ui).

### 6\. History

Keep past conversations and applied changes, tied to the record they were about. When someone returns to Invoice 1042 next week, the earlier thread should be there.

## How should the copilot handle permissions?

The copilot acts with the signed in user's permissions, never more. If a sales rep can't see salary data, neither can the copilot running for them. Design for this in three places:

- **Context chip.** Shows only records the user can open.
- **Refusals.** When a request needs data the user can't access, say so plainly and suggest who can help. Don't pretend the data doesn't exist.
- **Actions.** Anything that sends, pays or deletes asks for confirmation, even if the user has the right to do it.

## What does a full copilot flow look like?

Here is an illustration, not a real customer or product. Picture an account manager on a customer page. The context chip reads "Looking at: Northwind account." They tap "Summarize recent activity." The panel shows five bullet points, each with a source link to an email or ticket. They type "Draft a renewal note." A draft card appears. They open it, edit one line, and apply it to the account's notes field. An undo toast sits at the bottom for a few seconds.

Every step is visible, and the person stays in charge of what changes.

## What has Gr8r built that you can open?

For [HostOp](https://hostop.ai), we designed the product, built its Framer website and built an agentic design system for it.

One of our own products puts a copilot inside a working SaaS. [Atrium](https://atrium-hotel-os.vercel.app) is a hotel operating system with an Ask AI button and a Coworker panel on the Today screen that lists three next steps, each with its own action button. Built by Gr8r for its own portfolio. Not client work.

Atrium, built by Gr8r for its own portfolio. Not client work. Demo data. Screenshot from 6 Nov 2026 checks.

The broader set of patterns for agents that act on their own is in [AI agent UI patterns that keep users in control](https://gr8rstudio.com/blog/ai-agent-ui-patterns).

## What should you check in a design review?

Check that the sidebar fits the work, shows what it can see, offers changes as drafts with undo, links facts to sources, never sees more than the signed in user, and keeps history with the record.

- The copilot is in a sidebar only for multi step or cross record work.
- A context chip shows what it can see, and people can change it.
- Suggested actions change with the screen.
- The prompt box stays pinned and reachable.
- Changes arrive as drafts, with a view of what will change.
- Applied changes have an undo.
- Facts link to their sources.
- It never sees more than the signed in user.
- History stays tied to the record.

The full set of AI screen states is in [AI UX design: the seven screen states](https://gr8rstudio.com/blog/ai-product-design-guide).

We design copilots as part of our [AI product design](https://gr8rstudio.com/services/product-design) work.

## Frequently asked questions

### Should an AI copilot be a sidebar or inline?

Put it inline when the help is about one field or one action. Use a sidebar when people need help across a whole screen, several records or a task with several steps. Many products use both.

### How do you show what context an AI copilot is using?

Add a context chip at the top of the panel that names what the copilot is looking at, such as one record or a filtered list. Let people remove or change it, and link every factual answer to its source.

### How should an AI copilot handle permissions?

It should act with the signed in user's permissions and never more. Refuse plainly when a request needs data the user can't access, and ask for confirmation before anything that sends, pays or deletes.

### Should a copilot change data directly?

Not silently. Have it produce a draft, show the change against the current version, and let the person apply or discard it. Offer undo after applying.

### What suggested actions should an AI copilot show?

Three or four buttons based on the current screen, such as "Summarize this account" or "Draft a reply". They teach people what the copilot is good at without a tutorial. Change them when the screen changes.

## About the author

**Tanjim Islam** is the founder and CEO of Gr8r Studio. He founded the studio in 2023\. Here he writes about how Gr8r approaches hiring, product design and AI engineering. More on the [About page](https://gr8rstudio.com/about/tanjim-islam).

If you want help with this, [book a 30 minute call](https://cal.com/tanjim-38/30min).

## Related reading

- [AI product design](https://gr8rstudio.com/services/product-design)
- [AI UX design: the seven screen states](https://gr8rstudio.com/blog/ai-product-design-guide)
- [AI agent UI patterns that keep users in control](https://gr8rstudio.com/blog/ai-agent-ui-patterns)
- [how to show AI confidence and sources in your UI](https://gr8rstudio.com/blog/show-ai-confidence-in-ui)
- [what a UX audit is and what you get at the end](https://gr8rstudio.com/blog/what-is-a-ux-audit)

Written by

Tanjim Islam

Founder & CEO

Share [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-copilot-in-saas)[X](https://x.com/intent/post?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-copilot-in-saas&text=How%20to%20Design%20an%20AI%20Copilot%20Sidebar%20for%20B2B%20SaaS)

This article supports

[Product Design](https://gr8rstudio.com/services/product-design)[Review your product challenge](https://cal.com/tanjim-38/30min)

## Keep reading

- [ Product Design 26 Oct 26 16 min read AI UX Design: 7 Screen States That Make Users Trust Your AI FeatureAI UX design for SaaS teams: the trust ladder, seven screen states to ship, what engineering must expose, how to measure trust, and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-product-design-guide)
- [ Product Design 26 Oct 26 6 min read When the AI Gets It Wrong: Designing Error States for AI FeaturesHow to design error states for AI: five ways AI fails (wrong, incomplete, refused, slow, unsafe), the UI response for each, and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-feature-error-states)
- [ Product Design 26 Oct 26 6 min read How to Show AI Confidence and Sources in Your UIHow to show AI confidence to users: labels over percentages, sources next to the claim, and patterns for fields, tables, dashboards and documents.By Tanjim Islam](https://gr8rstudio.com/blog/show-ai-confidence-in-ui)

## Book a call with our CEO.

Pick a time that suits you. A product idea or a workflow that slows your team down: a clear problem is enough, no full specification needed.

5.0

[11 verified reviews Read them on Contra ](https://contra.com/tanjimislam/reviews)

- Tanjim is a great designer without any doubt. I love the way he heard my project details and created the better design I was looking for. I highly recommend Tanjim to other Business owners. Thanks Tanjim 🫶
Muhammad Talha · Founder, SetFrame
- Amazing work as always!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- It was really amazing to work with Tanjim, superfast delivery and amazing work
Dhruval Golakiya · Founder, Ryplix
- It was really amazing to work with Tanjim, Superfast delivery and amazing work, highly recommended for any website design and development
Dhruval Golakiya · Founder, Ryplix
- Tanjim and his team did a great job on the hero section I needed in Framer. Super easy to work with and delivered exactly what I had in mind. Highly recommeded!
Muhammad Talha · Founder, SetFrame
- Tanjim is very good at what he does & super easy to work with. He is a genuinely good guy. I highly recommend him!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is a very talented designer who delivers high-quality work with precision. I hired him to handle client projects for my agency & he exceeded expectations every time. If you need an efficient designer, he is the one to go for!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Every project I’ve entrusted to Tanjim has exceeded expectations. If you're looking for a top-tier designer who consistently delivers exceptional work, Tanjim is the one. Looking forward to working together on more projects 🤝
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is an excellent guy. He is super professional in his work and always goes the extra mile. If you're looking for any UI or Framer work, I highly recommend him!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is the founder of Gr8r studio and his Framer expertise is exactly what you need if you are looking for design and development work. Tanjim goes the extra mile on his projects and his attention to detail makes every website stand out I collaborated with Tanjim on a project and he is my main choice for a design partnership.
Miguel Queirós · Collaborator

Your call is with Tanjim Islam, our CEO A free 30-minute conversation about your problem, not a sales pitch.

Calendar not loading? [Open the booking page](https://cal.com/tanjim-38/30min)

Ask Ali