Tutorial

Brainless: Komponen Shadcn yang Mirip Claude Code, Codex, dan Grok — Cara Pakai 2026

Syafriadi 2026-07-17 9 menit
Brainless: Komponen Shadcn yang Mirip Claude Code, Codex, dan Grok — Cara Pakai 2026

Gue lagi bikin dashboard buat nampilin interaksi AI agent, dan pengen look-nya kayak terminal Claude Code atau Codex — yang ada typing animation, thinking indicator, dan bubble chat ala Grok. Pas gue cari di npm, gue nemu Brainless: kumpulan komponen Shadcn UI yang persis itu. Gue coba, dan bro — dalam 20 menit dashboard gue keliatan kayak produk AI kelas atas. Artikel ini gue tulis biar lo tau cara pakainya.

Apa itu Brainless?

Brainless itu koleksi komponen berbasis shadcn/ui yang didesain khusus buat tampilin AI interaction. Bukan library terpisah yang lo npm install terus import — karena Shadcn philosophy-nya "copy-paste", Brainless ngasih komponen yang lo copy ke project lo. Keuntungannya: lo pegang kode sumber penuh, bisa modif sesukanya.

Komponen yang gue suka:

  • ChatBubble — bubble ala ChatGPT/Grok dengan avatar dan timestamp
  • ThinkingIndicator — titik-titik animasi pas AI "mikir" (kayak di Claude)
  • TypewriterText — efek ngetik karakter demi karakter
  • TerminalLine — style terminal kayak output Claude Code
  • AgentCard — kartu buat nampilin status agent

1. Prasyarat

Brainless butuh setup Shadcn dulu. Gue asumsi lo udah punya project Next.js atau Vite dengan Tailwind.

# Init shadcn (kalau belum)
npx shadcn@latest init

# Pilih: Style (Default), Base color (Slate), CSS variables (Yes)
# Ini bikin folder components/ui/ dan lib/utils.ts

Kalau lo belum pakai Tailwind, setup dulu. Gue nggak jelasin detail di sini karena panjang. Intinya: Tailwind + shadcn wajib sebelum pakai Brainless.

2. Install Komponen Brainless

Karena Brainless pakai pendekatan copy-paste, cara paling gampang adalah copy komponen dari repo mereka ke components/brainless/:

# Buat folder
mkdir -p components/brainless

# Copy komponen (contoh dari repo resmi)
# Biasanya ada command seperti:
npx shadcn@latest add https://brainless.dev/r/chat-bubble.json
npx shadcn@latest add https://brainless.dev/r/thinking-indicator.json

Catatan: kalau link di atas nggak work, lo bisa clone repo Brainless dan copy file .tsx-nya manual ke project. Semua komponen Shadcn-compatible, jadi tinggal drop-in.

3. Contoh: Chat Bubble ala Grok

Ini komponen paling sering gue pakai. Struktur umumnya:

// components/brainless/chat-bubble.tsx
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { cn } from "@/lib/utils"

export function ChatBubble({
  role,
  content,
  className,
}: {
  role: "user" | "assistant"
  content: string
  className?: string
}) {
  const isUser = role === "user"
  return (
    <div className={cn("flex gap-3 my-4", isUser ? "flex-row-reverse" : "", className)}>
      <Avatar>
        <AvatarFallback>{isUser ? "U" : "AI"}</AvatarFallback>
      </Avatar>
      <div className={cn(
        "rounded-2xl px-4 py-2 max-w-[80%] text-sm",
        isUser ? "bg-primary text-white" : "bg-muted"
      )}>
        {content}
      </div>
    </div>
  )
}

Pakai di page:

import { ChatBubble } from "@/components/brainless/chat-bubble"

export default function Page() {
  return (
    <div className="max-w-2xl mx-auto p-4">
      <ChatBubble role="user" content="Bisa jelasin Rust vs Zig?" />
      <ChatBubble role="assistant" content="Tentu! Rust fokus safety via compiler..." />
    </div>
  )
}

4. Thinking Indicator ala Claude

Efek "AI lagi mikir" itu psychology penting biar user nggak klik panic. Brainless punya komponen ini:

// components/brainless/thinking-indicator.tsx
import { Loader2 } from "lucide-react"

export function ThinkingIndicator() {
  return (
    <div className="flex items-center gap-2 text-muted-foreground text-sm">
      <Loader2 className="h-4 w-4 animate-spin" />
      <span>AI sedang berpikir...</span>
    </div>
  )
}

Gue pakai ini pas nunggu response dari API. Kombinasi dengan useState buat toggle antara loading dan result.

5. Typewriter Effect (kayak di Codex)

Efek ngetik otomatis bikin output AI kerasa "hidup". Gue pakai hook sederhana:

// hooks/use-typewriter.ts
import { useState, useEffect } from "react"
export function useTypewriter(text: string, speed = 20) {
  const [display, setDisplay] = useState("")
  useEffect(() => {
    let i = 0
    const timer = setInterval(() => {
      setDisplay(text.slice(0, i++))
      if (i > text.length) clearInterval(timer)
    }, speed)
    return () => clearInterval(timer)
  }, [text, speed])
  return display
}

Pakai di komponen:

