カスタムAIチャットアプリの拡張方法｜初心者でもKimi K3でアプリ開発を楽しむ【Runpod×Kimi入門】

カスタムAIチャットアプリの拡張：Runpod API専用 – Kimi編

この記事で分かること（はじめに）

この記事は、「カスタムAIチャットアプリの拡張」についての解説記事です。

【Runpod API – Kimi編】AIチャットアプリ講座のAIチャットアプリ開発のステップ①〜⑦

【開発版】ステップ①〜⑦
：【プログラミング】AIチャットアプリ開発入門講座 – Runpod API専用 – Kimi編（一覧）

で作り上げたカスタムAIチャットアプリや、ダウンロード版

【ダウンロード版】カスタムAIチャットアプリ
：【ダウンロード】カスタムAIチャットアプリ：Runpod API専用 – Kimi編

のアプリは、HTML1ファイルだけで動く、あなただけのAIチャットアプリです。

そしてこのアプリの最大の特徴は、「自分好みに拡張できる」ことです。

「アプリのタイトルを変えたい」
「テーマカラーを変えたい」
「新しいボタンを追加したい」
「会話の検索機能を追加したい」
――そんな「自分好みの拡張」を、このアプリを使って、プログラミングで実現できます。

この記事では、以下の2つのポイントを解説します。

1. 現在のアプリの仕様：
ステップ①〜⑦で作り上げたアプリの全体像と、「拡張しやすい設計」がどこに仕込まれているか

2. 拡張プラン：
レベル別（初級・中級・上級）の拡張アイデアと、Kimi K3へのプロンプト例

この記事の対象読者

以下のような方を対象としています。

・チャットAIのアプリ開発に関心のあるチャットAI初学者の方
・チャットAIでどのようなことができるのか？を知りたい方
・このアプリについて深掘りしたい、ステップ①〜⑦までを完走した読者の方
・「自分好みのアプリを作りたい」と思っている方

「アプリを使うだけ」から、「アプリを拡張する」へ。
その一歩を、この記事で踏み出しましょう。

このアプリで「何ができるのか」を、もう一度確認しよう

まず、このアプリで「何ができるのか」を、もう一度確認しておきましょう。

AIチャットアプリ開発入門講座

【プログラミング】ステップ①〜⑦
：【プログラミング】AIチャットアプリ開発入門講座｜Runpod API専用 – Kimi編【7ステップで完成】 | 一覧ページ

で作り上げたアプリや、ダウンロード版

【ダウンロード版】カスタムAIチャットアプリ
【ダウンロード】カスタムAIチャットアプリ：Runpod API専用 – Kimi編

のアプリは、以下の機能を備えています。

■ チャットの基本機能

・AIとのリアルタイムチャット（回答が少しずつ表示されるストリーミング方式）
・AIの「思考過程」の表示（Kimi K3（常時思考）／Kimi K2.7 Code／K2.6の思考モード対応）
・回答のMarkdown表示・シンタックスハイライト（コードが色付きで見やすく表示）
・応答時間の計測表示（応答時間・思考過程の文字数・本文の文字数）
・長い質問は自動で折りたたみ（「全文を表示」ボタンで展開）
・チャット履歴の保存（ブラウザのlocalStorageに自動保存）
・「＋新しいチャット」「全履歴削除」「テーマ（ライト／ダーク）切り替え」

■ モデル・パラメータの設定機能

・モデル名の切り替え（Kimi K3／K2.7 Code／K2.6）
・reasoning_effort（Kimi K3の推論レベル）の設定
・思考モードのON／OFF
・max_tokens（最大出力トークン数）の設定
・画面更新間隔・APIタイムアウトの調整
・カスタムシステムプロンプト（AIの性格や役割を自分で設定）

■ ファイルアップロード機能

・画像（🖼）・PDF（📄）・テキストファイル（📝）・フォルダ（📁）のアップロード
・ドラッグ＆ドロップ対応（ファイル直起動方式ではフォルダは非対応・ローカルサーバー起動方式では対応）
・アップロード上限サイズの設定

■ 便利機能

