Provider composesCopy-paste blockmicrosoft-composeLive stage

Copilot Compose

A copy-paste block that recreates the Copilot prompt stage with Microsoft's rail, brand mark, prompt surface, model menu, and tool toggles. The block is not a package component: copy the file, or install it with the shadcn CLI, then edit the layout like any other file in your project. It is assembled entirely from Agent UI compose primitives, and every control is keyboard accessible.

Source you own: install the block with the shadcn CLI or copy components/blocks/composes/microsoft-compose.tsx. The preview below is the real file, and the code tab is the exact source.

components/blocks/composes/microsoft-compose.tsx

MicrosoftCopilot

Sign inME

What can I help with?

Chat to find answers, create content, and complete tasks with AI.

Copilot is AI. It can make mistakes. Check important info.

The code tab contains the full block, ready to copy.

Installation

Add the block with the shadcn CLI. It writes components/blocks/composes/microsoft-compose.tsx and installs its dependencies.

bash

npx shadcn@latest add https://agent-ui-27t.pages.dev/r/microsoft-compose.json

Prefer to own the file manually? Install the dependencies, then copy the source from the Files section.

bash

pnpm add @agent-ui/react lucide-react

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

Import the copied file and render it anywhere. The block accepts onSend, disabled, and className; wire onSend to any backend.

tsx

1import { MicrosoftCompose } from "@/components/blocks/composes/microsoft-compose";
2 
3<MicrosoftCompose onSend={(text) => console.log(text)} />

Files

One file. The same source is served by the shadcn registry endpoint, so the CLI and the docs can never drift.

components/blocks/composes/microsoft-compose.tsxtsx

tsx

