TypeScriptとVercel AI SDKで実現するLLMアプリケーション開発：フロントエンドからバックエンド、そしてChrome拡張まで

TypeScriptとVercel AI SDKで 実現するLLMアプリケーション開発 フロントエンドからバックエンド、 そしてChrome拡張まで TsKaigi 2025 開発本部 AIやっていきチーム 加瀬健太（@Kesin11） 1

目次 01 LLMアプリ開発の主な課題 02 AI SDKの紹介 03 AI SDKによるチャットUIのデモ 04 活用事例紹介：社内ChatGPTクローン 05 活用事例紹介：ブラウザ拡張への組み込み 06 まとめ 2

自己紹介 • 加瀬健太（@Kesin11） • 職歴 • 2023/07 転職、生産性向上チームで主にGitHub Actions基盤 • 2025/01 AIやっていきチームに異動 • 普段の業務 • ChatGAI（社内内製のChatGPTクローン）開発・運用 @Kesin11 • CursorやDifyなどのAI関連ツールのアカウント管理・運用 @Kesin11 • Kintone AIラボ のR&D協力 • 趣味 • github.blog /changelogを毎朝見ること al @kesin11.bsky.soci • VSCodeのリリースノートを毎月見ること • どちらも2021年から続いている趣味 3

LLMのアプリ、サービスを作ったことがある人？ ©️ Cybozu, Inc.

Pythonで作った人？ ts/jsで作った人？ ©️ Cybozu, Inc.

今日はTypeScriptでLLMアプリを開発 する話をします ©️ Cybozu, Inc.

LLMアプリ開発の主な課題 ©️ Cybozu, Inc. 7

LLMアプリ開発の主な課題 • 多様なLLMモデル・プロバイダーへの対応 • ストリーミングレスポンスの対応 • 進化の速いLLM機能への追従

LLMアプリ開発の主な課題 多様なLLMモデル・プロバイダーへの対応 • OpenAI, Anthropic, Googleなど各プロバイダーが提供するモデルとAPIの仕様差異 • プロバイダーごとの個別のSDK学習コスト • 独自に抽象レイヤーを作りたくなる

LLMアプリ開発の主な課題 ストリーミングレスポンスの対応 • 今や当たり前となったチャットUI • あまり使用する機会のないストリームを使用した UIの逐次反映の実装が必要

LLMアプリ開発の主な課題 進化の速いLLM機能への追従 • 各種新機能のキャッチアップとアプリへの組み込みが必要 • 界隈の進化スピードが早い • Tool Use (Function Calling) • GPT-4：2023/06 • 画像やPDFなどのマルチモーダル対応 • GPT-4o：2024/05 • Reasoning • o1-preview：2024/09 • DeepSeek R1：2025/01 • LLM側のAPI対応 + UIにも組み込む必要がある

やることが意外に多い！ 対応モデル x 機能 + フロントエンドの複雑さ 1

AI SDK AI SDK • Vercel社が主導して開発するOSS • TypeScript製 • 数多くのLLMプロバイダーをサポート（コミュニティ開発も含む）

AI SDK LLMモデルアクセスの抽象化 • 多数のLLMプロバイダーと言語モデルへの統一されたインターフェースを提供 引用: https://ai-sdk.dev/docs/foundations/providers-and-models

AI SDK LLMモデルアクセスの抽象化 • generateTextを用いた基本的なテキスト生 成のコード（非ストリーミング） • createOpenAI()でAI SDK用の抽象化された modelを作成 • 今回はOpenAI API互換のGitHub Models • generateText()にmodelとプロンプトを渡す $ curl -X POST --json '{"prompt":"日本の首都はいつ から東京ですか？"}' http://localhost:30 00/generate {"text":"日本の首都が「東京」となったのは、**1868 年（明治元年）**です。\n\nこの年、明治天皇が江戸城 に入城し、江戸が「東京（とうけい）」と改称されまし た。それまでの首都は「京都（平安京）」でした。正式 に「東京」が首都と定められた法律はありませんが、事 実上、1868年から日本の首都は東京とされています。 \n\n**まとめ：**\n- 1868年（明治元年）に江戸が 「東京」と改称\n- 明治天皇が東京に移ったことで、事 実上の首都となった\n\nご参考になれば幸いです。"}

AI SDK ストリーミング処理とチャットUIの実装 • 構成 • バックエンドはストリーミング形式でレスポンスを返却 • フロントエンドはストリーミングのチャンクごとにUIを更新 リクエスト AI SDK ストリーミング レスポンス フロントエンド バックエンド 各LLMのAPI

AI SDK ストリーミング処理とチャットUIの実装 • バックエンド: streamTextによるストリーミングレスポンス 生成 • Node.jsのサーバーでAI SDKを動かす （HonoやNext.js） • 次のクライアント側のuseChatがデフォルトで /api/chat を向いているのでここを実装

AI SDK ストリーミング処理とチャットUIの実装 • フロントエンド (React): useChat hookによるチャットUI • streamTextのレスポンスと組み合わせると ストリーミングのチャットUIを簡単に作れる • チャット履歴のstateやチャット用formのハンドリング などもuseChatから提供される

AI SDK ストリーミング処理とチャットUIの実装 • デモ：streamText, useChat, GitHub Models（gpt-4.1） • （当日は動画デモ）

