Vercel 的 AI Elements 组件库 Bug 好多，各位慎用

BHznJNs · January 1, 2026, 1:40pm

最近在开发一个桌面 AI Agent 客户端，前端的 UI 使用了 shadcn 组件库和 vercel 的 ai elements。
目前主要的 Agent 任务执行界面还有很多功能都没做，只做了基础的对话功能和工具调用展示，就已经给 ai elements 提了三个 issue 了：

github.com/vercel/ai-elements

The code blocks in the docs do not have dark theme.

已打开 02:36PM - 23 Dec 25 UTC

BHznJNs

In the official doc pages like [chatbot example](https://ai-sdk.dev/elements/exa…mples/chatbot) and the [message component](https://ai-sdk.dev/elements/components/message), the code blocks seems to have no dark theme as the screenshots below: <img width="1389" height="894" alt="Image" src="https://github.com/user-attachments/assets/6bd91f0b-7320-491b-8f62-478ced6bee1c" /> <img width="1420" height="983" alt="Image" src="https://github.com/user-attachments/assets/c1910937-e166-4cd6-8c96-11082baddfdb" /> I tried them on both Firefox 146 and Chrome 143.

github.com/vercel/ai-elements

Some text in the code block will be rendered with white colored under light mode

已打开 01:35PM - 01 Jan 26 UTC

BHznJNs

Affected component: code-block, tool As in the screenshots below: <img width="2…088" height="787" alt="Image" src="https://github.com/user-attachments/assets/0403d274-ddb7-41ed-9bb5-ad3dda3999eb" /> <img width="1632" height="548" alt="Image" src="https://github.com/user-attachments/assets/c9f4470f-6384-4d51-9edf-da1145ca1e2b" /> while in the devtool: <img width="680" height="254" alt="Image" src="https://github.com/user-attachments/assets/11cc74b3-e305-45c8-8de5-aa46a0eae7d5" /> <img width="623" height="355" alt="Image" src="https://github.com/user-attachments/assets/68880e8e-cc35-4d87-9e83-169cfe9f509e" /> - - - To reproduce: In such a component: ```tsx <Tool defaultOpen={toolState === "approval-requested"}> <ToolHeader type={`tool-${message.name}`} state={toolState as ToolHeaderProps["state"]} /> <ToolContent> <ToolInput input={inputObj} /> <Activity mode={(message.result ?? message.error) ? "visible" : "hidden"} > <ToolOutput output={message.result} errorText={message.error ?? undefined} /> </Activity> </ToolContent> </Tool> ``` pass the string below as tool result: ``` Directory: . 1 [dir] .android 2 [dir] .bun 3 [dir] .bundle 4 [dir] .cache 5 [dir] .cc-switch 6 [dir] .ccconfig 7 [dir] .cherrystudio 8 [dir] .claude 9 [dir] .claude-code-router 10 [dir] .cline 11 [dir] .codex 12 [dir] .conda 13 [dir] .config 14 [dir] .dbgate 15 [dir] .dbus-keyrings 16 [dir] .deno 17 [dir] .designer 18 [dir] .docker 19 [dir] .dotnet 20 [dir] .fastlane 21 [dir] .jbr 22 [dir] .jdks 23 [dir] .keras 24 [dir] .kilocode 25 [dir] .kilocode-shell-integrations 26 [dir] .lettura 27 [dir] .local 28 [dir] .m2 29 [dir] .modelscope 30 [dir] .ms-ad 31 [dir] .nexe 32 [dir] .npminstall_tarball 33 [dir] .nuget 34 [dir] .openjfx 35 [dir] .papersgpt 36 [dir] .prefs 37 [dir] .pyenv 38 [dir] .QtWebEngineProcess 39 [dir] .redhat 40 [dir] .roo 41 [dir] .rustup 42 [dir] .sbx-denybin 43 [dir] .serena 44 [dir] .sigma-file-manager 45 [dir] .skiko 46 [dir] .ssh 47 [dir] .thumbnails 48 [dir] .tss-merge-to-mkv 49 [dir] .visualdl 50 [dir] .vscode 51 [dir] AndroidStudioProjects 52 [dir] AppData 53 [dir] Application Data 54 [dir] bin 55 [dir] Contacts 56 [dir] Cookies 57 [dir] CrossDevice 58 [dir] Desktop 59 [dir] Documents 60 [dir] Downloads 61 [dir] Favorites 62 [dir] go 63 [dir] Links 64 [dir] Local Settings 65 [dir] Music 66 [dir] My Documents 67 [dir] NetHood 68 [dir] node_modules 69 [dir] Pictures 70 [dir] Postman 71 [dir] PrintHood 72 [dir] Recent 73 [dir] Saved Games 74 [dir] Searches 75 [dir] SendTo 76 [dir] Sync 77 [dir] Synfig 78 [dir] Templates 79 [dir] Videos 80 [dir] Zotero 81 [dir] 「开始」菜单 82 [file] .bash_history 83 [file] .claude.json 84 [file] .claude.json.backup 85 [file] .gitconfig 86 [file] .lesshst 87 [file] .lmmsrc.xml 88 [file] .minttyrc 89 [file] .node_repl_history 90 [file] .npmrc 91 [file] .python_history 92 [file] .ts_node_repl_history 93 [file] .viminfo 94 [file] .wslconfig 95 [file] .yarnrc 96 [file] geckodriver.log 97 [file] java_error_in_studio_12548.log 98 [file] java_error_in_studio_34100.log 99 [file] java_error_in_studio_36232.log 100 [file] java_error_in_studio_5808.log 101 [file] NTUSER.DAT 102 [file] ntuser.dat.LOG1 103 [file] ntuser.dat.LOG2 104 [file] NTUSER.DAT{e42eb5ef-b911-11ef-a0b7-a3dcecfec912}.TxR.0.regtrans-ms 105 [file] NTUSER.DAT{e42eb5ef-b911-11ef-a0b7-a3dcecfec912}.TxR.1.regtrans-ms 106 [file] NTUSER.DAT{e42eb5ef-b911-11ef-a0b7-a3dcecfec912}.TxR.2.regtrans-ms 107 [file] NTUSER.DAT{e42eb5ef-b911-11ef-a0b7-a3dcecfec912}.TxR.blf 108 [file] NTUSER.DAT{e42eb5f0-b911-11ef-a0b7-a3dcecfec912}.TM.blf 109 [file] NTUSER.DAT{e42eb5f0-b911-11ef-a0b7-a3dcecfec912}.TMContainer00000000000000000001.regtrans-ms 110 [file] NTUSER.DAT{e42eb5f0-b911-11ef-a0b7-a3dcecfec912}.TMContainer00000000000000000002.regtrans-ms 111 [file] ntuser.ini 112 [file] package-lock.json 113 [file] package.json 114 [file] test.txt 115 [file] yarn.lock ```

enpitsulin · January 1, 2026, 2:12pm

vercel/ai这一套不是很多人用吗，居然能有那么多问题的吗？

不过说实话好像热门的基于web的客户端都是手搓的组件，没咋见过直接用这里面的组件的

~~PS: 不知道为什么佬友的主题不能reaction，老是提示~~

~~该回应是很久以前创建的。它不能再被修改或移除。~~

PPS: 又好使了

BHznJNs · January 1, 2026, 2:13pm

你说的这个是 ai sdk，sdk 已经出来很久了，基本稳定。
我提的这个是配套的组件库，目前应该是还在迭代

blacksein · January 1, 2026, 4:03pm

就算是ai sdk 他今年4到5大量的major break change 到6（这个倒是API层面改的没那么多）
大开大合都带了很多bug 更别提这之上的东西了
官方的文档里的一些例子都还是错的

Midflowers · January 1, 2026, 4:03pm

感谢提醒www

Topic		Replies	Views
Vercel 真有点草台班子了开发调优软件开发	5	476	February 26, 2026
有没有开源的llm webui组件库呢开发调优人工智能 , 快问快答	15	236	December 7, 2025
cherry studio是不是有点臃肿了？搞七捻三人工智能 , 纯水	127	4314	July 8, 2025
cherry studio v2.0.0——A New AI Workspace, from Chat to Getting Work Done 前沿快讯纯水	27	676	August 5, 2026
Cherry Studio 1.1.19更新问题搞七捻三纯水	23	836	April 7, 2025

Vercel 的 AI Elements 组件库 Bug 好多，各位慎用

Related topics