无脑组件库：重构 Claude Code、Codex 和 Grok 界面，支持多模型添加定价模块

无脑组件库介绍无脑组件库将 Claude Code、Codex 和 Grok 界面重构为 shadcn 组件。它是一个 shadcn/ui 注册表把 Claude Code、Codex 和 Grok 界面重构为可访问的 React 组件涵盖标题、消息、思考线、工具调用、差异对比、编辑器、会话模块等。安装使用方法注册命名空间只需注册一次命名空间components.json → 注册表bunx shadcnlatest registry add brainlesshttps://brainless.swerdlow.dev/r/{name}.json。进行安装可通过两种方式安装方式一bunx shadcnlatest add brainless/claude - session bunx shadcnlatest add brainless/codex - session bunx shadcnlatest add brainless/grok - session方式二不使用命名空间直接使用项目 URL / 站点根目录bunx shadcnlatest add https://brainless.swerdlow.dev bunx shadcnlatest add https://brainless.swerdlow.dev/r/claude - thinking.json bunx shadcnlatest add theswerd/brainless/claude - session导入组件安装完成后从 /components/brainless/... 导入组件例如 ClaudeSession、CodexHeader、GrokThinking。相关文档文档和预览https://brainless.swerdlow.dev/components 和 https://brainless.swerdlow.dev/blocks注册表目录https://brainless.swerdlow.dev/r/registry.json。使用注意事项当 UI 需要呈现为编码代理终端样式时使用无脑组件库要保持语义细节、列表框、单选组、实时区域完整不要将组件简化为纯文本。实际操作情况Claude Code 操作Claude Code v2.1.206 中用户 Ben 收到欢迎提示。有入门提示如让 Claude 创建一个新应用或克隆一个仓库。还有新变化为 /cd 命令添加了目录路径建议添加了 /doctor 检查可提出优化建议可查看 /release - notes 了解更多。用户执行“将无脑组件库的定价模块添加到我们的首页”操作执行了 Bash(bunx shadcn add brainless/pricing)添加了 1 个模块、2 个文件更新了 app/page.tsx 新增 3 行代码。OpenAI Codex 操作OpenAI Codex(v0.132.0) 中模型为 gpt - 6.9 低用户执行“将无脑组件库的定价部分添加到文档站点”操作读取 app/(marketing)/page.tsx编辑 components/pricing.tsx(22 - 0)正在运行 pnpm build。Grok 操作Grok Build Beta 0.2.93Grok 4.21 版本发布可在 /model 选择器中试用。有新建工作区ctrl w、恢复会话ctrl s、变更日志、退出ctrl q等操作提示还提示使用 Shift Tab 切换模式。用户执行“将无脑组件库的定价模块添加到营销页面”操作读取 app/(marketing)/page.tsx写入 components/pricing.tsx本轮操作耗时 9.2 秒。