Hermes Agentを動かす準備

この章の目標

この章では、Hermes Agentを動かす前に必要な準備を行います。今回の授業では、LLMを動かす道具としてLM Studioを使います。LM Studioは画面操作でモデルを選び、ローカルPC上でLLMを動かせるため、初心者が最初に試す環境として扱いやすいです。

この章のゴールは、次の3つです。1つ目は、Hermes Agent、Next.js、LM Studioの関係を理解すること。2つ目は、自分のPCに合うLLMを選べるようになること。3つ目は、Next.jsアプリからローカルLLMに接続するイメージを持つことです。

全体構成

今回作る環境は、次のような構成です。

役割	使うもの	説明
画面・アプリ本体	Next.js	ユーザーが操作するWebアプリを作る
AIエージェント	Hermes Agent	作業を進めるAIエージェントとして使う
LLM実行環境	LM Studio	ローカルPC上でLLMを動かす
LLMの頭脳	Qwen、Gemma、Llamaなど	実際に文章を考えるモデル
接続方式	OpenAI互換API	Next.jsやHermes AgentからLM Studioに接続する

イメージとしては、Next.jsが画面を担当し、Hermes Agentが作業の流れを考え、LM StudioがLLMを動かします。LLMはAIの頭脳です。つまり、Hermes Agentだけでは完結しません。Hermes Agentが考えるためには、裏側でLLMが必要になります。

LM StudioとOllamaの違い

ローカルLLMを動かす道具には、LM StudioとOllamaがあります。どちらも便利ですが、授業での位置づけは分けます。

評価項目	LM Studio	Ollama
向いている人	初心者、授業、検証、モデル比較	開発者、実務運用、API連携、並列処理
操作方法	GUI中心。画面でモデルを探して起動できる	ターミナル中心。コマンドでモデルを管理する
学習しやすさ	高い。画面で確認しながら進めやすい	慣れが必要。コマンド操作に強い人向け
1つのエージェントで使う場合	適している	適している
複数リクエストを扱う場合	テスト用途なら十分	より実務向け
複数モデルの切り替え	画面上で確認しやすい	コマンドやAPIで扱いやすい
並列処理	授業では主目的にしない	実務では候補にしやすい
安定運用	テスト・検証向き	サーバー運用や自動化に向きやすい
今回の授業での扱い	使用する	比較対象として紹介する

今回の結論はシンプルです。授業ではLM Studioを使います。理由は、画面でモデルを選べるため、初心者が「いま何をしているのか」を理解しやすいからです。Ollamaは、ターミナル操作や並列処理、実務の自動化に進んだ段階で扱います。

1つのエージェントと並列処理の違い

最初に作るシステムでは、1人のユーザーが1つのAIエージェントとやり取りする状態を想定します。この場合、LM Studioで十分です。画面からモデルを選び、ローカルサーバーを起動し、Next.jsから接続できれば授業としては成立します。

一方で、実務では複数の処理が同時に走ることがあります。たとえば、複数ユーザーが同時にチャットする、予約内容をAIが分類する、記事生成を裏側で複数件処理する、複数のAIエージェントが別々の役割で動く、といったケースです。このような場面では、OllamaのようにAPI利用や並列処理を前提にしやすい環境が候補になります。

利用シーン	適した環境	理由
学生が1人でLLMを試す	LM Studio	画面操作で理解しやすい
Next.jsから1つのLLMに接続する	LM Studio	ローカルAPIサーバーで試せる
モデルの違いを授業で比較する	LM Studio	GUIでモデルを切り替えやすい
複数ユーザーの同時利用を想定する	Ollama	並列処理やサーバー運用を考えやすい
本番に近いAPI運用を試す	Ollama	自動化・常駐・API接続に向きやすい
まずAIアプリの仕組みを理解する	LM Studio	初心者向けの導入に向く

授業では、まずLM Studioで「1つのAIエージェントとやり取りする」構成を作ります。その後、応用として「複数処理を扱うならOllamaも候補になる」と説明します。

必要なもの

この章で準備するものは、次の通りです。

