Provider composesCopy-paste blockgemini-composeLive stage

Gemini Compose

A copy-paste block that recreates the Gemini prompt stage with Google'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/gemini-compose.tsx. The preview below is the real file, and the code tab is the exact source.

components/blocks/composes/gemini-compose.tsx

About GeminiSubscriptionsFor BusinessGet AppSign in

Happy Diwali!

Google Terms and the Google Privacy Policy apply. Gemini is AI and can make mistakes.

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

Installation

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

bash

npx shadcn@latest add https://agent-ui-27t.pages.dev/r/gemini-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 { GeminiCompose } from "@/components/blocks/composes/gemini-compose";
2 
3<GeminiCompose 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/gemini-compose.tsxtsx

tsx

1"use client";
2 
3import * as React from "react";
4import {
5  ArrowUp,
6  Image as ImageIcon,
7  Mic,
8  PanelLeft,
9  Plus,
10  Settings,
11  Sparkles,
12} from "lucide-react";
13import {
14  ComposeDisclaimer,
15  ComposeSendButton,
16  ComposeTextarea,
17  ModelChip,
18  createCompose,
19  useCompose,
20  type ComposeProps,
21} from "@agent-ui/react";
22 
23const Root = createCompose({
24  id: "gemini",
25  maxWidth: "max-w-none",
26  placeholder: "Type @ for connectors, skills and more",
27  models: [
28    { id: "flash-lite", name: "Flash-Lite" },
29    { id: "pro", name: "Pro" },
30    { id: "ultra", name: "Ultra" },
31  ],
32  defaultModelId: "flash-lite",
33});
34 
35function GeminiSpark({ className }: { className?: string }) {
36  return (
37    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
38      <defs>
39        <linearGradient
40          id="gemini-spark"
41          x1="2"
42          y1="2"
43          x2="22"
44          y2="22"
45          gradientUnits="userSpaceOnUse"
46        >
47          <stop stopColor="#4285f4" />
48          <stop offset="0.5" stopColor="#9b72cb" />
49          <stop offset="1" stopColor="#d96570" />
50        </linearGradient>
51      </defs>
52      <path
53        d="M12 1.8c.65 5.7 4.5 9.55 10.2 10.2-5.7.65-9.55 4.5-10.2 10.2C11.35 16.5 7.5 12.65 1.8 12 7.5 11.35 11.35 7.5 12 1.8Z"
54        fill="url(#gemini-spark)"
55      />
56    </svg>
57  );
58}
59 
60/** Gemini app: cool grey rail, warm halo canvas, floating capsule composer. */
61function GeminiComposeLayout() {
62  const { send } = useCompose();
63  return (
64    <div className="flex min-h-[400px] w-full bg-white text-[13px] text-[#1f1f1f]">
65      <aside className="hidden w-[172px] shrink-0 flex-col @[560px]:flex bg-[#f0f1f3] px-2.5 py-3">
66        <div className="flex items-center gap-2 px-1">
67          <GeminiSpark className="h-[18px] w-[18px]" />
68          <span className="text-[15px] font-medium tracking-tight">Gemini</span>
69          <PanelLeft className="ml-auto h-4 w-4 opacity-50" aria-hidden="true" />
70        </div>
71        <nav className="mt-5 flex flex-col gap-0.5">
72          <button
73            type="button"
74            disabled
75            className="flex items-center gap-2.5 rounded-full px-2 py-1.5 text-left text-[12px] text-black/35"
76          >
77            <Sparkles className="h-[15px] w-[15px]" aria-hidden="true" /> New chat
78          </button>
79          <button
80            type="button"
81            className="flex items-center gap-2.5 rounded-full px-2 py-1.5 text-left text-[12px] text-[#1f1f1f] hover:bg-black/[0.05]"
82          >
83            <ImageIcon className="h-[15px] w-[15px]" aria-hidden="true" /> Images
84          </button>
85          <button
86            type="button"
87            className="mt-1 flex items-center gap-1.5 rounded-full px-2 py-1.5 text-left text-[10.5px] text-[#444746] underline decoration-dotted underline-offset-2"
88          >
89            Sign in to save activity
90          </button>
91        </nav>
92        <div className="mt-auto flex flex-col gap-1.5 px-0.5">
93          <button
94            type="button"
95            className="flex items-center gap-2 rounded-full px-2 py-1.5 text-[12px] hover:bg-black/[0.05]"
96          >
97            <Settings className="h-[15px] w-[15px]" aria-hidden="true" /> Settings
98          </button>
99          <button
100            type="button"
101            className="w-full rounded-full bg-[#a8c7fa] py-1.5 text-[11.5px] font-medium text-[#062e6f]"
102          >
103            Sign in
104          </button>
105          <button
106            type="button"
107            className="w-full rounded-full bg-[#e3e5e8] py-1.5 text-[11.5px] font-medium text-[#1f1f1f]"
108          >
109            Get App
110          </button>
111        </div>
112      </aside>
113 
114      <div className="relative flex min-w-0 flex-1 flex-col items-center overflow-hidden px-5 pb-7 pt-8">
115        <div
116          aria-hidden="true"
117          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_62%_60%_at_52%_46%,#fde68a_0%,#fef3c7_38%,rgba(255,255,255,0)_72%)]"
118        />
119        <div className="mb-2 flex items-center gap-3 self-end text-[11px]">
120          <span className="text-[#0b57d0]">About Gemini</span>
121          <span className="text-[#0b57d0]">Subscriptions</span>
122          <span className="text-[#0b57d0]">For Business</span>
123          <span className="rounded-full bg-[#e9eef6] px-3 py-1.5 text-[#1f1f1f]">Get App</span>
124          <span className="rounded-full bg-[#a8c7fa] px-3 py-1.5 font-medium text-[#062e6f]">
125            Sign in
126          </span>
127        </div>
128 
129        <div className="relative mt-auto flex w-full flex-col items-center">
130          <GeminiSpark className="h-8 w-8" />
131          <h1 className="mt-3 text-center text-[25px] font-normal tracking-[-0.01em] text-[#1f1f1f]">
132            Happy Diwali!
133          </h1>
134 
135          <div
136            data-agent-id="compose-card"
137            className="mt-5 flex w-full max-w-[452px] items-center gap-1.5 rounded-full bg-white py-1.5 pl-3 pr-1.5 shadow-[0_1px_3px_rgba(0,0,0,0.12),0_4px_12px_rgba(0,0,0,0.06)] transition-shadow duration-200 focus-within:shadow-[0_1px_4px_rgba(0,0,0,0.14),0_6px_20px_rgba(11,87,208,0.12)]"
138          >
139            <Plus className="h-5 w-5 shrink-0 text-[#1f1f1f]" aria-hidden="true" />
140            <ComposeTextarea
141              aria-label="Ask Gemini"
142              placeholder="Type @ for connectors, skills and more"
143              rows={1}
144              className="min-w-0 flex-1 px-1 py-1 text-[13px] leading-5 text-[#1f1f1f] placeholder:text-[#5f6368]/70"
145            />
146            <ModelChip
147              tone="light"
148              className="shrink-0 [&>button]:h-7 [&>button]:gap-0.5 [&>button]:px-1 [&>button]:text-[11.5px] [&>button]:text-[#3c4043] [&>button]:hover:bg-transparent"
149            />
150            <button
151              type="button"
152              aria-label="Use microphone"
153              className="grid h-7 w-7 shrink-0 place-items-center rounded-full hover:bg-black/5"
154            >
155              <Mic className="h-[16px] w-[16px] text-[#3c4043]" aria-hidden="true" />
156            </button>
157            <ComposeSendButton
158              aria-label="Send message"
159              className="h-7 w-7 shrink-0 bg-[#0b57d0] text-white hover:bg-[#0b57d0]/90 disabled:opacity-0 disabled:pointer-events-none"
160              icon={<ArrowUp className="h-[15px] w-[15px]" strokeWidth={2.4} />}
161            />
162          </div>
163 
164          <div className="mt-2 w-full max-w-[452px] pl-2">
165            <button
166              type="button"
167              onClick={() => send("What can you do?")}
168              className="flex items-center gap-2 rounded-lg px-1 py-1 text-[12px] text-[#444746] hover:bg-black/5"
169            >
170              <span aria-hidden="true" className="text-[15px] leading-none">
171                ↳
172              </span>
173              What can you do?
174            </button>
175          </div>
176        </div>
177 
178        <ComposeDisclaimer className="relative mt-auto pt-6 text-[9.5px] text-[#5f6368]">
179          Google Terms and the Google Privacy Policy apply. Gemini is AI and can make mistakes.
180        </ComposeDisclaimer>
181      </div>
182    </div>
183  );
184}
185 
186export function GeminiCompose(props: ComposeProps) {
187  return (
188    <Root {...props}>
189      <GeminiComposeLayout />
190    </Root>
191  );
192}
193

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.

Gemini also has a full product page.

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

Open Gemini

Use it with the rest of the library

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

193 lines · copy-ready