・会話履歴のエクスポート（出力）／インポート（読込）
・質問ナビゲーションタイムライン（過去の質問へワンクリックでジャンプ）
・ウェルカム画面（起動時の初期画面）
・モバイル対応（スマホ・タブレットでも快適に動作）

サーバーの構築は不要です。
ブラウザとテキストエディタだけあれば開発でき、ファイルをダブルクリックするだけで動きます。

注：ファイル構造によるアプリの不具合と対応
「custom-app-dev.html」のファイルが配置されていディレクトリ（ファイルの階層構造）内に

・file:///Users/childprogram/Desktop/custom-app-dev.html
＊ブラウザのアプリ表示画面のURLの表示

などと、全て半角英数の文字だけになっている場合には、アプリのUIのレイアウトの崩れがない状態で使えるようでした。
どうしても半角英数以外の文字が入ってしまう場合の対応は、以下の記事ページ

ローカルサーバー上でアプリを起動する手順例
：【ダウンロード】カスタムAIチャットアプリ：Runpod API専用 – Kimi編

で、ローカルサーバー上でアプリを起動する手順を参照してください。
その際には、フォルダ内にこの講座で作成するファイルを配置して手順を進めてください。

【ファイル構造】

custom-aichatapp/
└─ custom-app-dev.html

「アプリを使う」から「アプリを拡張する」へ

このアプリは、単に「使うだけ」のAIチャットアプリではありません。

ウェブ版のUI上で「カスタムシステムプロンプト」を活用したプロンプトエンジニアリング（プロンプトの内容を工夫することで、AIの出力内容を調整する技術）に慣れてきたら、次は「アプリ自体を拡張する」フェーズに移行できます。

アプリの性質上、APIの制限はあります。それでも、APIの仕様が許す範囲で
「自分が思うようにアプリをカスタムして進化させる」
経験を積むことで、チャットAI（会話型生成AI）のアプリ開発そのものを楽しんでもらうこと。
それも、このアプリを作った目的の1つです。

システムプロンプトを設定して「自分好みのチャットAI」にカスタマイズすることはもちろん、その先にある「アプリ自体をカスタマイズして、機能やUIを拡張する」ことまでを想定しています。

「アプリを使うだけ」から、「アプリを拡張する」へ。

その一歩を、この記事で踏み出しましょう。

拡張の「3つのレベル」――どこから始めるか？

このアプリの拡張は、以下の「3つのレベル」に分けられます。

「初級」から始めて、「中級」「上級」と、少しずつ拡張を進めていくのがおすすめです。

この記事では、各レベルの拡張アイデアと、Kimi K3へのプロンプト例を紹介します。

【初級】小さな変更から始める拡張――「文字や色」を変えるだけ

まずは初級の拡張から始めます。

初級の拡張は、
「アプリのタイトル」「テーマカラー」「システムプロンプト」
など、「文字や色」を変えるだけの小さな変更です。

拡張アイデア①：アプリのタイトルを変える

このアプリのトップバーには「カスタムAIチャット」というタイトルが表示されています。
これを、自分好みのタイトルに変えるだけでも、「あなただけのアプリ」という実感が湧きます。

■ 変更する場所

トップバー（id=”topbar”）内の、以下のタイトル表示部分を検索してください。

<div id="topbar-title">カスタムAIチャットアプリ開発（MIT License）</div>

これを、以下のように書き換えてください。

<div id="topbar-title">🤖 わたしのAI相談室</div>

■ この変更のポイント

・トップバーのタイトルを変えるだけでも、「あなただけのアプリ」という実感が湧きます。
・「🤖 わたしのAI相談室」のように、絵文字を付けると、より親しみやすい印象になります。

拡張アイデア②：テーマカラーを変える

このアプリのテーマカラーは、CSS変数（–accent）で一元管理されています。
これを、自分好みの色に変えるだけでも、「あなただけのアプリ」という実感が湧きます。

■ 変更する場所

CSSのテーマ変数（:root）内の、以下のアクセントカラーの部分を検索してください。

  /* アクセント色：視認性を維持しつつ、少し落ち着いた色に */
  --accent: #4a5dd8;
  --accent-hover: #3d4ec4;