必要なもの	目的
Node.js	Next.jsを動かすため
npm	Next.jsプロジェクトの作成やパッケージ管理のため
LM Studio	ローカルLLMを動かすため
LLMモデル	AIの頭脳として使うため
エディタ	コードを書くため
ターミナル	コマンドを実行するため

今回、Pythonは使いません。Next.jsを中心に進めるため、Node.jsとnpmを使います。

Node.jsとは何か

Node.jsは、JavaScriptをPC上で動かすための実行環境です。通常、JavaScriptはブラウザ上で動きます。しかし、Next.jsでWebアプリを作る場合は、開発サーバーを動かしたり、パッケージを管理したりする必要があります。そのためにNode.jsを使います。

初心者向けに言うと、Node.jsはNext.jsを動かすための土台です。

Node.jsが入っているか確認するには、ターミナルで次のコマンドを実行します。

node -v

バージョン番号が表示されれば、Node.jsは入っています。

v22.0.0

表示されない場合は、Node.jsをインストールします。Next.jsを使うため、授業ではNode.js 22系以降を推奨します。

npmとは何か

npmは、Node.jsと一緒に使うパッケージ管理ツールです。Next.js、React、AI SDKなど、Webアプリ開発に必要な部品をインストールするために使います。

npmが入っているか確認するには、次のコマンドを使います。

npm -v

バージョン番号が表示されれば、npmは使えます。

10.8.0

初心者向けには、次の理解で十分です。Node.jsはNext.jsを動かす土台。npmはNext.jsに必要な部品を入れる道具です。

LM Studioをインストールする

LM Studioは、ローカルPCでLLMを動かすためのアプリです。今回は、ターミナルだけでLLMを管理するのではなく、LM Studioの画面を使ってモデルを選びます。

インストールの流れは次の通りです。

手順	内容
1	LM Studioの公式サイトを開く
2	自分のOSに合うインストーラーをダウンロードする
3	アプリをインストールする
4	LM Studioを起動する
5	モデルを検索する
6	自分のPCに合うモデルをダウンロードする
7	モデルを読み込む
8	Local Serverを起動する

授業では、まずLM Studioを起動して、モデル検索画面を確認します。すぐに大きなモデルを入れないでください。最初は軽いモデルで動作確認します。

LLMとは何か

LLMは、Large Language Modelの略です。日本語では大規模言語モデルと呼ばれます。簡単に言うと、AIの頭脳です。

Hermes Agentは、作業を進めるためのエージェントです。Next.jsは、画面やシステムを作るためのフレームワークです。LM Studioは、LLMを自分のPCで動かすためのアプリです。そしてLLMは、実際に文章を理解して返答を作る頭脳です。

名前	役割
Next.js	Webアプリを作る
Hermes Agent	作業の流れを支援する
LM Studio	LLMをローカルで動かす
LLM	文章を理解して返答を作る

この関係を間違えないことが大切です。

自分のPCに合うLLMを選ぶ

LLMは、大きければ必ず良いわけではありません。大きいモデルは高性能な場合がありますが、その分だけPCに負荷がかかります。授業では、まず自分のPCで無理なく動くモデルを選びます。

目安は次の通りです。

PCのメモリ	最初に試すモデル規模	授業でのおすすめ
8GB	1B〜3B	軽いモデルで動作確認
16GB	3B〜7B	初心者の学習に使いやすい
32GB	7B〜14B	Next.jsのコード生成も試しやすい
64GB以上	14B〜32B	長文や複雑な処理も試しやすい

授業では、まず7B前後までのモデルを候補にします。PCが重くなる場合は、3B前後のモデルに下げます。逆に余裕がある場合は、14B以上を試しても構いません。

LM Studioでモデルを選ぶ時の見方

LM Studioでは、画面上でモデルを検索し、ダウンロードできます。モデルを選ぶ時は、名前だけで決めないでください。見るべきポイントがあります。

見る項目	意味
モデルサイズ	PCへの負荷に関係する
量子化	軽量化された形式かどうか
必要メモリ	自分のPCで動くかの目安
コンテキスト長	長い文章を扱えるか
用途	会話向け、コード向け、推論向けなど