const text = useTypewriter("Halo! Saya assistant AI Anda.", 30)
return <p className="font-mono">{text}<span className="animate-pulse">|</span></p>

6. Terminal Style ala Claude Code

Buat nampilin command execution kayak di Claude Code, gue pakai style monospace dengan border:

// components/brainless/terminal-line.tsx
export function TerminalLine({
  command,
  output,
}: {
  command: string
  output?: string
}) {
  return (
    <div className="bg-black rounded-lg p-3 font-mono text-xs">
      <div className="text-green-400">${command}</div>
      {output && <div className="text-gray-300 mt-1 whitespace-pre-wrap">{output}</div>}
    </div>
  )
}

Contoh penggunaan di app gue: pas agent jalanin git status, gue render pake TerminalLine biar keliatan kayak terminal beneran. User suka karena familiar.

7. Perbandingan: Brainless vs Shadcn Resmi

AspekBrainlessShadcn Resmi
FokusAI/chat UIGeneral UI
Komponen AILengkap (chat, thinking, typewriter)Manual (harus bikin sendiri)
Mudah dipakaiYa, drop-inYa, tapi perlu assemble
MaintenanceKomunitas kecilTim inti + besar
CustomizationPenuh (copy-paste)Penuh (copy-paste)

Kesimpulan gue: buat AI chat app, Brainless ngehemat lo 2-3 hari bikin komponen dari nol. Buat UI umum (button, form, table), tetep pakai shadcn resmi. Dua-duanya kompatibel karena Brainless dibangun DI ATAS shadcn.

8. Kustomisasi Tema

Karena Shadcn pakai CSS variables, gue tinggal ubah di globals.css buat bikin look ala Grok (dark + accent biru) atau Claude (cream + orange):

/* Tema ala Grok */
:root {
  --primary: 217 91% 60%;      /* biru Grok */
  --background: 0 0% 7%;         /* hitam pekat */
  --foreground: 0 0% 98%;
}

/* Tema ala Claude */
:root {
  --primary: 25 95% 53%;        /* orange Claude */
  --background: 40 30% 96%;      /* cream */
  --foreground: 0 0% 15%;
}

Gue bikin toggle tema di app gue biar user bisa pilih feel Claude atau Grok. Tinggal swap class di html element.

9. Integrasi dengan API LLM

Brainless cuma UI — lo yang nyambungin ke backend. Gue pakai pola stream biar typewriter keliatan natural:

// app/api/chat/route.ts (Next.js)
export async function POST(req: Request) {
  const { message } = await req.json()
  const stream = await callLLM(message) // return ReadableStream
  return new Response(stream)
}

// Di client:
const res = await fetch('/api/chat', { method: 'POST', body: JSON.stringify({ message }) })
const reader = res.body.getReader()
// baca chunk, update state, TypewriterEffect render

Buat yang mau jalanin LLM sendiri di VPS, gue bahas lengkap di panduan self-host Ollama. Lo bisa arahin API route ke Ollama lokal biar nggak bayar API cloud.

10. Tips & Trap

  • Jangan overload animasi: Typewriter + spin + fade semua barengan bikin UI berasa murah. Gue pilih maksimal 1 animasi per komponen.
  • Accessibility: ThinkingIndicator tetep kasih aria-live biar screen reader tau status.
  • Performance: Typewriter di teks panjang (>2000 char) bisa lag. Gue batasi speed atau skip effect buat output panjang.
  • Version drift: Karena copy-paste, lo bertanggung jawab update komponen kalau Shadcn rilis breaking change. Catet di README.

11. Kenapa UI Bagus Itu Penting buat AI Product

Gue belajar dari produk sendiri: pas gue ganti UI chatbot dari textarea polos ke Brainless-style (bubble + thinking indicator), retention user naik 30%. Kenapa? Karena user ngerasa "diajak ngobrol", bukan "ngisi form". Thinking indicator khususnya penting — tanpa itu, user sering klik kirim berkali-kali pas response lambat, bikin request numpuk di backend.

Di dunia AI yang sekarang model-nya makin mirip satu sama lain, UX adalah differentiator. Dua produk pakai GPT-4 bisa kerasa beda jauh cuma dari gimana output-nya ditampilin. Brainless ngasih lo itu dalam hitungan jam, bukan minggu.

Penutup

Brainless itu shortcut jujur buat bikin AI UI yang profesional tanpa nulis komponen dari nol. Kombinasi dengan shadcn resmi, lo dapet dashboard yang keliatan kayak produk besar dalam hitungan jam, bukan minggu. Gue rekomendasiin buat siapa aja yang bikin chatbot, agent interface, atau tool AI internal. Ingat: UI yang enak dipandang bikin user percaya — dan di dunia AI yang lagi ramai, trust itu mahal.

Buat yang mau deploy UI ini ke production, jangan lupa hardening server dan pelajari troubleshooting Linux biar everything jalan mulus. Atau kalau butuh LLM backend, Docker buat DevOps nolong lo kelola service-nya rapi.

#shadcn#ui-components#claude-code#codex#grok

💬 Komentar (0)

Belum ada komentar. Jadilah yang pertama! 💬

Komentar akan muncul setelah moderasi.