これを、以下のように書き換えてください。

  --accent: #00b894;    /* アクセントカラー（緑に変更） */
  --accent-hover: #019875;

■ この変更のポイント

・CSS変数（–accent）を変えるだけで、アクセントカラーが変わるようになります。
・「緑」に変えると、落ち着いた印象になります。
・「オレンジ」に変えると、元気な印象になります。

拡張アイデア③：システムプロンプトを変える

このアプリのシステムプロンプトは、「プログラミング支援専門のAIアシスタント」という指示書です。
これを、自分好みの指示書に変えるだけでも、「あなただけのAI」という実感が湧きます。

■ 変更する場所

設定パネルを開き、「カスタムシステムプロンプトモードを有効化」のチェックボックスをONにしてください。
その下に表示される「カスタムシステムプロンプト」の編集エリアに、以下のような指示書を書き換えてみてください。

あなたは、親切な料理研究家です。
ユーザーの質問には、料理の専門家として、
初心者にも分かりやすく回答してください。

■ この変更のポイント

・システムプロンプトを変えるだけで、AIの性格や役割が変わるようになります。
・「料理研究家」に変えると、料理の質問に答えるようになります。
・「法律の専門家」に変えると、法律の質問に答えるようになります。

■ Kimi K3へのプロンプト例

システムプロンプトを変えるときに、Kimi K3に「どんなシステムプロンプトがいいか」を聞くと、以下のようなプロンプトが便利です。

【Kimi K3へのプロンプト例】

「プログラミング支援専門のAIアシスタントとして、
以下の質問に答えてください。

あなたは、日本語で回答するプログラミング支援専門のAIアシスタントです。

主な対象分野：
JavaScript / HTML / CSS / TypeScript / Python / Java / C# / React / Node.js / API連携 /
Webアプリケーション / データベース / Linux / Docker / クラウド / AIアプリケーション / 
デバッグ / コードレビュー

回答ルール：
1. 最初に結論を簡潔に述べる
2. 必要に応じて、原因、手順、実装例の順に説明する
3. コードは言語名付きMarkdownコードブロックで表示する
4. コード本文と解説文を分離する
5. コードはコピーして利用しやすい形にする
6. 重要な処理を省略しない
7. APIキー、パスワード、トークンなどの秘密情報を出力しない
8. 秘密情報は環境変数や安全な設定方法で管理するよう説明する
9. ユーザーが提示したコードを修正する場合は、変更点を説明する
10. 必要に応じて修正後の完全なコードを提示する
11. エラー処理、入力検証、セキュリティにも配慮する
12. 仕様が不明な場合は断定せず、前提条件を明示する
13. 画像が添付された場合は、画像内のコード、エラー、UI、図表を確認して回答する
14. PDFが添付された場合は、提供されたテキストまたはページ画像の範囲内で回答する
15. 判読できない情報は推測で断定しない
16. コード例は可能な限り実行可能な形で提示する
17. 複数ファイルが必要な場合は、ファイル名ごとにコードブロックを分ける
18. 回答は日本語で行う
19. 必要に応じて見出し、箇条書き、表を使用する
20. 確実な事実と推測を区別する
21. 回答本文（content）には、内部の詳細な思考過程や隠れた推論を記述しない
22. 思考過程はモデルの thinking 機能が reasoning_content として出力するものであり、回答本文に思考内容を書き写したり、その存在に言及したりしない
23. 「分析中」「回答を構成中」などの進捗状況はアプリ側が表示するため、回答本文には含めない
24. 回答本文に進捗メッセージを混在させない
25. ウェブ検索や外部サイトの検索を実行したことにしてはいけない
26. 外部情報を確認していない場合は、確認していないことを明示する
27. ユーザーが提供したテキスト、画像、PDF、コードを主な入力情報として扱う
28. 画像やPDFに書かれていない内容を断定しない
29. 回答の最後に、必要であれば注意点や制限事項を記載する
30. 新しいコードを追加する場合は、既存コードのどの位置に挿入するかを具体的に説明する
31. 追加対象が関数の場合、その関数が呼び出される既存コード（使用箇所）の位置も併記する