初心者は、まず「軽い」「動く」「反応が返ってくる」を優先します。最初から最高品質を狙う必要はありません。ローカルLLMは、まず動かすことが大事です。

授業でおすすめする選び方

授業では、次の順番で選びます。

順番	選び方	理由
1	3B前後の軽いモデル	起動確認がしやすい
2	7B前後のモデル	授業で実用的に試しやすい
3	コード向けモデル	Next.jsの補助に使いやすい
4	14B以上のモデル	PCに余裕がある人だけ試す

Next.jsをメインにするため、コード生成に強いモデルを選ぶと授業と相性が良いです。たとえば、Qwen系、Gemma系、Llama系、DeepSeek系などのコード対応モデルが候補になります。ただし、実際に選ぶモデルはLM Studio上で表示される対応状況を確認して決めます。

llm-fitを使った選び方

llm-fitのようなツールを使うと、自分のPCスペックに合うLLMをターミナルから確認できます。LM Studioは画面で選べるため初心者向けですが、PCに合うモデルを客観的に見たい場合は、llm-fitのような補助ツールを使うと便利です。

使い方の流れは次の通りです。

手順	内容
1	Node.jsとnpmが入っているか確認する
2	ターミナルでllm-fitを実行する
3	表示された候補を見る
4	Fit、Speed、Qualityを見る
5	LM Studioで同じ、または近いモデルを探す
6	軽いモデルからダウンロードする

Node.jsとnpmを確認します。

node -v

npm -v

llm-fitを実行します。

npx llm-fit

表示された候補を見て、自分のPCに合いそうなモデルを確認します。ただし、llm-fitの結果は絶対ではありません。最終的には、LM Studioで実際にモデルを読み込み、速度や安定性を確認します。

llm-fitの結果を見るポイント

llm-fitで候補が表示されたら、次の順番で見ます。

項目	優先度	見方
Fit	高	自分のPCに合っているか
Speed	高	授業中に待ち時間が長すぎないか
Quality	中	回答の品質が十分か
Context	中	長い文章やコードを扱えるか
Size	高	ダウンロード容量やメモリ負荷が大きすぎないか

初心者は、Qualityだけで選ばないでください。高品質でも遅すぎるモデルは、授業では扱いにくいです。まずはFitとSpeedを優先します。

LM StudioでLocal Serverを起動する

Next.jsからLM StudioのLLMを使うには、LM Studio側でLocal Serverを起動します。LM StudioにはOpenAI互換APIサーバーがあります。これにより、OpenAI APIに接続するような形で、ローカルのLM Studioに接続できます。

授業で使う接続先は、基本的に次の形式です。

http://localhost:1234/v1

localhost は、自分のPC自身を表します。インターネット上の外部サイトではありません。つまり、Next.jsアプリから自分のPCの中で動いているLM Studioに接続するということです。

Next.jsからLM Studioに接続するイメージ

Next.jsからLM Studioに接続する流れは、次の通りです。

ユーザー
↓
Next.jsの画面
↓
Next.jsのAPI Route
↓
LM Studio Local Server
↓
ローカルLLM

この構成にすると、ユーザーはブラウザ上の画面から質問を入力できます。Next.jsは、その内容を受け取ってLM Studioに送ります。LM StudioはローカルLLMを使って回答を生成します。そしてNext.jsがその回答を画面に表示します。

授業では、この構成を目標にします。

Next.jsプロジェクトを作る準備

Next.jsを使うため、作業用フォルダを作ります。

mkdir hermes-next-practice

作成したフォルダに移動します。

cd hermes-next-practice

Next.jsプロジェクトを作成します。

npx create-next-app@latest .

質問が表示された場合は、授業では次のように選びます。

質問	選択
TypeScript	Yes
ESLint	Yes
Tailwind CSS	Yes
src directory	Yes
App Router	Yes
Turbopack	Yes
import alias	Yes

Next.jsはTypeScriptで進めます。型があることで、あとからシステムを大きくした時に壊れにくくなります。

