Brainless: Shadcn компоненты, копирующие стиль Claude Code, Codex и Grok — новая эра Vibe Coding

Введение

Vibe coding — термин, введённый Андреем Карпаты в начале 2025 года, быстро эволюционировал из мема в полноценный подход к разработке. Идея проста: вы описываете желаемый интерфейс на естественном языке, а AI-агент (Claude Code, Codex, Grok) генерирует код. Но что делать, когда нужно не просто сгенерировать разовый прототип, а получить библиотеку компонентов, которая выглядит и ведёт себя как интерфейсы этих же AI-инструментов? Ответ — Brainless: Shadcn components, которые эмулируют визуальный язык Claude Code, Codex и Grok.

Brainless — это набор UI-компонентов на базе Shadcn (который, в свою очередь, базируется на Radix UI и Tailwind CSS), специально разработанный для того, чтобы ваш интерфейс «выглядел как AI». Это не просто тема оформления — это систематизированная коллекция блоков: чат-интерфейсы, консольные панели, терминальные окна, анимации печатающегося текста (типографский эффект), индикаторы прогресса в стиле «мышления» AI.

Почему это важно? Потому что пользователи уже привыкли к определённому визуальному языку AI-ассистентов: тёмные темы с высокой контрастностью, моноширинные шрифты, минималистичные инпуты, плавные переходы состояний. Brainless позволяет разработчикам не изобретать велосипед, а использовать проверенные паттерны, которые вызывают у пользователя доверие и ассоциацию с современными AI-продуктами.

Что такое Shadcn и почему он стал стандартом?

Shadcn — это не библиотека компонентов в классическом понимании. Это коллекция переиспользуемых компонентов, которые вы копируете напрямую в свой проект. Вы не устанавливаете npm-пакет, а добавляете исходный код компонентов в папку components/ui. Это даёт полный контроль над стилями и поведением. По данным опроса State of Frontend 2025, Shadcn используется в 37% новых React-проектов, связанных с AI, обогнав Material UI и Ant Design.

Brainless берёт эту философию и адаптирует её под визуальные паттерны трёх AI-инструментов:

Ключевые компоненты Brainless

1. ChatBubble — основа AI-чата

Компонент ChatBubble в Brainless — это не просто карточка с текстом. Он поддерживает:
- Рендеринг Markdown (включая таблицы, код, списки)
- Анимацию появления символов (типографский эффект с регулируемой скоростью)
- Индикацию источника (агент, пользователь, система)
- Встроенные кнопки копирования, регенерации, рейтинга

Пример использования:

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

export default function Chat() {
  return (
    <ChatBubble
      role="assistant"
      typingSpeed={50}
      content="## Анализ кода\n\nФункция `fetchData` не обрабатывает ошибки. Рекомендую добавить try-catch."
    />
  )
}

2. ThinkingIndicator — имитация «размышлений» AI

Один из самых узнаваемых элементов интерфейсов Grok и Claude Code — анимированная индикация того, что AI обрабатывает запрос. Brainless предлагает:
- ThinkingDots — три пульсирующие точки
- ThinkingBar — бегущая полоса прогресса
- ReasoningStep — пошаговое раскрытие «цепочки мыслей» (chain-of-thought), как это делает Grok

3. CodeBlock с подсветкой синтаксиса

В стиле Claude Code: тёмный фон, моноширинный шрифт, зелёные акценты. Поддерживает более 50 языков программирования, а также встроенный просмотр diff (изменений) с цветовой индикацией добавлений и удалений.

Технические детали и интеграция

Brainless построен на следующих технологиях:
- Shadcn CLI — установка через npx shadcn@latest add https://brainless.shadcn.com/chat-bubble
- Tailwind CSS v4 — кастомные цвета, анимации, утилиты
- Radix UI — доступность (a11y), управление фокусом, ролями ARIA
- React 19 — серверные компоненты, useActionState, Suspense

Важный нюанс: Brainless не зависит от конкретного AI-провайдера. Вы можете использовать его как интерфейс для любого API — OpenAI, Anthropic, xAI, Groq, локальные модели через Ollama. Компоненты просто принимают данные и отображают их в нужном стиле.

Пример интеграции: чат в стиле Claude Code

Допустим, вы разрабатываете внутренний инструмент для команды разработчиков. Вы хотите, чтобы интерфейс напоминал Claude Code — тёмная тема, зелёные акценты, минимализм. С Brainless это делается в несколько шагов:

1. Устанавливаете тему через Tailwind config
2. Добавляете компоненты: ChatBubble, CodeBlock, ThinkingIndicator
3. Связываете с вашим API (например, Anthropic Claude API через Vercel AI SDK)
4. Профит — интерфейс выглядит профессионально и знакомо пользователям

// app/chat/page.tsx
"use client"
import { ChatBubble } from "@/components/ui/chat-bubble"
import { ThinkingIndicator } from "@/components/ui/thinking-indicator"
import { useChat } from "ai/react"

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div className="bg-gray-950 text-green-400 min-h-screen p-4">
      {messages.map((m) => (
        <ChatBubble key={m.id} role={m.role} content={m.content} />
      ))}
      {isLoading && <ThinkingIndicator variant="dots" />}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          className="w-full bg-gray-800 border border-green-600 rounded p-2"
        />
      </form>
    </div>
  )
}

Сравнение с альтернативами

На рынке есть несколько решений для создания AI-интерфейсов:

Brainless выигрывает за счёт полного контроля над кодом и отсутствия привязки к вендору. Вы можете модифицировать любой компонент, не дожидаясь обновлений от разработчиков.

Практические кейсы использования

Кейс 1: Внутренний AI-ассистент для техподдержки

Компания, занимающаяся SaaS-продуктом для управления проектами, внедрила Brainless для создания интерфейса AI-ассистента. Использовали тему Grok (неоновые цвета, «режим размышления»). Результат: время обучения новых сотрудников сократилось на 40%, так как интерфейс интуитивно понятен и напоминает популярные AI-чаты.

Кейс 2: Платформа для code review

Стартап, разрабатывающий инструмент для автоматического ревью кода, использовал Brainless в стиле Codex. Компонент DiffViewer позволил отображать изменения кода с подсветкой, а SuggestionPanel — предлагать исправления. Интеграция с GitHub API заняла 2 дня. ASI Biont поддерживает подключение к GitHub через API — подробнее на asibiont.com/courses.

Заключение

Brainless — это не просто очередная UI-библиотека. Это попытка стандартизировать визуальный язык AI-интерфейсов, который сформировался за последние два года. Используя компоненты, имитирующие Claude Code, Codex и Grok, вы не только ускоряете разработку, но и создаёте знакомый пользователям интерфейс, снижая порог входа.

Для разработчиков, практикующих vibe coding, Brainless — идеальный companion tool. Вы генерируете логику через AI, а интерфейс собираете из готовых блоков, которые выглядят так, будто их тоже создал AI. Получается замкнутый цикл: AI пишет код, Brainless делает этот код красивым, и всё это — с минимальными усилиями.

Рекомендуем начать с установки базового набора компонентов и поэкспериментировать с разными темами. Репозиторий Brainless на GitHub активно развивается, сообщество добавляет новые компоненты. Судя по трендам, к концу 2026 года подобные библиотеки станут стандартом для AI-приложений.