AI SDK 新しいLLM機能への対応 • マルチモーダル入力 • 画像やPDFなどの入力のサポート • Tool Use (Function Calling) • 今ではMCPの1つ前の技術、という説明が理解しやすいか • 機能が抽象化されているため、どのモデルでも同じように動く • （モデル自体がその機能をサポートしていれば） • 最近はモデル固有の機能や差異が最近増えており、AI SDKの抽象化も限界がきてそう • 特に最近流行りのReasoning機能（thinkタグ） • providerOptionsというパラメータで各SDK固有のオプションを渡せる脱出ハッチが用意されている

活用事例 • サイボウズ社内向けChatGPTクローン • ブラウザ拡張機能への組み込み 2

サイボウズ社内向けChatGPTクローン

社内向けChatGPTクローン 開発の経緯 • 社内で安心してAIを利用できるシステムの提供 & 内製によるLLM開発のノウハウの獲得 • AI SDK + Next.jsのOSSをForkしてスタート １度作り直してから半年以上運用中 • 7日間UUが500弱、デイリーUUが約250で利用者 数はゆるやかに増加傾向 24

社内向けChatGPTクローン システム構成: • インフラ（AWS）：ALB + ECS + DocumentDB + 社内のEntraID（SSOによる認証） • フロントエンド：React • バックエンド：Next.js • LLMプロバイダー：Azure OpenAI Service, Amazon Bedrock, Google Cloud Vertex AI • 導入実績、利用規約、支払いの観点からやはり御三家が便利 • モデルは最新のものに適宜入れ替え • 最近はGPT-4.1, o3, o4-mini, Claude 3.7 Sonnet, Gemini 2.5 Pro, Gemini 2.5 Flash 25

社内向けChatGPTクローン AI SDKを利用していて感じるメリット • AI SDKのドキュメントにサンプルが充実している • RAG、マルチモーダルなど実装がやや複雑な機能のサンプルも存在するのが助かる • 基本ドキュメント：https://ai-sdk.dev/docs/introduction • cookbook（機能逆引き）：https://ai-sdk.dev/cookbook • 各プロバイダーごとにサンプルコード：https://ai-sdk.dev/providers/ai-sdk-providers • UIとの統合が簡単 • 開発しているメンバー3人はフロントエンドに詳しいわけではない • useChatのようなReactのhookを提供していたり、UI周りのドキュメントを参考にできたりと助かっている 26

• https://ai-sdk.dev/docs/introduction
• https://ai-sdk.dev/cookbook
• https://ai-sdk.dev/providers/ai-sdk-providers

社内向けChatGPTクローン AI SDKを利用していて感じるメリット • テンプレートが充実している • https://vercel.com/templates?type=ai • URLがai-sdk.devではなくvercel.comなので注意 • AI SDKのドキュメントからたどり着けない・・・ • 実際にデモとして動かすことが可能 • GitHubでコードも見られる • 作りたいものに近いテンプレートをForkしてスタート するのも良いと思います 27

• https://vercel.com/templates?type=ai

ブラウザ拡張への組み込み

ブラウザ拡張への組み込み ブラウザ拡張機能 • TypeScriptなのでほぼ同じコードのままブラウザ拡張にできる • ChromeのサイドパネルからAIにチャットできると普通に便利では • ページ内のDOMやjsからコンテンツ情報を取得可能 • コピペしなくてもLLMに情報を渡すことが可能 • そうなるとチャットUIの必要もないかもしれない • アイディア次第では面白いものが作れそう 趣味で作っているKintone専用のChrome拡張

ブラウザ拡張への組み込み ブラウザ拡張でAI SDKを使うための工夫 • バックエンドのstreamTextとフロントエンドのuseChatがペアで使われることを前提としている • useChatはstreamTextが動いているサーバーのurlを指定する必要がある • だがブラウザ拡張内でサーバーは動かせない・・・どうする？ 30

ブラウザ拡張への組み込み ブラウザ拡張でAI SDKを使うための工夫 • ServiceWorkerで/api/chatへのfetchを 横取りしてしまおう • 本来はキャッシュを返したりやオフライン動 作のための機能 • streamTextのレスポンスを返すことで useChatが動いた！ • もう少し詳しい話はZennの記事を参照 • Vercel AI SDKでChrome拡張機能 + ロー カルLLMを動かす 31

• https://zenn.dev/kesin11/articles/20250228_ai_sdk_chrome_extension

ブラウザ拡張への組み込み （おまけ）ローカルLLMと組み合わせると夢が広がる（かもしれない） • mac上でも動かせる小さなLLMの性能がかなり向上しており、GPT-4o程度の賢さに到達 • （少なくともベンチマーク上では） • 業務用としてブラウザ拡張を開発するにはセキュリティ上の懸念がいくつか考えられる • 業務データをクラウドのAIに送信してもよいのか？ • LLMを使うためのAPIキーを全員に配布してもよいのか？ • いっそローカルPCでLLMを動かせばそういう懸念は全てなくなる • macでもwindowsでもollamaを使うとかなり簡単にLLMを動かすことが可能 • 興味があればローカルLLMも遊んでみてほしい 32

まとめ • AI SDKについて • TypeScriptエコシステムにおけるLLMアプリケーション開発のハードルを下げる便利ライブラリ • 特に複数プロバイダーの取り扱いやチャットUIの実装が非常に簡単なのが便利 • 参考にできるドキュメントやテンプレートも充実している • 実用例の紹介 • サイボウズのChatGPTクローン • Next.jsによるPython無しの全てTypeScript構成 • ブラウザ拡張への応用

kintone AIラボリリースしました kintone製品にAI機能が標準機能として組み込まれました kintone内のデータ活用の促進 kintoneの利用者の裾野を広げる 34

kintone AIラボリリースの記事出しました 35

We are hiring!! Webエンジニア（kintone／生成AI） ポジション募集中です！ 36