Mozilla、Pyodideを使ってHTMLファイルでAIエージェントを動かす"Wasm Agents"

Mozillaは、AI関連のOSSプロジェクトを進めるMozilla.aiにおいて、WebAssembly（WASM）とPyodideを使ってAIエージェントをブラウザ上のHTMLで直接動かす「Wasm Agents Blueprint」をGitHubリポジトリに公開した。

「Wasm Agents Blueprint」のGitHubリポジトリ

各HTMLファイル単体で呼び出せるAIエージェント

「Wasm Agents Blueprint」はHTMLファイルのみで構成されているテンプレートだが、ブラウザに標準実装されているWebAssembly、ブラウザ上でPythonを実行できる「Pyodide」技術を用いることで、HTMLファイル単体でエージェントを動作させる仕組みを設計図"Blueprint"として公開している。デモフォルダには、4枚のHTMLファイルが設置してあり、OpenAI APIやOllamaローカルモデルを使ったエージェントの簡単な設定、呼び出しなどをブラウザ上のHTMLから行える。GitHubのページにはシンプルなチュートリアルがあるので実際に、demosフォルダにあるhello_agent.htmlを試してみた。Gitが必要になるが

git clone https://github.com/mozilla-ai/wasm-agents-blueprint.git

で必要なファイルが構成されるので、

cd wasm-agents-blueprint/demos

でdemosフォルダへ移動。ここには目的のデモ用のHTMLファイル４つ（hello_agent.html、handoff_demo.html、tool_calling.html、ollama_local.html）と設定ファイルconfig.jsがあるのみ。hello_agent.htmlは基本的な会話エージェント例で、handoff_demo.htmlはマルチエージェント、tool_calling.htmlはWebスクレイプイング文字数カウント機能を持つエージェント、ollama_local.htmlはローカルLLM版Ollamaを用いるエージェントがあるが、ここでは基本的な会話エージェント例「hello_agent.html」を表示させてみよう。といっても設定はとても簡単。config.jsにOPENAI_API_KEYを設定して、

window.APP_CONFIG = {
    OPENAI_API_KEY: 'your-api-key-here'
};

hello_agent.htmlをダブルクリックしてブラウザで開くだけ。Hello Agent！と書いてあるHTMLファイルが開く。設定マーク「Initialize Pyodide Environment」をクリックするとエージェントが読み込まれる。

「Initialize Pyodide Environment」でPyodide環境を読み込んでいる

次に、下の方にHTMLフォームでプロンプト設定（Custom prompt）、振る舞い・指示(AgentInstructions)の入力がある。ここではQuickExamples：にあるPhilosophy（哲学）を設定し、日本語表示させるたin Japaneseと追加。「Run Agent」ボタンを押すと、