VoltAgent（TypeScript の AIエージェントフレームワーク）を軽く試してみる

## はじめに

はてなブックマークのテクノロジーカテゴリの新着ページで、技術情報を見ていた時にみかけた「VoltAgent」を試してみました。

https://x.com/youtoy/status/1924063010341183923

最近、TypeScript（や Python）の AIエージェントフレームワークを複数試して記事に書いたりもしていたのですが、そのような流れもあって「VoltAgent」が気になりました。


## 公式の情報

以下が「VoltAgent」の公式ページなどです。

●VoltAgent - Open Source TypeScript AI Agent Framework
　https://voltagent.dev/

●VoltAgent/voltagent: Open Source TypeScript AI Agent Framework
　https://github.com/VoltAgent/voltagent

### Mastra との違い

TypeScript の AIエージェントフレームワークの 1つに Mastra がありますが、それとの違いを公式が書いていたポストを見かけたので、以下に掲載してみます。

https://x.com/voltagent_dev/status/1917243831281680433


#### Mastra を試した話

冒頭に TypeScript の AIエージェントフレームワークをいくつか試して記事に書いた話を書いていましたが、Mastra についてもお試しをして記事に書いたものがあります。

●「mastra user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=mastra%20user%3Ayoutoy&sort=created


## さっそく VoltAgent を試す

VoltAgent を試してみます。

今回は「公式の [⚡ Quick Start](https://github.com/VoltAgent/voltagent?tab=readme-ov-file#-quick-start)」の内容を動かしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d9a3916d-c701-490b-83e4-f94807c3cc6c.png)


### 下準備

下準備として、以下のコマンドでパッケージをインストールします（← 公式手順の `@latest` はつけずに試してみました）。


```zsh
npm create voltagent-app
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8fc2f463-5d61-4f22-997b-1e033a305be4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9cc03035-a96d-4b35-bb7c-b9072a9396e1.png)

上記のプロジェクト名は、薄く表示されていた「my-voltagent-app」にして、その後の選択肢は「npm」を選びました。以下は、その後の画面です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d370c2c1-a22c-47fc-b7f3-d7847c29d58f.png)


### 続きの処理

続きを進めていきます。画面に表示されている内容を参考に、以下を順番に実行していきます。

```zsh
cd my-voltagent-app
npm i
npm run dev
```


そして、以下の表示が出てきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/eee63a26-cb20-4201-8dd2-bc35d33868ad.png)

環境変数に APIキーを設定する感じかな、とも思いつつ、いったん先に進めます（あと、アップデートに関する表示も、いったんスルーしつつ）。


### サーバーにアクセスしてみる

#### HTTP Server にアクセスする

「HTTP Server」となっている http://localhost:3141 にアクセスしたところ、以下の表示が出ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9d4de517-96fb-495a-9f1c-6047dad22193.png)


公式の手順だと、ここから「[VoltAgent Developer Console](https://console.voltagent.dev/login)」にアクセス・ログインする流れになっています。


#### ローカルサーバーに PC内からアクセスする方法を探っていく

しかし、これを上記のコンソールを使わず扱えるか、ちょっと調べて試してみました。

ローカルにサーバーが立ち上がっているので、普通に PC内から API を扱えそうに思えます。その方法を、公式ドキュメントから探してみることにしました。


### API を扱う

公式のドキュメントを見ていくと、以下のページを見つけました。

●API Overview | VoltAgent
　https://voltagent.dev/docs/api/overview/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/81adc150-ac13-443a-a806-2555062e4b42.png)

ローカルで立ち上げたサーバーに、HTTPリクエストでアクセスしてレスポンスを得られそうな感じです。


#### curl でのお試し1

上記の公式ドキュメントに書いてあったコマンドのうち、以下を実行してみます。

```zsh
curl http://localhost:3141/agents
```

そうすると以下のレスポンスが得られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a170574c-c8cc-4027-99cf-0d8a5075f8bb.png)

id の情報や、その他、システムのプロンプトとして設定された内容などが出力されているようです。


#### curl でのお試し2

次は以下を試します。

```zsh
curl -X POST http://localhost:3141/agents/your-agent-id/text \
     -H "Content-Type: application/json" \
     -d '{ "input": "Tell me a joke!" }'
```

上記の「`your-agent-id`」の部分は書きかえる必要があるようです。その部分は「`my-voltagent-app`」に変えた以下の内容にしました。

```zsh
curl -X POST http://localhost:3141/agents/my-voltagent-app/text \
     -H "Content-Type: application/json" \
     -d '{ "input": "Tell me a joke!" }'
```


実行結果は以下で、この時点では処理に失敗しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f048a6cd-5e00-4367-a3e1-fcb271c565b1.png)

おそらく、先ほど少し触れていた APIキーの問題かと思われました。


#### curl でのお試し3

現状、srcフォルダ内を確認すると、以下の内容の「index.ts」が作られています。

```typescript:index.ts
import { VoltAgent, Agent } from "@voltagent/core";
import { VercelAIProvider } from "@voltagent/vercel-ai";

import { openai } from "@ai-sdk/openai";

const agent = new Agent({
  name: "my-voltagent-app",
  instructions: "A helpful assistant that answers questions without using tools",
  llm: new VercelAIProvider(),
  model: openai("gpt-4o-mini"),
  tools: [],
});

new VoltAgent({
  agents: {
    agent,
  },
});
```

`model: openai("gpt-4o-mini")` という部分があるので、OpenAI の APIキーを設定してやれば良さそうです。

公式ドキュメント内の別ページの「[Manual Setup](https://voltagent.dev/docs/quick-start/#manual-setup)」という項目内に、以下の記載があるので、それで大丈夫そうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7878ac4c-ac65-4a0f-ab86-0eb965bcef30.png)

上記の「`.env`」で環境変数を設定する以外の方法で、「サーバーを立ち上げる際に環境変数をコマンドで設定する」という方法でも大丈夫かと思います。とりあえず今回は、コマンドで環境変数 OPENAI_API_KEY に OpenAI の APIキーを設定しました。


あらためて curlコマンドで API を使ってみます。プロンプトを日本語のものに変えてみたりしました。

```zsh
curl -X POST http://localhost:3141/agents/my-voltagent-app/text \
     -H "Content-Type: application/json" \
     -d '{ "input": "あなたは誰？" }'
```

上記を実行すると、以下のとおり無事にレスポンスを得られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/43d9f22a-42e2-41b5-bfa0-dbf732810ccc.png)


## おわりに

今回、VoltAgent を軽く試してみました。シンプルな内容ではありますが、かなり簡単に使うことができました。

まだ詳細をあまり見られてないので、公式ドキュメントなどを見ていければと思います。


## 余談

試している途中で、こんなリプライがきました（こちらは、キーワードベースで自動で、とかでしょうか）

https://x.com/voltagent_dev/status/1924478729998508158


またお試し中の内容を X にポストしていたら、公式アカウントや中の人ｋら、その投稿へのリアクションやコメントもいただけました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2fc188b3-8e1c-4bfb-80f7-93cca2eab186.png)