WEBディレクター専用チャットボットを作ってみました

ClaudeでWEBディレクター専用AIチャットボットを作ってみました。WEB Director D.I.O Assistantという名前です。
このブログに書いたディレクション系の記事だったり、実績やプロフィール、考え方などを学習させてあるため、少しオーバーに言えば、僕の「ディレクターとしての分身」でしょうか。
基本的にイチからコード書けないレベルです（HTML）。それでも基礎的な部分は3時間ほどで構築出来ました。結構、簡単に作れてしまいました。
AIの便利さに舌を巻いたと同時に恐怖も覚えた次第です。

今回は以下に開発日記や考察、企画や展開など色々と記述出来たらと思います。

AIでAIを開発出来るのだろうか？

ふと、そんなことを考えました。Chat-GPTやGemini、NotebookLMは使っているけれど、学習させて育てているわけではない。多少、設定やプロンプトの書き方で賢くなったり、聞き方の工夫で精度は増すが、それは学習とはまた違う内容である。開発のきっかけは「自分で学習して育てるAIツールを自身で作れるか？」と思ったのがきっかけである。

早速、Claudeに聞いてみた。なんでClaudeに聞いたかと言うと、Chat-GPTは聞けば聞くほど、確認すればするほど間違ったり、手を抜く行動が見えるからである。でもClaudeは曖昧な指示でも、何度繰り返しても割とちゃんと返してくれる。ということで、最近はClaudeを色々と触っている。

僕「自分独自のAIって開発出来る？」

Claude「はい、開発できます！レベル別に説明しますね。

◯初心者でも始めやすい方法：既存のAI APIを使う

　・OpenAI API や Anthropic API（Claude） を使って、自分のアプリに組み込む
　・プログラミング知識があれば比較的すぐ始められる
　・コストは使った分だけ（従量課金）
◯ノーコードツール
　・Dify、Flowise などでコードなしでAIアプリが作れる

◯中級者向け

オープンソースモデルをカスタマイズ
・LLaMA（Meta）、Mistral などの公開モデルを使う
・自分のデータでファインチューニング（追加学習）が可能
・ローカル環境で動かせる（Ollama など）

◯RAG（検索拡張生成）
　・自分のドキュメントや知識ベースをAIに読ませる
　・LangChain や LlamaIndex などのフレームワークを使う

◯上級者向け

ゼロからモデルを学習させる
　・大量のデータと高性能なGPUが必要
　・現実的には数千万〜数億円規模のコストがかかることも
　・研究機関や大企業レベルの話になる

なるほど、なるほど、わかりやすい。
なんとなくで聞いたのは上級者向けだったけど、そりゃ当然、イチから開発になるから、「数千万〜数億円規模のコスト」だね。
Difyとかは以前少し触ってみてUIがよくわかんなかったことや、「自分で学習して育てるAIツールを自身で作れるか？」が知りたかったので、「claudeを使って学習モデルを構築したい」と言ってみました。

claudeを使って学習モデルを構築したい

Claudeを使って学習モデルを構築する場合、いくつかのアプローチがあります。
Claudeでできること

1. APIを使ったアプリ構築

Claude APIを使って、自分のアプリやサービスにClaudeを組み込む方法です。これが最も現実的です。
→自分のアプリとかないし、サービスを提供しているサイトとかもないしなぁ・・・。

2. RAG（検索拡張生成）

自分のデータ（PDF、社内文書など）をClaudeに読ませて、特定分野に詳しいAIを作る方法。
→自分のブログや資料とかを読み込ませる感じ？

3. システムプロンプトでのカスタマイズ

Claudeの振る舞いや役割を定義して、特定用途に特化させる。
→2と何が違うのか・・・？よくわかんないけど。。。

※注意点
Claudeのモデル自体は再学習・ファインチューニングできません。AnthropicはClaudeのファインチューニングAPIを一般公開していないため、モデルの重みを変えるような学習は現時点ではできません。
→大元のベース機能というかな、持っている性能以上のことは出来ませんよってことですね。

さぁ、何を作ろうか。

Claude「具体的に何を作りたいですか？
目的を教えてもらえれば、最適な構成を提案できます！」

　・特定分野の質問応答システム？
　・社内ドキュメントを検索するAI？
　・キャラクターや口調を固定したチャットボット？
　・何か別のもの？

僕「WEBディレクターが困ったときに質問したい特化型のシステム？まるで僕のような。」
何を言ってるんでしょうか、ごめんなさいって感じですが、そのように書いてみました。
→「あなたのような」WEBディレクター特化型のAIアシスタントを作ってみることになりました。

ちょっと中略

