Provider composesCopy-paste blockmeta-composeLive stage

Meta AI Compose

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

components/blocks/composes/meta-compose.tsx

∞ Meta

Meta AI, the personal assistant that helps you create

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

Installation

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

bash

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

tsx

1"use client";
2 
3import * as React from "react";
4import { ArrowUp, ChevronDown, Pencil, Plus } from "lucide-react";
5import {
6  ComposeSendButton,
7  ComposeTextarea,
8  ModelChip,
9  createCompose,
10  type ComposeProps,
11} from "@agent-ui/react";
12 
13const Root = createCompose({
14  id: "meta",
15  maxWidth: "max-w-none",
16  placeholder: "Ask Meta AI anything...",
17  models: [
18    { id: "llama-4", name: "Llama 4", hint: "Multimodal" },
19    { id: "llama-4-maverick", name: "Llama 4 Maverick", hint: "Fast" },
20    { id: "llama-3-1", name: "Llama 3.1", hint: "Open" },
21  ],
22});
23 
24function MetaFlower({ className }: { className?: string }) {
25  return (
26    <svg viewBox="0 0 48 48" className={className} aria-hidden="true">
27      <defs>
28        <linearGradient
29          id="meta-flower"
30          x1="6"
31          y1="6"
32          x2="42"
33          y2="42"
34          gradientUnits="userSpaceOnUse"
35        >
36          <stop stopColor="#8b5cf6" />
37          <stop offset="0.45" stopColor="#e879f9" />
38          <stop offset="1" stopColor="#3b82f6" />
39        </linearGradient>
40      </defs>
41      <g fill="url(#meta-flower)">
42        <ellipse cx="24" cy="10.5" rx="4.6" ry="8.8" />
43        <ellipse cx="37.5" cy="24" rx="8.8" ry="4.6" />
44        <ellipse cx="24" cy="37.5" rx="4.6" ry="8.8" />
45        <ellipse cx="10.5" cy="24" rx="8.8" ry="4.6" />
46        <ellipse cx="33.5" cy="14.5" rx="4" ry="7.5" transform="rotate(45 33.5 14.5)" />
47        <ellipse cx="33.5" cy="33.5" rx="4" ry="7.5" transform="rotate(-45 33.5 33.5)" />
48        <ellipse cx="14.5" cy="33.5" rx="4" ry="7.5" transform="rotate(45 14.5 33.5)" />
49        <ellipse cx="14.5" cy="14.5" rx="4" ry="7.5" transform="rotate(-45 14.5 14.5)" />
50      </g>
51    </svg>
52  );
53}
54 
55/** Meta AI: white stage, gradient bloom, oversized editorial headline, soft capsule. */
56function MetaComposeLayout() {
57  return (
58    <div className="relative flex min-h-[400px] w-full flex-col bg-white px-6 pb-5 pt-3 text-[13px] text-[#0a0a0a]">
59      <div className="flex items-center gap-2">
60        <MetaFlower className="h-5 w-5" />
61        <span className="text-[13px] font-semibold tracking-tight">∞ Meta</span>
62        <div className="ml-auto flex items-center gap-2">
63          <button
64            type="button"
65            className="rounded-full bg-[#f0f0f0] px-3 py-1.5 text-[10.5px] font-medium"
66          >
67            Download app
68          </button>
69          <button
70            type="button"
71            className="rounded-full bg-[#5b5bf6] px-3.5 py-1.5 text-[10.5px] font-medium text-white"
72          >
73            Log in
74          </button>
75        </div>
76      </div>
77      <span className="absolute left-5 top-14 grid h-7 w-7 place-items-center rounded-full border border-black/10 text-black/50">
78        <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
79      </span>
80 
81      <div className="my-auto flex w-full flex-col items-center pt-4">
82        <MetaFlower className="h-12 w-12" />
83        <h1 className="mt-4 max-w-[420px] text-center text-[27px] leading-[1.14] tracking-[-0.02em]">
84          Meta AI, the personal assistant that{" "}
85          <span className="bg-gradient-to-r from-[#8b5cf6] via-[#d946ef] to-[#3b82f6] bg-clip-text text-transparent">
86            helps you create
87          </span>
88        </h1>
89 
90        <div
91          data-agent-id="compose-card"
92          className="mt-5 flex w-full max-w-[470px] flex-col rounded-[26px] border border-black/[0.05] bg-white p-3 shadow-[0_6px_26px_rgba(0,0,0,0.09)] transition-[box-shadow,border-color] duration-200 focus-within:border-[#8b5cf6]/30 focus-within:shadow-[0_10px_32px_rgba(139,92,246,0.16)]"
93        >
94          <ComposeTextarea
95            aria-label="Message Llama"
96            placeholder="Ask Meta AI anything..."
97            rows={2}
98            className="min-h-[42px] px-2 py-1 text-[14px] leading-6 placeholder:text-black/40"
99          />
100          <div className="mt-1 flex items-center justify-between">
101            <div className="flex items-center gap-1">
102              <button
103                type="button"
104                aria-label="Attach"
105                className="grid h-7 w-7 place-items-center rounded-full border border-black/15 text-black/65 hover:bg-black/5"
106              >
107                <Plus className="h-3.5 w-3.5" aria-hidden="true" />
108              </button>
109              <ModelChip
110                tone="light"
111                className="[&>button]:h-7 [&>button]:px-1.5 [&>button]:text-[10.5px] [&>button]:text-black/45 [&>button]:hover:bg-black/5"
112              />
113            </div>
114            <ComposeSendButton
115              aria-label="Send message"
116              className="h-8 w-8 bg-[#b9b9fb] text-white hover:bg-[#a5a5f8] disabled:bg-[#dcdcfd] disabled:text-white disabled:opacity-100"
117              icon={<ArrowUp className="h-[16px] w-[16px]" strokeWidth={2.4} />}
118            />
119          </div>
120        </div>
121 
122        <button
123          type="button"
124          className="mt-3 flex items-center gap-1.5 rounded-full bg-white px-3 py-1.5 text-[10.5px] shadow-[0_2px_10px_rgba(0,0,0,0.08)]"
125        >
126          Learn more <ChevronDown className="h-3 w-3" aria-hidden="true" />
127        </button>
128      </div>
129    </div>
130  );
131}
132 
133export function MetaCompose(props: ComposeProps) {
134  return (
135    <Root {...props}>
136      <MetaComposeLayout />
137    </Root>
138  );
139}
140

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.

Meta AI also has a full product page.

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

Open Meta AI

Use it with the rest of the library

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

140 lines · copy-ready