ローカルで動く【わたし専用チャットAI】アプリを作ってみた

# はじめに

ChatGPTって便利なんですが、毎回「これ送って大丈夫かな？」って内容を気にしながら使うの、ちょっと気疲れしませんか？ 
わたしは「誰にも気にせず使える、自分専用のチャットエージェント欲しいな〜」って、ずっと思ってました。

そこで今回、Azure OpenAI の [gpt-4o](https://learn.microsoft.com/ja-jp/azure/ai-services/openai/concepts/models?tabs=global-standard%2Cstandard-chat-completions) と、Vercel の [AI SDK](https://sdk.vercel.ai/docs/foundations/overview) を使って、自分だけの Local Chat Agent アプリを作ってみました。

Azure OpenAI のエンドポイントさえあれば、すぐに使い始められます。
コードは下に公開しているので、よければ気軽に試してみてください〜

https://github.com/kaiharu/local-caht-agent

- [Azure OpenAI でモデルをデプロイする](#azure-openai-でモデルをデプロイする)
  - [Azure アカウントを作成](#azure-アカウントを作成)
  - [Azure OpenAI のリソースを作成・デプロイ](#azure-openai-のリソースを作成デプロイ)
  - [モデルをデプロイ](#モデルをデプロイ)
- [チャットアプリをセットアップする](#チャットアプリをセットアップする)
  - [アプリを Git clone](#アプリを-git-clone)
  - [依存パッケージをインストール](#依存パッケージをインストール)
  - [環境変数をセット](#環境変数をセット)
  - [アプリを起動](#アプリを起動)
  - [おまけ：Langfuse を使う](#おまけlangfuse-を使う)
- [まとめ](#まとめ)

# Azure OpenAI でモデルをデプロイする

## Azure アカウントを作成

以下のページから Azure アカウントを作成します。  
初回登録時には 30 日間・$200 分のクレジットが無料でもらえるため、気軽に試すことができます。

https://azure.microsoft.com/ja-jp/pricing/purchase-options/azure-account/search?ef_id=_k_CjwKCAjwwqfABhBcEiwAZJjC3swR6KWXujARQXY3v7NwoZK65lClD06UPPa7FEva1OA785MFbmd-gRoCqvkQAvD_BwE_k_&OCID=AIDcmmve823aza_SEM__k_CjwKCAjwwqfABhBcEiwAZJjC3swR6KWXujARQXY3v7NwoZK65lClD06UPPa7FEva1OA785MFbmd-gRoCqvkQAvD_BwE_k_&gad_source=1&gbraid=0AAAAADcJh_tn2kntP3c8HT3cr60NZnM1F&gclid=CjwKCAjwwqfABhBcEiwAZJjC3swR6KWXujARQXY3v7NwoZK65lClD06UPPa7FEva1OA785MFbmd-gRoCqvkQAvD_BwE

## Azure OpenAI のリソースを作成・デプロイ

以下の手順に従ってリソースを作成します。

https://learn.microsoft.com/ja-jp/azure/ai-services/openai/how-to/create-resource?pivots=web-portal

### 1. ログイン後「Azure OpenAI」に移動
![local-agent-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/70aaf2b6-08c2-44db-8809-c74f7c746e9e.png)

### 2. 「作成」を選択
![local-agent-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/901b1d8b-8b61-4bb4-b330-0c9088dd8a36.png)

### 3. 「リソースグループ」「リージョン」「名前」「価格レベル」を設定
※「名前」はグローバルでユニークな値にする必要があります。
![local-agent-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/2c63e79c-aff9-49e3-af1a-8d647689fba9.png)

### 4. ネットワークを選択
![local-agent-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/b8852018-21ce-41cf-bddf-1a30cea382b0.png)

### 5. Tags を設定（任意）
![local-agent-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/d7902f32-6636-429b-bca7-1432090c39ba.png)

### 6. 内容を確認し「作成」を選択
![local-agent-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/8c56d29c-1698-46b5-a075-f930b4f6623d.png)

### 7. 「リソースに移動」を選択
リソースの作成が完了したら以下のような画面になります。
![local-agent-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/cbcf5ce8-3d62-4f1f-846b-e91272f0061f.png)

### 8. 作成したリソースを開く
![local-agent-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/414dd7df-22fe-4fc0-bb6d-a7a2b885bf00.png)

## モデルをデプロイ

https://learn.microsoft.com/ja-jp/azure/ai-services/openai/concepts/models?tabs=global-standard%2Cstandard-chat-completions

以下の手順に従ってモデルをデプロイします。

### 1. 「AI Azure Foundry」を開く
![local-agent-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/890dbf9d-9f1a-45de-a295-4f0dcd136933.png)

### 2. メニューから「デプロイ」を選択
![local-agent-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/2a0c3c8f-edff-4b71-bf22-a2f1215d0f07.png)

### 3. 「モデルのデプロイ」を選択
![local-agent-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/52378082-60ce-4ad5-88c0-800c0ff04cbe.png)

### 4. 「gpt-4o」を選択
![local-agent-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/51c95c61-93b4-4f09-89ba-f70dbfa3c64e.png)

### 5. デプロイ名を設定しデプロイ
今回は初期値の「gpt-4o」のままでデプロイしました。
![local-agent-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/e31c1027-d024-4160-9d27-6911fddcf9fb.png)

### 6. 完了
エンドポイントとキーはあとで使うので、このページを開いておきます。
![local-agent-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/710692f1-3262-4f53-abf0-7c4dee88ea30.png)

# チャットアプリをセットアップする

## アプリを Git clone

https://github.com/kaiharu/local-caht-agent

ここからコードを clone して、`README.md` の手順に従ってセットアップしていきます。
bun が必要なので、インストールしていない方はここでインストールしておきます。
```bash
curl -fsSL https://bun.sh/install | bash
```

## 依存パッケージをインストール

clone してきたディレクトリに移動して、依存パッケージをインストールします。
```bash
cd local-chat-agent
bun install
```

## 環境変数をセット

.env.local を作成して環境変数をセットします。
```bash
cp .env.example .env.local
```

先ほどデプロイしたエンドポイントのターゲット URI が
`https://{AZURE_RESOURCE_NAME}.openai.azure.com/openai/deployments/{AZURE_DEVELOPMENT_NAME}/chat/completions?api-version={OPENAI_API_VERSION}`
の形をしていると思います。
![local-agent-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/c915fa3a-519f-4cc5-bf48-19ca115f0e34.png)

今回の例では
https://**test-ai-sample**.openai.azure.com/openai/deployments/**gpt-4o**/chat/completions?api-version=**2025-01-01-preview**
なので、環境変数は以下のようになります。
`AZURE_OPENAI_API_KEY` はエンドポイントの「キー」になります。
```bash:.env.local
# Require

# ターゲット URIs
# https://{AZURE_RESOURCE_NAME}.openai.azure.com/openai/deployments/{AZURE_DEVELOPMENT_NAME}/chat/completions?api-version={OPENAI_API_VERSION}
AZURE_RESOURCE_NAME = test-ai-sample
AZURE_DEVELOPMENT_NAME = gpt-4o
OPENAI_API_VERSION = 2025-01-01-preview
# API キー
AZURE_OPENAI_API_KEY = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

## アプリを起動
```bash
bun run dev
```
[http://localhost:3123](http://localhost:3123) で立ち上がります。以下のように見えれば OK です。
現状ではテキストメッセージとファイル添付に対応しています。
![local-agent-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/7b0d9ae0-0779-4f30-8bad-6e9379a1c030.png)

## おまけ：Langfuse を使う

Langfuse を導入すると、リクエストのログを視覚的に管理できるようになります。
セッションごとに送信した内容と返ってきた応答を確認できるので、過去の会話を遡ることが可能です。

将来的には、Langfuse のログを活用して「会話履歴」機能を実装する予定です。
![local-agent-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529398/342477bc-261d-465a-acaf-107543b53fef.png)


# まとめ
今回は、Azure OpenAI の gpt-4o と Vercel の AI SDK を使って作成した、「自分だけの Local Chat Agent」を紹介しました。

Azure OpenAI では、送信されたデータがモデルのトレーニングや改善に利用されることはなく、処理後すぐに破棄されるため、安心して利用できます。

「自分専用の安全なチャットエージェントが欲しい！」という方は、ぜひ試してみてください。