このシステムプロンプトを、以下の目的に合わせてカスタマイズしてください。

【目的】
例：「料理の専門家として回答してほしい」「法律の専門家として回答してほしい」など

このプロンプトを送信すると、Kimi K3は「この目的に合わせてカスタマイズされたシステムプロンプト」を提案してくれます。
「目的」を変えると、Kimi K3は「その目的に合わせてカスタマイズされたシステムプロンプト」を提案してくれます。

【中級】新しい要素を追加する拡張――「新しい要素」を追加する

続いて中級の拡張です。

中級の拡張は、「モデルの表示名を変える」「新しい設定項目」など、「新しい要素」を追加する変更です。

拡張アイデア①：モデルの表示名を変える

このアプリのモデル名は、「Kimi K3」「Kimi K2.7 Code」「Kimi K2.6」という表示名です。
これを、自分好みの表示名に変えるだけでも、「あなただけのアプリ」という実感が湧きます。

■ 変更する場所

モデルの表示名を返す関数（getModelDisplayName）内の、以下の表示名の部分を検索してください。

  const names = {
    "kimi-k3": "Kimi K3",
    "kimi-k2.7-code": "Kimi K2.7 Code",
    "kimi-k2.6": "Kimi K2.6"
  };

これを、以下のように書き換えてください。

  const names = {
    "kimi-k3": "🤖 わたしのAI（Kimi K3）",
    "kimi-k2.7-code": "🤖 わたしのAI（Kimi K2.7 Code）",
    "kimi-k2.6": "🤖 わたしのAI（Kimi K2.6）"
  };

■ この変更のポイント

・モデルの表示名を変えるだけで、モデルの表示名が変わるようになります。
・「🤖 わたしのAI（Kimi K3）」に変えると、「わたしのAI」という実感が湧きます。

拡張アイデア②：新しい設定項目を追加する

このアプリの設定パネルには、「モデル名」「reasoning_effort」「max_tokens」などの設定項目が表示されています。
これに、「新しい設定項目」を追加するだけでも、「あなただけのアプリ」という実感が湧きます。

■ Kimi K3へのプロンプト例

以下のプロンプトは、新しい設定項目を追加する際のプロンプト例です。

【Kimi K3へのプロンプト例】
添付ファイル「custom-app-dev.html」が現状のプログラムです。
現在の設定の機能に「〜」の設定項目を追加してください。

＊現状のアプリのファイルを添付して送信

このプロンプトを送信すると、Kimi K3は「目的に合わせてカスタマイズされた設定項目」を提案してくれます。
「目的」を変えると、Kimi K3は「その目的に合わせてカスタマイズされた設定項目」を提案してくれます。

【上級】新しい機能を追加する拡張――「新しい機能」を追加する

最後に上級の拡張です。

上級の拡張は、
「会話の検索機能」「お気に入り機能」「新しいボタン」
など、「新しい機能」を追加する変更です。

拡張アイデア①：会話の検索機能を追加する

このアプリのチャット欄には、「チャット履歴の一覧」が表示されています。
これに、「会話の検索機能」を追加するだけでも、「あなただけのアプリ」という実感が湧きます。

■ Kimi K3へのプロンプト例

以下のプロンプトは、新しい機能を追加する際のプロンプト例です。

【Kimi K3へのプロンプト例】
添付ファイル「custom-app-dev.html」が現状のプログラムです。
サイドバーに検索機能を追加してください。
尚、検索機能は以下のコード

<!-- ▼▼ 新しい検索機能を追加 ▼▼ -->
<div id="searchBox">
  <input type="text" id="searchInput" placeholder="チャット履歴を検索...">
</div>

をもとにして、チャット履歴を検索できるように機能を実装してください。
また、検索欄は、サイドバーの横幅の中央配置となるようにしてください。

＊現状のアプリのファイルを添付して送信

■ この変更のポイント

・チャット履歴の一覧に検索機能を追加するだけで、チャット履歴の検索機能が変わるようになります。
・「チャット履歴を検索…」を追加すると、「チャット履歴の検索機能」が変わるようになります。

拡張アイデア②：お気に入り機能を追加する

