くらしの相談チャット、というアプリです。
家計・節約・生活の悩みを、AIに相談できます。
自分で作りました。
正直、「AIを動かすサービスを自分で作れる」とは思っていませんでした。
でもできました。しかもたった2時間で。
この記事でわかること
- Claude API（AIのAPI）を使ったチャットアプリの作り方の流れ
- API連携で初めてエラーが出たときの対処法
- 「AIを使う側」から「AIを動かす側」になった感覚
何を作ったか
くらしの相談チャット
https://kurashi-chat.vercel.app/
家計・節約・生活のお悩みに、AIが答えてくれるチャットアプリです。
こんな質問ができます。
- 「食費を月2万円に抑えるには？」
- 「NISAって何から始めればいい？」
- 「固定費を見直したいんだけど」
- 「ふるさと納税のやり方を教えて」
お金や暮らしのことって、誰かに聞きたいけど聞きにくい。
そんな質問を、気軽に投げられる場所を作りたかったんです。
※ここにスクショ：アプリのチャット画面（トップページ）
なぜ作ったか
このブログでは、AIと一緒にアプリを作る記録を書いています。
1本目でWebアプリの基本を覚えました。
2本目でNISAシミュレーター、3本目で手取り計算機。
どれも、自分のコードだけで動いていました。
そこで、ふと思ったんです。
「AIを”使う”だけじゃなくて、AIを”動かす”側になれないか？」
ChatGPTやClaudeって、毎日使っている。
でも自分のサービスの中でAIを動かしたことは、一度もなかった。
それをやってみたくなりました。
どうやって作ったか（AIの使い方）
大きく4つのステップで進めました。
ステップ1：設計（15分）
まずAIに相談しながら、仕様を決めました。
伝えたのはこの2点です。
- 「暮らし相談に特化したチャットを作りたい」
- 「よくある質問をボタンで選べるようにしたい」
AIが構成案とコードの方針を返してくれます。
自分はそれを確認して、「これでいきましょう」と答えるだけ。
ステップ2：コーディング（45分）
チャット画面のUIを作っていきます。
React + Vite（Webアプリを作るときによく使うツールセット）で組みました。
メッセージを送る・受け取る、の基本的な画面を作るフェーズです。
ここまでは、これまでのアプリと同じ流れでした。
順調でした。
ステップ3：Claude API連携（30分＋エラー格闘）
ここが今回の山場でした。
詳しくは次のセクションで話します。
ステップ4：Vercelデプロイ（15分）
Vercel（無料でWebアプリを公開できるサービス）にデプロイしました。
GitHubにプッシュ → Vercelと連携 → 環境変数（APIキー）を設定 → 完了。
この流れで、15分で公開できました。
※ここにスクショ：Vercelの設定画面（環境変数の入力箇所）
詰まったところと解決法
API連携で、エラーが出ました。
「動くはずなのに、動かない」というやつです。
画面は表示される。でもAIが返事をしてくれない。
初めてAPIを繋いだとき、こういうことが起きます。
わかっていても、実際に起きると焦ります。
でも、そこで気づいたことがあります。
AIで作ってるんだから、エラーもAIに相談すればいい。
コードとエラーメッセージを、そのままAIに貼り付けました。
「なぜ動かないか教えて」と聞くだけです。
AIが返してくれたのは、こういう内容でした。
「APIキーはサーバーサイドで参照する必要があります。クライアント側で直接使うと動きません」
なるほど、そういうことか。
直しました。動きました。感動しました。
エラーはゴールじゃない。
スタート地点なんだと、改めて思いました。
※ここにスクショ：エラーが出た画面 → 解決後の画面（ビフォーアフター）
完成してみて
完成したアプリを自分で使ってみたとき、不思議な感覚がありました。
「これ、自分が作ったのか」
画面の向こうでClaudeが動いていて、自分の質問に答えてくれます。
それを動かしているのが、自分のコードとAPIキーです。
「AIを使う人」から「AIを動かす人」になった瞬間でした。
ちょっと大げさかもしれません。
でも開発職への転職を目指している私には、この感覚はとても大事でした。
「AIを動かせる」って、ポートフォリオの一行じゃなくて、体感としてわかった気がしています。
まとめ・使ってみてください
今回のまとめです。
- Claude API：Anthropicが提供するAIを自分のアプリに組み込める仕組み
- 費用：最初の5ドルクレジットで開発〜動作確認まで十分まかなえた
- 制作時間：約2時間（エラー対応込み）
- 一番の壁：API連携のエラー → AIに相談して解決
- 一番の気づき：エラーもAIに聞けばいい
「くらしの相談チャット」、ぜひ使ってみてください。
家計・節約・お金のことを、気軽に聞いてみてください。
思ったより、ちゃんと答えてくれます。
最後まで読んでくださって、ありがとうございます。
AIを動かす側になってみて、世の中のサービスの見え方が変わりました。
「これもAPIで動いてるんだろうな」って思えるようになりました。
それが一番の収穫だったかもしれません。
また来てください。くらしの複利でした。
採用担当の方はこちら → 私を採用しませんか
📢 広告です
ハピタス経由で証券口座を開設するとポイントがもらえてお得です。
コメント