Skip to content
Agent UI
Provider composesCopy-paste blockdeepseek-composeLive stage

DeepSeek Chat Compose

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

components/blocks/composes/deepseek-compose.tsx
deepseek

Hi, I'm DeepSeek.

How can I help you today?

DeepSeek can make mistakes. Check important info.

Terms of Use · 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/deepseek-compose.tsx and installs its dependencies.

bash
npx shadcn@latest add https://agent-ui-27t.pages.dev/r/deepseek-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
import { DeepSeekCompose } from "@/components/blocks/composes/deepseek-compose";
 
<DeepSeekCompose 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/deepseek-compose.tsxtsx
tsx
"use client";
 
import * as React from "react";
import { ArrowUp, Brain, Paperclip, Search } from "lucide-react";
import {
  ComposeDisclaimer,
  ComposeSendButton,
  ComposeTextarea,
  ModelChip,
  createCompose,
  useCompose,
  type ComposeProps,
} from "@agent-ui/react";
 
const Root = createCompose({
  id: "deepseek",
  maxWidth: "max-w-none",
  placeholder: "Message DeepSeek",
  models: [
    { id: "deepseek-v4", name: "DeepSeek V4", hint: "Flagship" },
    { id: "deepseek-r2", name: "DeepSeek R2", hint: "Reasoning" },
    { id: "deepseek-lite", name: "DeepSeek Lite", hint: "Fast" },
  ],
  initialToggles: { search: true, reasoning: false },
});
 
function DeepSeekWhale({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 32 32" className={className} aria-hidden="true">
      <path
        d="M5 19.5c4.2 3.6 9.6 3.4 13.4.3 3-2.5 4.9-6.2 5.1-9.8-1.6 1.2-3.4 1.7-5.2 1.4.6 1.9-.5 3.6-2.4 3.6-4.2 0-8.4 1.6-11.9 4.5Z"
        fill="currentColor"
      />
      <circle cx="20.4" cy="9.4" r="1.15" fill="#fff" />
      <path
        d="M8.5 24.5c3.4 1.6 7.4 1.6 10.9-.2"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        fill="none"
      />
    </svg>
  );
}
 
/** DeepSeek: cool blue-tinted canvas, whale mark, DeepThink + Search toggles. */
function DeepSeekComposeLayout() {
  const { toggles, toggle } = useCompose();
  return (
    <div className="relative flex min-h-[400px] w-full flex-col bg-[#f4f7fd] px-6 pb-6 pt-4 text-[13px] text-[#1f2329]">
      <div className="flex items-center gap-1.5">
        <DeepSeekWhale className="h-5 w-5 text-[#4d6bfe]" />
        <span className="text-[15px] font-semibold tracking-tight text-[#4d6bfe]">deepseek</span>
        <div className="ml-auto flex items-center gap-2">
          <button type="button" className="text-[11px] text-[#5f6673]">
            Sign in
          </button>
          <button
            type="button"
            className="rounded-full bg-[#4d6bfe] px-3.5 py-1.5 text-[11px] font-medium text-white"
          >
            Sign up
          </button>
        </div>
      </div>
 
      <div className="my-auto flex w-full flex-col items-center">
        <DeepSeekWhale className="h-12 w-12 text-[#4d6bfe]" />
        <h1 className="mt-3 text-center text-[24px] font-medium tracking-[-0.01em]">
          Hi, I&apos;m DeepSeek.
        </h1>
        <p className="mt-1 text-[12px] text-[#7a828f]">How can I help you today?</p>
 
        <div
          data-agent-id="compose-card"
          className="mt-5 flex w-full max-w-[478px] flex-col rounded-2xl border border-[#dbe3f7] bg-white p-3 shadow-[0_2px_12px_rgba(77,107,254,0.07)] transition-[border-color,box-shadow] duration-200 focus-within:border-[#4d6bfe]/45 focus-within:shadow-[0_4px_20px_rgba(77,107,254,0.14)]"
        >
          <ComposeTextarea
            aria-label="Send a message"
            placeholder="Message DeepSeek"
            rows={2}
            className="min-h-[44px] px-0.5 py-1 text-[14px] leading-6 placeholder:text-[#9aa2b1]"
          />
          <div className="mt-2 flex items-center justify-between gap-2">
            <div className="flex items-center gap-1.5">
              <button
                type="button"
                aria-label="Toggle reasoning"
                aria-pressed={toggles.reasoning}
                onClick={() => toggle("reasoning")}
                className="flex items-center gap-1 rounded-full border border-[#e2e8f5] px-2 py-1 text-[11px] text-[#5f6673] hover:bg-[#f4f7fd] aria-pressed:border-[#4d6bfe]/40 aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4d6bfe]"
              >
                <Brain className="h-3 w-3" aria-hidden="true" /> DeepThink
              </button>
              <button
                type="button"
                aria-label="Toggle web search"
                aria-pressed={toggles.search}
                onClick={() => toggle("search")}
                className="flex items-center gap-1 rounded-full border border-[#e2e8f5] px-2 py-1 text-[11px] text-[#5f6673] hover:bg-[#f4f7fd] aria-pressed:border-[#4d6bfe]/40 aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4d6bfe]"
              >
                <Search className="h-3 w-3" aria-hidden="true" /> Search
              </button>
            </div>
            <div className="flex shrink-0 items-center gap-1.5">
              <ModelChip
                tone="light"
                className="[&>button]:h-7 [&>button]:px-1 [&>button]:text-[11px] [&>button]:text-[#5f6673] [&>button]:hover:bg-[#f4f7fd]"
              />
              <button
                type="button"
                aria-label="Attach"
                className="grid h-7 w-7 place-items-center rounded-full text-[#5f6673] hover:bg-[#f4f7fd]"
              >
                <Paperclip className="h-3.5 w-3.5" aria-hidden="true" />
              </button>
              <ComposeSendButton
                aria-label="Send message"
                className="h-8 w-8 bg-[#4d6bfe] text-white hover:bg-[#3f5ce8] disabled:bg-[#c7d2f8] disabled:text-white disabled:opacity-100"
                icon={<ArrowUp className="h-[16px] w-[16px]" strokeWidth={2.4} />}
              />
            </div>
          </div>
        </div>
 
        <p className="mt-4 text-[10px] text-[#8b93a1]">
          DeepSeek can make mistakes. Check important info.
        </p>
      </div>
 
      <ComposeDisclaimer className="mt-0 text-[9px] text-[#a0a7b3]">
        <a href="#" className="underline">
          Terms of Use
        </a>{" "}
        ·{" "}
        <a href="#" className="underline">
          Privacy Policy
        </a>
      </ComposeDisclaimer>
    </div>
  );
}
 
export function DeepSeekCompose(props: ComposeProps) {
  return (
    <Root {...props}>
      <DeepSeekComposeLayout />
    </Root>
  );
}
 

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.

DeepSeek Chat also has a full product page.

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

Open DeepSeek Chat
Use it with the rest of the library

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

151 lines · copy-ready