UI生成に必要なトークンを削減

Lyra UIならAIの出力トークンが26%減。

Claude Sonnetに、チャット、ダッシュボード、設定画面を、Lyra UI、React・Tailwind・shadcn/ui、素のHTML・CSS・JavaScriptの3通りで同じように作らせました(計18回)。Lyra UIでは、shadcn/uiと比べて出力トークンが26%、行数が46%少なく、素のHTMLと比べてもトークンが33%少なくなりました。1つのタグでマークアップ、スタイル、状態管理をまとめて担えるためです。Lyra UIの実行では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>

コンポーネントを見る · ガイドを読む（英語）