Provider composesCopy-paste blockkimi-composeLive stage

Kimi Compose

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

components/blocks/composes/kimi-compose.tsx

KIMI

Choose project Plugins

Explore inspiration · AI-generated, for reference only

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

Installation

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

bash

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

tsx

1"use client";
2 
3import * as React from "react";
4import {
5  ArrowUp,
6  Bookmark,
7  ChevronDown,
8  Command,
9  Download,
10  Folder,
11  Lightbulb,
12  Mic,
13  MoreHorizontal,
14  PanelLeft,
15  Plus,
16  Puzzle,
17  Search,
18  Sparkles,
19} from "lucide-react";
20import {
21  ComposeSendButton,
22  ComposeTextarea,
23  ModelChip,
24  createCompose,
25  type ComposeProps,
26} from "@agent-ui/react";
27 
28const Root = createCompose({
29  id: "kimi",
30  maxWidth: "max-w-none",
31  placeholder: "Ask anything, or task an agent...",
32  models: [
33    { id: "k3-high", name: "K3 High", hint: "Best quality" },
34    { id: "k3", name: "K3", hint: "Balanced" },
35    { id: "k2", name: "K2", hint: "Fast" },
36  ],
37  defaultModelId: "k3-high",
38});
39 
40const NAV = [
41  { icon: Sparkles, label: "My Kimi" },
42  { icon: Puzzle, label: "Plugins" },
43  { icon: Bookmark, label: "Scheduled" },
44  { icon: Lightbulb, label: "Inspiration" },
45  { icon: PanelLeft, label: "Slides" },
46  { icon: Command, label: "3D Make" },
47];
48 
49/** Kimi: quiet grey rail, monolithic wordmark, composer with attached action tray. */
50function KimiComposeLayout() {
51  return (
52    <div className="flex min-h-[400px] w-full bg-white text-[13px] text-[#141414]">
53      <aside className="hidden w-[176px] shrink-0 flex-col @[560px]:flex bg-[#f7f7f7] px-2 py-2.5">
54        <div className="flex items-center gap-2 px-1">
55          <span className="grid h-6 w-6 place-items-center rounded-md bg-[#141414] text-[13px] font-black text-white">
56            K
57          </span>
58          <PanelLeft className="ml-auto h-4 w-4 text-black/40" aria-hidden="true" />
59        </div>
60 
61        <button
62          type="button"
63          className="mt-3 flex w-full items-center gap-2 rounded-lg border border-black/[0.07] bg-white px-2 py-1.5 text-[11.5px] text-black/60 shadow-[0_1px_1px_rgba(0,0,0,0.02)]"
64        >
65          <Search className="h-3.5 w-3.5" aria-hidden="true" /> New chat
66          <span className="ml-auto flex items-center gap-0.5 text-[9px] text-black/35">
67            <Command className="h-2.5 w-2.5" aria-hidden="true" />K
68          </span>
69        </button>
70 
71        <nav className="mt-2 flex flex-col gap-0.5">
72          {NAV.map(({ icon: Icon, label }) => (
73            <button
74              key={label}
75              type="button"
76              className="flex items-center gap-2.5 rounded-lg px-1.5 py-[5px] text-left text-[11.5px] hover:bg-black/[0.04]"
77            >
78              <Icon className="h-[14px] w-[14px] text-black/55" aria-hidden="true" />
79              {label}
80              {label === "3D Make" ? (
81                <span className="ml-1 rounded bg-[#e7efff] px-1 py-px text-[7.5px] font-semibold uppercase text-[#2f6bff]">
82                  New
83                </span>
84              ) : null}
85            </button>
86          ))}
87        </nav>
88 
89        <p className="mt-3 px-1.5 text-[9.5px] font-medium uppercase tracking-wide text-black/30">
90          Projects
91        </p>
92        <button
93          type="button"
94          className="flex items-center gap-2 rounded-lg px-1.5 py-1 text-left text-[11px] hover:bg-black/[0.04]"
95        >
96          <Folder className="h-3.5 w-3.5 text-black/50" aria-hidden="true" /> New project
97        </button>
98        <p className="mt-3 px-1.5 text-[9.5px] font-medium uppercase tracking-wide text-black/30">
99          Chats
100        </p>
101        <p className="px-1.5 py-1 text-[10px] text-black/35">Log in to sync chat history</p>
102 
103        <div className="mt-auto flex flex-col gap-0.5">
104          {["Get App", "About us", "Language", "Get help"].map((label) => (
105            <button
106              key={label}
107              type="button"
108              className="flex items-center gap-2 rounded-lg px-1.5 py-[5px] text-left text-[10.5px] text-black/60 hover:bg-black/[0.04]"
109            >
110              {label}
111              <ChevronDown
112                className="ml-auto h-2.5 w-2.5 -rotate-90 opacity-30"
113                aria-hidden="true"
114              />
115            </button>
116          ))}
117          <button
118            type="button"
119            className="mt-1 flex items-center gap-2 rounded-lg px-1.5 py-1 text-[11px] font-medium hover:bg-black/[0.04]"
120          >
121            <Download className="h-3.5 w-3.5" aria-hidden="true" /> Log in
122          </button>
123        </div>
124      </aside>
125 
126      <div className="relative flex min-w-0 flex-1 flex-col items-center px-5 pb-5 pt-3">
127        <div className="flex items-center gap-2 self-end">
128          <button
129            type="button"
130            className="rounded-full bg-[#f2f2f2] px-3 py-1.5 text-[10.5px] font-medium"
131          >
132            Log in
133          </button>
134          <button
135            type="button"
136            className="flex items-center gap-1.5 rounded-full bg-[#141414] px-3 py-1.5 text-[10.5px] font-medium text-white"
137          >
138            <Download className="h-3 w-3" aria-hidden="true" /> Download for Desktop
139          </button>
140        </div>
141 
142        <div className="my-auto flex w-full flex-col items-center">
143          <h1 className="text-[40px] font-black leading-none tracking-[0.06em]">KIMI</h1>
144 
145          <div
146            data-agent-id="compose-card"
147            className="mt-5 w-full max-w-[470px] overflow-hidden rounded-2xl border border-black/[0.08] bg-white shadow-[0_2px_14px_rgba(0,0,0,0.05)] transition-[border-color,box-shadow] duration-200 focus-within:border-black/20 focus-within:shadow-[0_4px_22px_rgba(0,0,0,0.09)]"
148          >
149            <div className="p-3">
150              <ComposeTextarea
151                aria-label="Ask anything, or task an agent"
152                placeholder="Ask anything, or task an agent..."
153                rows={2}
154                className="min-h-[44px] px-0.5 py-1 text-[14px] leading-6 placeholder:text-black/35"
155              />
156              <div className="mt-1 flex items-center justify-between">
157                <button
158                  type="button"
159                  aria-label="Attach"
160                  className="relative grid h-7 w-7 place-items-center rounded-full text-black/70 hover:bg-black/5"
161                >
162                  <Plus className="h-4 w-4" aria-hidden="true" />
163                  <span className="absolute right-0.5 top-0.5 h-1.5 w-1.5 rounded-full bg-[#2f6bff]" />
164                </button>
165                <div className="flex items-center gap-1">
166                  <ModelChip
167                    tone="light"
168                    className="[&>button]:h-7 [&>button]:px-1 [&>button]:text-[11px] [&>button]:text-black/60 [&>button]:hover:bg-black/5"
169                  />
170                  <button
171                    type="button"
172                    aria-label="Dictation"
173                    className="grid h-7 w-7 place-items-center rounded-full text-black/50 hover:bg-black/5"
174                  >
175                    <Mic className="h-3.5 w-3.5" aria-hidden="true" />
176                  </button>
177                  <ComposeSendButton
178                    aria-label="Send message"
179                    className="h-7 w-7 bg-[#e6e6e6] text-black/40 hover:bg-[#dcdcdc] disabled:bg-[#e6e6e6] disabled:text-black/40 disabled:opacity-100"
180                    icon={<ArrowUp className="h-3.5 w-3.5" strokeWidth={2.3} />}
181                  />
182                </div>
183              </div>
184            </div>
185            <div className="flex items-center gap-4 border-t border-black/[0.05] bg-[#f7f7f7] px-3 py-1.5 text-[10px] text-black/55">
186              <span className="flex items-center gap-1">
187                <Folder className="h-3 w-3" aria-hidden="true" /> Choose project
188              </span>
189              <span className="flex items-center gap-1">
190                <Puzzle className="h-3 w-3" aria-hidden="true" /> Plugins
191              </span>
192            </div>
193          </div>
194 
195          <div className="mt-3 flex w-full max-w-[470px] flex-wrap items-center justify-center gap-1.5">
196            {["3D Make", "Slides", "Deep Research", "Docs", "Build", "Sheets"].map((label) => (
197              <button
198                key={label}
199                type="button"
200                className="rounded-full border border-black/[0.08] bg-white px-2.5 py-1 text-[10px] text-black/60 hover:bg-black/[0.03]"
201              >
202                {label}
203              </button>
204            ))}
205            <button
206              type="button"
207              aria-label="More tools"
208              className="grid h-5 w-5 place-items-center rounded-full border border-black/[0.08] bg-white text-black/40"
209            >
210              <MoreHorizontal className="h-3 w-3" aria-hidden="true" />
211            </button>
212          </div>
213        </div>
214 
215        <p className="flex items-center gap-1 text-[9px] text-black/35">
216          <Lightbulb className="h-3 w-3" aria-hidden="true" /> Explore inspiration · AI-generated,
217          for reference only
218        </p>
219      </div>
220    </div>
221  );
222}
223 
224export function KimiCompose(props: ComposeProps) {
225  return (
226    <Root {...props}>
227      <KimiComposeLayout />
228    </Root>
229  );
230}
231

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.

Kimi also has a full product page.

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

Open Kimi

Use it with the rest of the library

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

231 lines · copy-ready