このアプリには、「チャット履歴の一覧」が表示されています。
これに、「お気に入り機能」を追加するだけでも、「あなただけのアプリ」という実感が湧きます。

■ Kimi K3へのプロンプト例

以下のプロンプトは、新しい機能を追加する際のプロンプト例です。

【Kimi K3へのプロンプト例】
添付ファイル「custom-app-dev.html」が現状のプログラムです。
チャット履歴のお気に入り機能を追加してください。
尚、お気に入り機能は以下のコード

<!-- ▼▼ 新しいお気に入り機能を追加 ▼▼ -->
<div id="favoriteBox">
  <input type="checkbox" id="favoriteInput">
  <label for="favoriteInput">お気に入り</label>
</div>

をもとにして、お気に入り機能が機能するように実装してください。
また、実装が難しい場合には、今回のアプリに、どのようにチャット履歴のお気に入り機能を
追加したらいいかを提案してください。

＊現状のアプリのファイルを添付して送信

■ この変更のポイント

・チャット履歴の一覧にお気に入り機能を追加するだけで、チャット履歴のお気に入り機能が変わるようになります。
・「お気に入り」を追加すると、「チャット履歴のお気に入り機能」が変わるようになります。

まとめ：「アプリを使う」から「アプリを拡張する」へ――あなただけのアプリ開発の旅

この記事では、カスタムAIチャットアプリの拡張について、現在のアプリの仕様・拡張プラン・拡張の可能性を解説し、各レベルの拡張アイデアと、Kimi K3へのプロンプト例を紹介しました。

ここまでの内容を、3つのポイントにまとめます。

1. 現在のアプリの仕様

カスタム版のアプリは、以下の機能を備えています。

■ チャットの基本機能：
AIとのリアルタイムチャット（ストリーミング）・AIの「思考過程」の表示・回答のMarkdown表示・シンタックスハイライト・応答時間の計測表示・長い質問の折りたたみ・チャット履歴の保存・「＋新しいチャット」「全履歴削除」「テーマ切り替え」

■ モデル・パラメータの設定機能：
モデル名の切り替え・reasoning_effortの設定・思考モードのON／OFF・max_tokensの設定・画面更新間隔・APIタイムアウトの調整・カスタムシステムプロンプト

■ ファイルアップロード機能：
画像・PDF・テキストファイル・フォルダのアップロード・ドラッグ＆ドロップ対応（ファイル直起動方式ではフォルダは非対応・ローカルサーバー起動方式では対応）・アップロード上限サイズの設定

■ 便利機能：
会話履歴のエクスポート／インポート・質問ナビゲーションタイムライン・ウェルカム画面・モバイル対応

2. 拡張プラン：レベル別（初級・中級・上級）の拡張アイデアと、Kimi K3へのプロンプト例

このアプリの拡張は、以下の「3つのレベル」に分けられます。

「初級」から始めて、「中級」「上級」と、少しずつ拡張を進めていくのがおすすめです。

この記事では、各レベルの拡張アイデアと、Kimi K3へのプロンプト例を紹介しました。
今後のチャットAIの発展によっても、様々な機能が出てくるのではないかと思います。
その時代に応じて、自分好みのチャットアプリを使えるといいですね。

また、まだ、AIチャットアプリ開発入門講座を済ませていない方は、アプリ自体を深掘りしたい場合には、実際に「アプリ開発」をしながら、各プログラミングのコードの役割や挙動を確認することで、さらにAIチャットアプリに対する理解を深めてみましょう。

【プログラミング】全7ステップでAIチャットアプリ開発
：【プログラミング】AIチャットアプリ開発入門講座 – Runpod API専用 – Kimi編（一覧）

【Q&A集：AIチャットアプリの疑問】
アプリ自体の挙動や対応例などのQ&A。
：【Q＆A】AIチャットアプリ：Runpod API専用 – Kimi編

AIチャットアプリを使う上での疑問を解決。

by 子供プログラマー

Runpod APIキーですぐに使えるウェブアプリ
：【ウェブアプリ】AIチャットアプリ：Runpod API専用 – Kimi編（Kimi K3対応）