ここから、どう作っていったのかですが、Claudeに表示される指示に回答して、まず簡単なプロトタイプとして、システムプロンプトを一緒に設計。
といっても、表示される質問に回答するだけでした。めちゃ簡単。2～3問の質問に回答や補足を追加したら、もうシステムプロンプトの骨格が作れそうです、とのこと。ホントかよ。

そこから簡単にHTMLで試しに作ってみることに。これはモックアップみたいなもんかな？
Claude「今後、他の困りごとのパターンを追加していけば、どんどん「あなたらしいAI」に育てていけます。使ってみてどうでしたか？」と。
え？これで終わり？そんなもんなの？と思ったのと、これを自サイトにどう置いていいかわかんないので、聞いてみる。

「これはWEBサイトにどうやって設置するの？そのまま、HTMLファイルをサーバーに置くだけでいいの？」
Claude「結論から言うと、そのままサーバーに置くのはNGです。理由はセキュリティです。このHTMLファイルにはAPIキーをブラウザ上で入力する仕組みになっていますが、HTMLをそのまま公開するとAPIキーが第三者に見られたり、悪用されるリスクがあります。」
そうなんだ。ならどうすればいいのか？

現実的な選択肢

一番手軽なのはVercelです。
Next.jsというフレームワークを使えば、フロントとバックエンドをまとめて無料でホスティングできます。APIキーはVercelの管理画面で環境変数として設定するだけなのでコードに書く必要がありません。
他にはNetlify + Netlify Functionsや、さくらVPS・AWSなどのサーバーにNode.jsやPythonでバックエンドを立てる方法もあります。

正直なところ
フロントのHTMLだけなら作れても、バックエンドの構築はプログラミング知識が必要になってきます。どこまで自分でやるか、エンジニアに頼むかの判断が必要です。エンジニアに依頼する場合は「Next.jsでClaude APIを使ったチャットUIを作りたい、APIキーはサーバー側で管理したい」と伝えれば話が早いです。どうしますか？自分で試してみたいですか？それともエンジニアへの依頼前提で進めますか？
→自分で試すしかないよね。

ここから少し難航した

必要なもの
　・GitHubアカウント（無料）
　・Vercelアカウント（無料）
　・Node.js（パソコンにインストール）
　・Anthropic APIキー

手順の全体像
1. Node.jsをインストール
2. Next.jsプロジェクトを作成
3. コードを書く（フロント＋バックエンド）
4. GitHubにアップロード
5. Vercelにデプロイ
6. APIキーをVercelに設定

とのことなんだが、もう、何がなんだかさっぱりわからない・・・。ここでClaudeから（もはや、Claudeさんと言ったほうがいいだろうか、くらいに言いなりになっている）、スキルの確認をされて、正直に回答した結果、
「ありがとうございます！では、完全ゼロから丁寧に進めましょう。正直に言うと、Next.js + GitHubの組み合わせはWindowsでGitHub未経験だと最初のハードルが少し高いです。なのでもっと簡単な方法を提案します。」
へいへい。お気遣い、まことにありがとうございます。

おすすめはこの構成（らしい）

Vercel CLI（コマンドラインツール）を使って、GitHubを使わずに直接デプロイする方法です。
手順はこの4ステップだけです。
　1. Node.jsをインストール
　2. プロジェクトファイルを作成（私が全部書きます）
　3. VercelにログインしてCLIでアップロード
　4. APIキーをVercelの管理画面に設定

Vercelというサービスを使って作る？ようですね。なお、Vercelは無料で使えます。安心してください。
Vercelの無料プラン（Hobbyプラン）でできることはこんな感じです。
　・個人プロジェクトは無料で何個でも作れる
　・独自ドメインも設定できる
　・今回作るようなチャットボットは余裕で無料範囲内

長くなるのでまとめると・・・

