LLMを拡張機能に

Transcript

1. Chrome拡張機能にLLMを組み込む
2. ・前回がVercel AIを使ってLLM作成 ・Chrome拡張として動かす
3. なぜChrome拡張機能なのか？ ・手軽に使える ・ローカルでLLMを動かせばAPI料金かからない
4. Chrome 拡張機s H Manifes` H 定義や宣言を行4 H Service workerG H ブラウザのイベントを処理できT H Content scriptG H DOM を利用で、変更を加えたりできT H Toolbar actio@ H 拡張機能ツールバーのアイコンをクリックした時に、処理を 実行できる
5. 構2 ( サービスワーカー（バックエンド担当 ( LLM、イベンÉ ( サイドパネル（フロント担当 ( 画面サイドにチャット
7. 用意するもの ! manifest.jso& ! background.j# ! index.html
8. manifest.json 1 2 3 4 5 6 7 8 9 10 11 12 13 { , , , [ , ], { }, { , } } "manifest_version" "name" "version" "permissions" "background" "service_worker" "side_panel" "default_path" : : : : : : : : 3 "LLM Assistant" "1.0" "sidePanel" "scripting" "background.js" "index.html"
9. background.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 const const async const await const return if model ({ baseURL , apiKey , }). ( ); (request Request) { { messages } request. (); result ({ model, system 　 , messages, }); result. (); }; self. ( , (event ) { (event.request.url. ( )) { event. ( (event.request)); } }); = : : = : => = = : : any => createOpenAI chat handleChat json streamText toDataStreamResponse addEventListener endsWith respondWith handleChat 'https://models.github.ai/inference' 'api-key' 'openai/gpt-4.1' 'AIアシスタント' 'fetch' '/api/chat' // リクエストを横取り
10. index.html(react) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import from export default function const return div div div form input button button form div { useChat } ; () { { messages, input, handleInputChange, handleSubmit } ({ api , }); ( < > {messages. ((message) ( < key={message.id}> {message.role } {message.content} </ > ))} < onSubmit={handleSubmit}> < name="prompt" placeholder="質問を入力してください" value={input} onChange={handleInputChange} /> < type="submit">送信</ > </ > </ > ); } "@ai-sdk/react" "/api/chat" "user" "User: " "AI: " Chat useChat map = : => === ? :
11. 拡張機能として読み込む
12. 完成！
13. https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite テンプレート