Provider composesCopy-paste blockminimax-composeLive stage

MiniMax Code Compose

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

components/blocks/composes/minimax-compose.tsx

What can I build for you?

MiniMax H3 Image

One prompt to a finished visual.

MiniMax 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/minimax-compose.tsx and installs its dependencies.

bash

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

tsx

1"use client";
2 
3import * as React from "react";
4import { ArrowUp, ChevronDown, Download, PanelLeft, Plus, Search, Sparkles } 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: "minimax",
16  maxWidth: "max-w-none",
17  placeholder: "Describe your task…",
18  models: [
19    { id: "minimax-m2-5", name: "MiniMax M2.5", hint: "Flagship" },
20    { id: "minimax-m2", name: "MiniMax M2", hint: "Fast" },
21    { id: "minimax-m1", name: "MiniMax M1", hint: "Reasoning" },
22  ],
23  initialToggles: { search: false },
24});
25 
26function MiniMaxMark({ className }: { className?: string }) {
27  return (
28    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
29      <defs>
30        <linearGradient id="minimax-m" x1="2" y1="20" x2="22" y2="4" gradientUnits="userSpaceOnUse">
31          <stop stopColor="#ff3b30" />
32          <stop offset="0.5" stopColor="#ff7a00" />
33          <stop offset="1" stopColor="#ffb020" />
34        </linearGradient>
35      </defs>
36      <path
37        d="M2 20V6h4.6l5.4 7 5.4-7H22v14h-4.4v-7.2L12 19l-5.6-6.2V20H2Z"
38        fill="url(#minimax-m)"
39      />
40    </svg>
41  );
42}
43 
44/** MiniMax Code: light rail, monochrome canvas, capsule composer, H3 promo card. */
45function MiniMaxComposeLayout() {
46  const { toggles, toggle } = useCompose();
47  return (
48    <div className="flex min-h-[400px] w-full bg-white text-[13px] text-[#151515]">
49      <aside className="hidden w-[176px] shrink-0 flex-col @[560px]:flex bg-[#f5f5f4] px-2.5 py-3">
50        <div className="flex items-center gap-1.5 px-0.5">
51          <MiniMaxMark className="h-4 w-4" />
52          <span className="text-[12.5px] font-semibold tracking-tight">MiniMax Code</span>
53          <PanelLeft className="ml-auto h-3.5 w-3.5 text-black/40" aria-hidden="true" />
54        </div>
55        <nav className="mt-4 flex flex-col gap-0.5">
56          {[
57            { icon: Plus, label: "New task" },
58            { icon: Sparkles, label: "Plugins · Skills" },
59            { icon: PanelLeft, label: "Connect phone" },
60          ].map(({ icon: Icon, label }) => (
61            <button
62              key={label}
63              type="button"
64              className="flex items-center gap-2.5 rounded-lg px-1.5 py-[6px] text-left text-[11.5px] hover:bg-black/[0.05]"
65            >
66              <Icon className="h-[14px] w-[14px] text-black/55" aria-hidden="true" />
67              {label}
68            </button>
69          ))}
70        </nav>
71        <p className="mt-4 px-1.5 text-[9px] font-medium uppercase tracking-wide text-black/35">
72          More
73        </p>
74        <div className="flex flex-col gap-0.5">
75          {["MaxHermes", "MaxClaw"].map((label) => (
76            <button
77              key={label}
78              type="button"
79              className="flex items-center gap-2 rounded-lg px-1.5 py-[5px] text-left text-[11px] text-black/60 hover:bg-black/[0.05]"
80            >
81              <span className="h-2.5 w-2.5 rounded-sm border border-black/25" aria-hidden="true" />
82              {label}
83            </button>
84          ))}
85        </div>
86        <div className="mt-auto flex flex-col gap-1 px-0.5">
87          <button
88            type="button"
89            className="flex items-center gap-2 rounded-lg px-1 py-1 text-[10.5px] text-black/60"
90          >
91            <Download className="h-3 w-3" aria-hidden="true" /> Download desktop
92          </button>
93          <button
94            type="button"
95            className="flex items-center gap-2 rounded-lg px-1 py-1 text-[10.5px] text-black/60"
96          >
97            <Sparkles className="h-3 w-3" aria-hidden="true" /> View plans & pricing
98          </button>
99          <button
100            type="button"
101            className="mt-1 w-full rounded-md bg-[#141414] py-1.5 text-[11px] font-medium text-white"
102          >
103            Log in
104          </button>
105        </div>
106      </aside>
107 
108      <div className="relative flex min-w-0 flex-1 flex-col bg-[#fbfbfa] px-5 pb-4 pt-3">
109        <div className="flex items-center justify-end gap-2">
110          <button
111            type="button"
112            className="flex items-center gap-1 rounded-md border border-black/10 bg-white px-2.5 py-1.5 text-[10.5px]"
113          >
114            <Download className="h-3 w-3" aria-hidden="true" /> Download
115          </button>
116          <button
117            type="button"
118            className="rounded-md bg-[#141414] px-3 py-1.5 text-[10.5px] font-medium text-white"
119          >
120            Log in
121          </button>
122        </div>
123 
124        <div className="my-auto flex w-full flex-col items-center">
125          <MiniMaxMark className="h-9 w-9" />
126          <h1 className="mt-2 text-center text-[23px] font-medium tracking-[-0.02em]">
127            What can I build for you?
128          </h1>
129 
130          <div
131            data-agent-id="compose-card"
132            className="mt-4 flex w-full max-w-[470px] items-center gap-2 rounded-full border border-black/[0.08] bg-white py-1.5 pl-4 pr-1.5 shadow-[0_2px_10px_rgba(0,0,0,0.04)] transition-[border-color,box-shadow] duration-200 focus-within:border-black/20 focus-within:shadow-[0_4px_18px_rgba(0,0,0,0.09)]"
133          >
134            <button
135              type="button"
136              aria-label="Attach"
137              className="grid h-7 w-7 shrink-0 place-items-center rounded-full text-black/70 hover:bg-black/5"
138            >
139              <Plus className="h-[17px] w-[17px]" aria-hidden="true" />
140            </button>
141            <ComposeTextarea
142              aria-label="Send a message to MiniMax"
143              placeholder="Describe your task…"
144              rows={1}
145              className="min-w-0 flex-1 px-1 py-1.5 text-[13.5px] leading-5 placeholder:text-black/35"
146            />
147            <div className="flex shrink-0 items-center gap-1">
148              <button
149                type="button"
150                aria-label="Web search"
151                aria-pressed={toggles.search}
152                onClick={() => toggle("search")}
153                className="grid h-7 w-7 place-items-center rounded-full text-black/40 hover:bg-black/5 aria-pressed:bg-black/[0.06] aria-pressed:text-black"
154              >
155                <Search className="h-3.5 w-3.5" aria-hidden="true" />
156              </button>
157              <ModelChip
158                tone="light"
159                className="[&>button]:h-7 [&>button]:px-1 [&>button]:text-[11px] [&>button]:text-black/55 [&>button]:hover:bg-black/5"
160              />
161              <ComposeSendButton
162                aria-label="Send message"
163                className="h-8 w-8 bg-[#141414] text-white hover:bg-[#2b2b2b] disabled:bg-[#e5e5e2] disabled:text-black/30 disabled:opacity-100"
164                icon={<ArrowUp className="h-[16px] w-[16px]" strokeWidth={2.4} />}
165              />
166            </div>
167          </div>
168 
169          <div className="mt-3 flex w-full max-w-[470px] items-center gap-2 rounded-xl border border-black/[0.06] bg-gradient-to-r from-[#fff1ec] via-[#f6f0ff] to-[#eef4ff] px-3 py-2">
170            <MiniMaxMark className="h-6 w-6 shrink-0" />
171            <div className="min-w-0">
172              <p className="text-[10.5px] font-semibold">MiniMax H3 Image</p>
173              <p className="text-[9px] text-black/50">One prompt to a finished visual.</p>
174            </div>
175            <button
176              type="button"
177              className="ml-auto shrink-0 rounded-full bg-[#141414] px-2.5 py-1 text-[9.5px] font-medium text-white"
178            >
179              Try it
180            </button>
181          </div>
182        </div>
183 
184        <p className="flex items-center justify-center gap-2 text-[8.5px] text-black/30">
185          MiniMax can make mistakes. Check important info.
186          <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />
187        </p>
188      </div>
189    </div>
190  );
191}
192 
193export function MiniMaxCompose(props: ComposeProps) {
194  return (
195    <Root {...props}>
196      <MiniMaxComposeLayout />
197    </Root>
198  );
199}
200

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.

MiniMax Code also has a full product page.

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

Open MiniMax Code

Use it with the rest of the library

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

200 lines · copy-ready