ステップ1：Node.jsのインストール
ステップ2：プロジェクトを作成する
指定されたパスが見つかりません。 とエラーが出てしまい、Claudeにエラーを投げる。相変わらずパスがおかしくてエラーが続くので、Claudeに原因を聞く。
ステップ3：プロジェクトフォルダに移動
必要なファイルはClaudeが作ってくれるので、コピペするだけでOK
ステップ4：Anthropicのライブラリをインストール
ステップ5：Vercelにデプロイ
ステップ6：コマンドプロンプトに出てくる質問にY/Nで答えていく
Claudeさんに質問コピペして投げれば教えてくれます
ステップ7：APIキーを設定する
ここが少し厄介で、APIキーがどれか、何のサービスのキーを入れればいいのか、Claudeが示すキーがサンプルなのか、そのまま入れるだけのものなのかが少し分かりづらく・・・。
ANTHROPIC_API_KEYを発行するのか、と思ったら、「そのまま入力してください」と言われ・・・。
なお、APIキーは有料です。厳密に言うと、APIキー自体は無料ですが、使った分だけ料金がかかります。
★料金のイメージ
Claude Sonnetの場合、1回の質問と回答でだいたい0.1〜0.3円くらいです。毎日10回使っても月30〜90円程度なので、個人利用なら実質ほぼ気にならないレベル、とのこと。
ステップ8：Vercelの設定
ホントなら、ここでAIチャットボット完成なんだけど、Next.jsのデフォルト画面が表示されてしまう。どうやらファイルが正しく保存されていなかったようです。これもエラー内容をClaudeさんに投げると原因と対策を記述してくれます。色々とフォルダ内のデータに何があるかを調べたり、コマンドで検証したりして調査。結果、layout.jsという、Next.jsには必須のファイルが足りないことが分かりました。
その後、2回か3回ほど、フォルダの場所が違う、ファイルの場所が違うなどの指摘があって、総合的に3～4時間くらいで出来ました。
https://wd-ai.vercel.app/

無事、作成することが出来ました。
回答の速度を上げるには、AIの性能（バージョンやモデル）を落とせば速度は上がるみたいですが、当然、質は下がります。また、回答の文字数が異状に多く、文章が途切れるのが気になったので調べてみたところ、文字数の調節（絶対の厳守ではないけど）も出来るようです。

成長と管理画面

さて、学習方法ですが、僕が学習させたい記事を投稿する、という方法で学習させています。当初は違う方法だったのですが、結局、記事を投げる、Claudeさんが要約してroute.jsを記述する、みたいな感じです。
また、実際にどんな質問がされたのか、どういった質問をしてきてるのか、が気になったので「どういった質問がされたか、などを把握するにはどうしたらいいですか？」と聞いてみたところ、

方法1：Vercelのログを見る（今すぐできる）

Vercelの管理画面でリクエストのログを確認できます。ただし質問の中身までは見えず「いつアクセスがあったか」程度の情報です。

方法2：データベースに会話を保存する（本格的）

質問と回答をデータベースに記録して、管理画面で一覧できる仕組みを作る方法です。これが一番便利ですが、データベースの設定が必要になります。

方法3：外部サービスを使う（比較的手軽）

LangfuseやHeliconeというサービスを使うと、Claude APIへの問い合わせを自動で記録・可視化してくれます。どんな質問が多いか、回答時間はどのくらいか、なども見られます。

方法3のHeliconeが一番手軽とのことなんで、これも作ってみました。なお、無料プランがあって、月10,000リクエストまで無料とのことなので、個人利用や社内ツールレベルなら全然余裕です。

Heliconeでできること（無料範囲内）
　・どんな質問が来たか一覧で見られる
　・質問と回答のペアを全て記録
　・何時に何回使われたか
　・平均応答時間
　・コスト（APIの使用料）の管理

こんな感じで、Heliconeで見られる情報としては、質問と回答の内容、いつ使われたか、応答にかかった時間、APIのコスト（何円使ったか）などがあります。使い込んでいくと「こういう質問が多いな」「ここの回答が弱いな」という気づきが出てきて、システムプロンプトをさらに改善するヒントになります。
外部サイトして利用も出来ますし、冒頭に貼ってあるように、ifrmae形式でブログやWEBサイトに埋め込みも可能です。

イメージとして

中身はClaude（Sonnet）だけど、性格と知識は僕仕様という感じです。
ベースのAI能力はClaudeのものですが、
　・「WEBディレクターとして答える」という役割
　・このブログ記事から得た実体験・考え方
　・文字数等、設定されたスタイルで回答する

これらはシステムプロンプトで設定しているので、Claudeが僕の経験を借りて動いているイメージが近いかもしれません。「僕の経験 × Claudeの言語能力」って感じです。故に、「AIを自作した」とは言い切れず、自動車のエンジンはClaudeで燃料が僕の記事って感じですね。
たまに自社サービス名+AIでオリジナルっぽいものを開発しました、って話もありますが、中身は結局既存のAiってあるじゃないですか。あれってこれだと思います。OpenAIやAnthropicのAPIを使って、プロンプトを工夫しているだけのケースがほとんどで、本当に独自でAIを開発している（モデル自体を作っている）のはGoogleとかMetaとかの超大企業レベルの話でしょうね。

さて、これをどう展開させるのか、ビジネスにつなげるかは次回の記事に回したいと思います（めっちゃ長いもん）。