Token不用就过期了！我花 1 小时开源了个“类纸风” AI 专属 UI——papyrai-ui

一、想法Token不用就过期了放着不用简直就是暴殄天物但每次想随便搭个 AI 小应用跑跑看都要从头写一遍对话气泡、流式输出、状态指示器……不仅繁琐还非常劝退。我就在想前端五花八门且框架繁多能不能干脆做一个完全免费、通用、甚至带点“原始”质感的 AI UI 呢于是主打一个“拒绝浪费 API”我大概花了 1 个小时的极限操作狗头撸出了这个开源的 UI 组件库——papyrai-ui。它的名字来源于papyrus莎草纸 ai ui。正如其名这是一个类纸视觉风格狗头obsidian我这这个主题长时间看文字确实舒服的 Web Components 组件库专为 AI 应用场景量身定制。因为底层基于 Web Components所以它是完全框架无关的不管你用 Vue、React、Angular 还是原生 HTML引入就能直接跑。目前这个项目还处于“写着玩”的早期阶段初衷就是为了方便大家包括我自己快速消耗 API、随拿随用。虽然 Bug 可能还不少个人精力和时间有限大佬们轻喷但用来快速搭个 AI 玩具绝对够用了欢迎共建点个Star。以下是项目的具体介绍二、papyrai-uipapyrai-ui(papyrus ai ui) 是一个类纸风格的 Web Components 组件库专为 AI 应用场景设计。github演示地址也是用了cdn可能能刷新代理papyrai-ui项目地址 : https://github.com/HuYaochao/papyrai-ui文章下面有全部截图如果点不开的话。https://huyaochao.github.io/papyrai-ui/docs/特性18 个 AI 专属组件- 思考指示器、流式文本、消息气泡、提示输入、工具调用、推理过程、反馈、引用、源卡片、令牌使用、安全过滤、幻觉提示、未找到、假装错误、置信度、差异对比、成本显示、模型徽章SVG 图标系统- 8 种 logo 模板 50 个手绘风格图标69 个基础组件- 覆盖 Elements、Inputs、Navigation、Overlays、Layout、Data 六大类类纸视觉风格- 纸张纹理、阴影效果、手写字体完整主题支持- 亮色/暗色主题CSS 变量驱动框架无关- 基于 Web Components兼容 React/Vue/Angular/原生 HTML技术栈技术说明LitWeb Components 基础类 (~6KB)Rollup打包工具组件命名类型前缀示例AI 组件ai-ai-thinking,ai-streamSVG 组件svg-svg-logo,svg-icon基础组件p-p-button,p-modal使用// 引入全部组件importpapyrai-ui;// 或按需引入importpapyrai-ui/components/ai-thinking;!-- AI 组件 --ai-thinking/ai-thinkingai-stream/ai-streamai-messageroleassistant你好/ai-messageai-promptplaceholder请输入提示词.../ai-prompt!-- 基础组件 --p-buttonvariantprimary点击我/p-buttonp-carddivslotheader标题/div内容区域/p-cardp-inputlabel用户名placeholder请输入/p-input主题切换// 切换到暗色主题document.documentElement.setAttribute(data-theme,dark);// 切换到亮色主题默认document.documentElement.removeAttribute(data-theme);三、截图首页文档AI组件SVG 体系ElementsInputsNavigationOverlaysLayoutData