1"use client";
2 
3import * as React from "react";
4import { ArrowUp, Globe, Mic, Plus } from "lucide-react";
5import {
6  ComposeSendButton,
7  ComposeTextarea,
8  ModelChip,
9  createCompose,
10  useCompose,
11  type ComposeProps,
12} from "@agent-ui/react";
13 
14const Root = createCompose({
15  id: "microsoft",
16  maxWidth: "max-w-none",
17  placeholder: "Message Copilot",
18  models: [
19    { id: "copilot", name: "Copilot", hint: "Balanced" },
20    { id: "copilot-think", name: "Copilot Think Deeper", hint: "Reasoning" },
21    { id: "copilot-quick", name: "Copilot Quick", hint: "Fast" },
22  ],
23  initialToggles: { search: false },
24});
25 
26function CopilotMark({ className }: { className?: string }) {
27  return (
28    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
29      <defs>
30        <linearGradient
31          id="copilot-mark"
32          x1="2"
33          y1="3"
34          x2="22"
35          y2="21"
36          gradientUnits="userSpaceOnUse"
37        >
38          <stop stopColor="#2563eb" />
39          <stop offset="0.5" stopColor="#a855f7" />
40          <stop offset="1" stopColor="#f59e0b" />
41        </linearGradient>
42      </defs>
43      <path
44        d="M7.4 3.5h6.9a5.6 5.6 0 0 1 5.6 5.6v5.8a5.6 5.6 0 0 1-5.6 5.6H9.6a5.6 5.6 0 0 1-5.6-5.6v-4.4a7 7 0 0 1 3.4-6Z"
45        fill="url(#copilot-mark)"
46      />
47      <path
48        d="M9 8.5c2.4-1.4 5.4-.2 6.3 2.3.9 2.5-.5 5.2-3 6"
49        stroke="#fff"
50        strokeOpacity="0.75"
51        strokeWidth="1.5"
52        fill="none"
53        strokeLinecap="round"
54      />
55    </svg>
56  );
57}
58 
59/** Microsoft Copilot: parchment canvas, editorial serif, multicolour gradient ring. */
60function MicrosoftComposeLayout() {
61  const { toggles, toggle } = useCompose();
62  return (
63    <div className="relative flex min-h-[400px] w-full flex-col overflow-hidden bg-[#faf9f0] px-6 pb-5 pt-3 text-[13px] text-[#1b1b1b]">
64      <div className="relative flex items-center gap-2">
65        <span className="grid grid-cols-2 gap-[1.5px]" aria-hidden="true">
66          <span className="h-2 w-2 bg-[#f25022]" />
67          <span className="h-2 w-2 bg-[#7fba00]" />
68          <span className="h-2 w-2 bg-[#00a4ef]" />
69          <span className="h-2 w-2 bg-[#ffb900]" />
70        </span>
71        <span className="text-[11.5px] font-semibold">Microsoft</span>
72        <span className="h-3 w-px bg-black/20" aria-hidden="true" />
73        <span className="text-[12px] font-semibold">Copilot</span>
74        <div className="ml-auto flex items-center gap-2 text-[10.5px]">
75          <span className="text-black/60">Sign in</span>
76          <span className="grid h-6 w-6 place-items-center rounded-full border border-black/25 text-[8px] font-medium">
77            ME
78          </span>
79        </div>
80      </div>
81 
82      <div
83        aria-hidden="true"
84        className="pointer-events-none absolute -right-8 top-16 h-24 w-24 rotate-12 rounded-3xl bg-[linear-gradient(135deg,#c084fc,#7c3aed)] opacity-25 blur-[1px]"
85      />
86      <div
87        aria-hidden="true"
88        className="pointer-events-none absolute -left-10 bottom-10 h-20 w-20 -rotate-12 rounded-3xl bg-[linear-gradient(135deg,#7dd3fc,#2563eb)] opacity-20 blur-[1px]"
89      />
90      <div
91        aria-hidden="true"
92        className="pointer-events-none absolute right-6 bottom-16 h-14 w-14 rotate-45 rounded-2xl bg-[linear-gradient(135deg,#fbbf24,#f97316)] opacity-20 blur-[1px]"
93      />
94 
95      <div className="relative my-auto flex w-full flex-col items-center pt-5">
96        <CopilotMark className="h-9 w-9" />
97        <h1 className="mt-3 text-center font-serif text-[30px] leading-tight tracking-[-0.02em]">
98          What can I help with?
99        </h1>
100        <p className="mt-1 text-center text-[11.5px] text-black/55">
101          Chat to find answers, create content, and complete tasks with AI.
102        </p>
103 
104        <div
105          data-agent-id="compose-card"
106          className="mt-5 w-full max-w-[478px] rounded-full bg-[conic-gradient(from_140deg,#7c3aed,#2563eb,#06b6d4,#f59e0b,#ec4899,#7c3aed)] p-[1.5px] shadow-[0_3px_16px_rgba(37,99,235,0.14)] transition-shadow duration-200 focus-within:shadow-[0_5px_24px_rgba(37,99,235,0.24)]"
107        >
108          <div className="flex items-center gap-2 rounded-full bg-white py-1.5 pl-3 pr-1.5">
109            <CopilotMark className="h-5 w-5 shrink-0" />
110            <ComposeTextarea
111              aria-label="Message Copilot"
112              placeholder="Message Copilot"
113              rows={1}
114              className="min-w-0 flex-1 px-1 py-1 text-[13.5px] leading-5 placeholder:text-black/40"
115            />
116            <button
117              type="button"
118              aria-label="Toggle web search"
119              aria-pressed={toggles.search}
120              onClick={() => toggle("search")}
121              className="grid h-7 w-7 shrink-0 place-items-center rounded-full text-black/45 hover:bg-black/5 aria-pressed:bg-[#eef2ff] aria-pressed:text-[#2563eb]"
122            >
123              <Globe className="h-3.5 w-3.5" aria-hidden="true" />
124            </button>
125            <ModelChip
126              tone="light"
127              className="hidden shrink-0 @[430px]:block [&>button]:h-7 [&>button]:px-1 [&>button]:text-[10.5px] [&>button]:text-black/50 [&>button]:hover:bg-black/5"
128            />
129            <button
130              type="button"
131              aria-label="Start dictation"
132              className="hidden h-7 w-7 shrink-0 place-items-center rounded-full text-black/45 hover:bg-black/5 @[400px]:grid"
133            >
134              <Mic className="h-3.5 w-3.5" aria-hidden="true" />
135            </button>
136            <ComposeSendButton
137              aria-label="Send message"
138              className="h-7 w-7 shrink-0 bg-[#1b1b1b] text-white hover:bg-black disabled:bg-[#dedcd0] disabled:text-white disabled:opacity-100"
139              icon={<ArrowUp className="h-3.5 w-3.5" strokeWidth={2.4} />}
140            />
141          </div>
142        </div>
143 
144        <div className="mt-3 flex items-center gap-2">
145          <button
146            type="button"
147            aria-label="Attach"
148            className="flex items-center gap-1 rounded-full border border-black/10 bg-white/70 px-2.5 py-1 text-[10px] text-black/55"
149          >
150            <Plus className="h-3 w-3" aria-hidden="true" /> Add content
151          </button>
152          {["Create an image", "Help me write", "Make a plan"].map((label) => (
153            <button
154              key={label}
155              type="button"
156              className="rounded-full border border-black/10 bg-white/70 px-2.5 py-1 text-[10px] text-black/55 hover:bg-white"
157            >
158              {label}
159            </button>
160          ))}
161        </div>
162      </div>
163 
164      <p className="relative text-center text-[8.5px] text-black/35">
165        Copilot is AI. It can make mistakes. Check important info.
166      </p>
167    </div>
168  );
169}
170 
171export function MicrosoftCompose(props: ComposeProps) {
172  return (
173    <Root {...props}>
174      <MicrosoftComposeLayout />
175    </Root>
176  );
177}
178

Built with

The block imports these Agent UI primitives. Each one is a package export with its own docs page, so you can change the layout without giving up the behaviour.

Accessibility

All controls expose accessible names; the textarea supports Enter to send and Shift+Enter for a new line.

Copilot also has a full product page.

Metadata, model list, and the same block in a dedicated route.

Open Copilot

Use it with the rest of the library

MicrosoftCompose composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

178 lines · copy-ready