125k

2026 年 7 月 - @shadcn/helpers の紹介

AI SDK と TanStack AI をはじめとする、アプリ開発のための小規模で焦点を絞ったヘルパー。

アプリ開発をより簡単にする、小規模で焦点を絞ったヘルパー群の新しいパッケージ @shadcn/helpers をオープンソース化しました。

まずは AI SDK と TanStack AI 向けのヘルパーから始めます。コード内で会話を記述し、モデルも API ルートもネットワーク リクエストも API キーも用意することなく、実際の useChat ライフサイクルを通して実行できます。

UI はネイティブなフレームワークのメッセージやストリーミング イベント (推論、ツール呼び出し、読み込み状態など) を受け取り、メッセージ コンポーネントは実稼働環境とまったく同じように動作します。

AI SDK ヘルパーを使用して書かれた会話は次のとおりです。

import { createChat } from "@shadcn/helpers/ai-sdk"
 
const chat = createChat()
  .user("What changed in this release?")
  .assistant("The release adds keyboard shortcuts and faster search.")
  .user("Can you check the full release notes?")
  .sleep(500)
  .assistant(({ writer }) => {
    writer.stepStart()
 
    // Reasoning.
    writer.reasoning("I should read the release notes first.")
 
    // Tool call.
    writer
      .tool("getReleaseNotes", {
        title: "Reading release notes",
        input: { version: "latest" },
      })
      .sleep(500)
      .output({
        highlights: ["Keyboard shortcuts", "Faster search"],
      })
 
    // Source.
    writer.sourceUrl({
      title: "Release notes",
      url: "https://example.com/releases",
    })
 
    // Response.
    writer.text("The release adds keyboard shortcuts and faster search.")
  })

そのメッセージを渡して useChat に転送します。

import { useChat } from "@ai-sdk/react"
 
const initialMessages = chat.get(0)
const transport = chat.transport()
 
export function Chat() {
  const { messages } = useChat({
    messages: initialMessages,
    transport,
  })
}

パッケージには次の 2 つのアダプターが含まれています。

  • @shadcn/helpers/ai-sdk は、トランスポートとして AI SDK の useChat にプラグインします。
  • @shadcn/helpers/tanstack-ai は、コネクションとして TanStack AI の useChat にプラグインし、実際の AG-UI イベントをストリーミングします。

これを使って、コンポーネントを構築したり、プレビューやデモを作成したり、ドキュメントを執筆したり、決定的な出力とバックエンド依存のないストリーミング インターフェイスをテストしたりできます。

ドキュメントを読む