環境変数を用意する

LM Studioに接続するURLは、コードに直接書くよりも環境変数で管理します。

.env.local を作成し、次のように書きます。

LM_STUDIO_BASE_URL=http://localhost:1234/v1
LM_STUDIO_MODEL=your-model-name

your-model-name の部分には、LM Studioで読み込んだモデル名を入れます。モデル名はLM Studio側で確認します。

APIキーについては、LM Studioのローカル接続では授業用にダミー値を使う構成にすることがあります。ただし、クラウドAPIを使う場合は本物のAPIキーが必要です。APIキーは絶対に公開しないでください。

授業で作るシステムの方向性

この章以降では、Hermes Agentをただ動かすだけでなく、Next.jsアプリとして小さなAIシステムを作る方向で進めます。

最初に作るシステムの例は、次のようなものです。

システム案	内容
授業アシスタント	学生の質問に初心者向けに答える
コードレビュー補助	HTMLやTypeScriptの問題点を指摘する
要件整理アプリ	作りたいアプリの要件を整理する
課題作成アプリ	授業テーマから課題文を作る
学習ログ整理アプリ	今日学んだ内容を要約する

最初は、授業アシスタントを作ります。理由は、入力と出力が分かりやすく、Next.jsとローカルLLMの接続を確認しやすいからです。

LM Studioを使う時の注意点

LM Studioは初心者に扱いやすいですが、注意点もあります。

注意点	内容
モデルを大きくしすぎない	PCが重くなる
Local Serverを起動し忘れない	Next.jsから接続できない
モデルを読み込んでから使う	サーバーだけ起動しても回答できない
ポート番号を確認する	通常は1234を使う
授業中は1モデルで進める	切り替えすぎると混乱する

初心者講座では、最初から複数モデルを使い分けません。まず1つのモデルを読み込み、Next.jsから接続できる状態を作ります。

よくあるエラー

よくあるエラーを先に知っておくと、授業中に慌てずに済みます。

エラー	原因	対応
node: command not found	Node.jsが入っていない	Node.jsをインストールする
npm: command not found	npmが使えない	Node.jsのインストール状態を確認する
LM Studioにつながらない	Local Serverが起動していない	LM StudioでStart Serverを押す
回答が返ってこない	モデルが読み込まれていない	モデルをLoadする
反応が遅い	モデルが重い	小さいモデルに変更する
メモリ不足になる	PCに対してモデルが大きい	3B〜7B前後に下げる
モデル名エラー	.env.local のモデル名が違う	LM Studioでモデル名を確認する

この章のミニ課題

次の作業を行ってください。

1つ目。自分のPCにNode.jsとnpmが入っているか確認してください。

node -v

npm -v

2つ目。LM Studioを起動し、自分のPCに合いそうなモデルを1つ探してください。

3つ目。モデルを選ぶ理由を、次の形式でまとめてください。

モデル名：
モデルサイズ：
自分のPCのメモリ：
選んだ理由：
重そうか、軽そうか：
Next.jsの授業で使えそうか：

4つ目。LM StudioでLocal Serverを起動し、接続先URLを確認してください。

http://localhost:1234/v1

5つ目。次の構成を自分の言葉で説明してください。

ユーザー
↓
Next.js
↓
LM Studio
↓
ローカルLLM

この章のまとめ

この章では、Hermes Agentを動かす前の準備として、Next.js、Node.js、npm、LM Studio、LLMの関係を整理しました。今回の授業では、Pythonは使いません。Next.jsを中心に、小さなAIシステムを作る流れで進めます。

LM Studioは、初心者がローカルLLMを試すために向いています。画面でモデルを探し、読み込み、Local Serverを起動できるため、授業ではLM Studioを使います。一方で、Ollamaは並列処理や実務運用に向きやすいため、次の段階で扱う候補です。

まずはLM Studioで1つのモデルを読み込み、Next.jsから接続できる状態を作ります。大きなモデルを選びすぎず、自分のPCで無理なく動くLLMを選ぶことが重要です。