Provider composesCopy-paste blockzai-composeLive stage

GLM Chat Compose

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

components/blocks/composes/zai-compose.tsx

ZCode ↗API ↗Sign in

Create anything you can imagine

Full-Stack

Writing

Data Insight

Generated by AI. For reference only. · Terms of Service · Privacy Policy

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

Installation

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

bash

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

tsx

1"use client";
2 
3import * as React from "react";
4import { ArrowUp, Home, PanelLeft, Plus, Search } 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: "zai",
16  maxWidth: "max-w-none",
17  placeholder: "Send a Message",
18  models: [
19    { id: "glm-5-3-flash", name: "GLM-5.3-Flash", hint: "Fast" },
20    { id: "glm-5-3", name: "GLM-5.3", hint: "Flagship" },
21    { id: "glm-4-6", name: "GLM-4.6", hint: "Previous" },
22  ],
23  initialToggles: { search: false },
24});
25 
26const GALLERY = [
27  { label: "Full-Stack", tone: "from-[#f6f6f4] to-[#ececea]" },
28  { label: "Writing", tone: "from-[#f7f7f5] to-[#eeeeec]" },
29  { label: "Data Insight", tone: "from-[#f5f7fa] to-[#e9edf5]" },
30];
31 
32/** Z.ai: framed app shell, icon rail, smoky serif hero, capability gallery. */
33function ZaiComposeLayout() {
34  const { toggles, toggle } = useCompose();
35  return (
36    <div className="flex min-h-[400px] w-full bg-[#fbfbfa] p-2.5 text-[13px] text-[#1f2329]">
37      <div className="flex min-w-0 flex-1 overflow-hidden rounded-xl border border-black/[0.08] bg-white">
38        <aside className="flex w-10 shrink-0 flex-col items-center border-r border-black/[0.06] py-2.5">
39          <PanelLeft className="h-4 w-4 text-black/45" aria-hidden="true" />
40          <span className="mt-2 grid h-6 w-6 place-items-center rounded-md bg-[#ececea]">
41            <Home className="h-3.5 w-3.5" aria-hidden="true" />
42          </span>
43          <span className="mt-auto grid h-6 w-6 place-items-center rounded-full bg-[#e8e8e5] text-[10px] font-medium text-black/50">
44            G
45          </span>
46        </aside>
47 
48        <div className="relative flex min-w-0 flex-1 flex-col">
49          <div className="flex items-center justify-end gap-3 px-4 py-2.5 text-[10.5px]">
50            <span className="text-black/60">ZCode ↗</span>
51            <span className="text-black/60">API ↗</span>
52            <span className="rounded-full bg-[#141414] px-3 py-1.5 text-[10.5px] font-medium text-white">
53              Sign in
54            </span>
55          </div>
56 
57          <div className="relative flex flex-1 flex-col items-center px-5">
58            <div
59              aria-hidden="true"
60              className="pointer-events-none absolute left-1/2 top-0 h-16 w-[300px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,#9ca3af_0%,#d1d5db_45%,rgba(255,255,255,0)_75%)] opacity-50 blur-xl"
61            />
62            <h1 className="relative mt-2 text-center font-serif text-[22px] font-medium tracking-[-0.01em]">
63              Create anything you can imagine
64            </h1>
65 
66            <div className="relative mt-3 grid w-full max-w-[420px] grid-cols-3 gap-2">
67              {GALLERY.map(({ label, tone }) => (
68                <div key={label}>
69                  <div
70                    className={`relative h-[62px] overflow-hidden rounded-lg border border-black/[0.05] bg-gradient-to-br ${tone}`}
71                  >
72                    <span className="absolute inset-x-2 top-2 h-1.5 rounded-sm bg-[#e04a3a]/70" />
73                    <span className="absolute inset-x-2 top-4 h-1 rounded-sm bg-black/10" />
74                    <span className="absolute inset-x-2 top-6 h-1 w-3/4 rounded-sm bg-black/10" />
75                    <span className="absolute bottom-2 left-2 h-2.5 w-8 rounded-sm bg-[#141414]/85" />
76                  </div>
77                  <p className="mt-1 text-center text-[9.5px] text-black/60">{label}</p>
78                </div>
79              ))}
80            </div>
81 
82            <div
83              data-agent-id="compose-card"
84              className="mt-auto mb-2 flex w-full max-w-[470px] flex-col rounded-xl border border-black/[0.09] bg-white p-2.5 shadow-[0_2px_8px_rgba(0,0,0,0.03)] transition-[border-color,box-shadow] duration-200 focus-within:border-black/25 focus-within:shadow-[0_4px_16px_rgba(0,0,0,0.08)]"
85            >
86              <ComposeTextarea
87                aria-label="Send a message to GLM"
88                placeholder="Send a Message"
89                rows={1}
90                className="min-h-[34px] px-0.5 py-1 text-[13.5px] leading-5 placeholder:text-black/35"
91              />
92              <div className="mt-1 flex items-center justify-between">
93                <div className="flex items-center gap-1">
94                  <button
95                    type="button"
96                    aria-label="Attach"
97                    className="grid h-6 w-6 place-items-center rounded-full border border-black/10 text-black/60 hover:bg-black/5"
98                  >
99                    <Plus className="h-3.5 w-3.5" aria-hidden="true" />
100                  </button>
101                  <button
102                    type="button"
103                    aria-label="Toggle web search"
104                    aria-pressed={toggles.search}
105                    onClick={() => toggle("search")}
106                    className="flex items-center gap-1 rounded-full px-2 py-1 text-[10.5px] text-black/45 hover:bg-black/5 aria-pressed:bg-black/[0.06] aria-pressed:text-black"
107                  >
108                    <Search className="h-3 w-3" aria-hidden="true" /> Web search
109                  </button>
110                </div>
111                <div className="flex items-center gap-1.5">
112                  <ModelChip
113                    tone="light"
114                    className="[&>button]:h-7 [&>button]:px-1 [&>button]:text-[11px] [&>button]:text-black/55 [&>button]:hover:bg-black/5"
115                  />
116                  <ComposeSendButton
117                    aria-label="Send message"
118                    className="h-7 w-7 bg-[#e9e9e6] text-black/45 hover:bg-[#dededa] disabled:bg-[#e9e9e6] disabled:text-black/45 disabled:opacity-100"
119                    icon={<ArrowUp className="h-3.5 w-3.5" strokeWidth={2.2} />}
120                  />
121                </div>
122              </div>
123            </div>
124          </div>
125 
126          <p className="px-4 pb-2 text-center text-[8.5px] text-black/35">
127            Generated by AI. For reference only. ·{" "}
128            <a href="#" className="underline">
129              Terms of Service
130            </a>{" "}
131            ·{" "}
132            <a href="#" className="underline">
133              Privacy Policy
134            </a>
135          </p>
136        </div>
137      </div>
138    </div>
139  );
140}
141 
142export function ZaiCompose(props: ComposeProps) {
143  return (
144    <Root {...props}>
145      <ZaiComposeLayout />
146    </Root>
147  );
148}
149

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.

GLM Chat also has a full product page.

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

Open GLM Chat

Use it with the rest of the library

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

149 lines · copy-ready