生成 UI 所需的 token 更少

使用 Lyra UI，AI 編寫的 token 減少 26%。

我們請 Claude Sonnet 分別使用 Lyra UI、React 搭配 Tailwind 與 shadcn/ui，以及純 HTML、CSS 和 JavaScript，建構相同的聊天、儀表板和設定介面（共 18 次執行）。使用 Lyra UI 時，輸出的 token 比使用 shadcn/ui 少 26%，程式碼行數少 46%，比使用純 HTML 少 33% 的 token，因為一個標籤就能取代標記、樣式和狀態。Lyra 的執行還會讀取 llms-full.txt 參考資料，智能體可以快取並重複使用它。

範例

只需幾個標籤即可完成聊天介面。

<script type="module">
  import '@aceshooting/lyra-ui/components/lr-chat-viewport.js';
  import '@aceshooting/lyra-ui/components/lr-chat-message.js';
  import '@aceshooting/lyra-ui/components/lr-chat-composer.js';
</script>

<lr-chat-viewport>
  <lr-chat-message message-role="user">Summarize this report.</lr-chat-message>
  <lr-chat-message message-role="assistant" status="streaming">Here are the key points…</lr-chat-message>
</lr-chat-viewport>
<lr-chat-composer placeholder="Ask anything"></lr-chat-composer>

瀏覽元件 · 閱讀指南（英文）