久々のLaravelネタですが、Laravel Newsで紹介されていた AI Chat Starter Kitが面白そうなので使ってみました。
前提条件
- PHP8.2以降インストール済
- Composer2.xインストール済
- Ubuntu24.04.2 LTS(WSL2 on Windows11)で作業していきます
▼phpenvでのPHP&Composerインストール
▼Laravel推奨のPHP&Composerの簡単インストール
bunインストール
BunはNode.jsの代替として使えるJavascript/Typescriptの実行環境・ツールキットです（ChatGPTの受け売り）
curlを使ってインストールします。
curl -fsSL https://bun.sh/install | bash
「~/.bun/bin/bun」にインストールされ、シェルのrcファイルにパスが追記されました。
「source ~/.zshrc」かターミナルを開きなおしてパスを通しておきましょう。
Laravelインストーラー
Laravelのインストール方法は複数ありますが、
Laravel12からは、公式ドキュメント上のインストール方法が
「laravel new」のみになりました。
「オマイラlaravel new使えよ」ということは明白です。
筆者は今まで頑なにComposerでインストールしてましたが、
Composer狂信者というわけではありません。
Starter Kitのインストール方法が「laravel new」形式なので
素直にLaravelインストーラーをインストールしていくことにします。
あ、composer…
composer global require laravel/installer
システム上にlaravelインストーラーがインストールされました。
ヘルプはこのようになっています。
新規Laravelプロジェクト作成
新規Laravelプロジェクト「lara-ai-chat」をAI Chat Starter Kitを適用して作成します。
laravel new --using=pushpak1300/ai-chat lara-ai-chat
Laravelバナー表示の後にtesting frameworkについて訊かれるので、
上下矢印キーで好きな方を選択して[Enter]押下で続行します。
migration実行後にnodeパッケージのインストールとビルドをするか訊かれるので、
ここではYesを選択した状態で[Enter]押下で続行します。
なんか警告めいたメッセージは無視して構いません。
プロジェクトフォルダに入ります。
cd lara-ai-chat
開発サーバーを起動します。
composer run dev
WEBブラウザで動作確認
WEBブラウザで http://127.0.0.1:8000/ にアクセスします。
見慣れた形式の画面が表示されましたね。
最初はユーザー登録されていないので、サインアップしていきます。
画面左下の「GU Guest User」をクリックして、
ポップアップメニューから「Login」を選択します。
ログイン画面最下部の「Sign up」のリンクをクリックします。
必要事項を入力して「Create account」ボタンを押下します。
プロジェクト内のDBにユーザー登録され、ログイン状態でチャット画面に遷移します。
ちなみに、デフォルトで使用できるモデルが次のようになっています。
- GPT-4o mini
- GPT-4.1 Nano
- O4 mini
が、当然、どれもAPIキーの設定が必要です。
設定前にチャットをしようとしてもAIの返答はなく独り言になります。
プロジェクトトップにある「.env」内でAPIキーを記述する必要があります。
GEMINI_API_KEY="<gemini-api-key>"
OPENAI_API_KEY="<openai-api-key>"筆者はAPIキーを取得していないので、
ローカルで稼働するOllamaを使っていきます。
Ollamaについては次の記事をご覧ください。
モデルの追加
使用するモデル名の定義は次のファイルに記述されています。
▼「app/Enums/ModelName.php」
<?php
declare(strict_types=1);
namespace App\Enums;
use Prism\Prism\Enums\Provider;
enum ModelName: string
{
// case GEMINI_2_0_FLASH_LITE = 'gemini-2.0-flash-lite';
// case GEMINI_2_0_FLASH = 'gemini-2.0-flash';
case GPT_4O_MINI = 'gpt-4o-mini';
case GPT_4_1_NANO = 'gpt-4.1-nano';
case O4_MINI = 'o4-mini';
/**
* @return array{id: string, name: string, description: string, provider: string}[]
*/
public static function getAvailableModels(): array
{
return array_map(
fn (ModelName $model): array => $model->toArray(),
self::cases()
);
}
public function getName(): string
{
return match ($this) {
self::GPT_4O_MINI => 'GPT-4o mini',
self::GPT_4_1_NANO => 'GPT-4.1 Nano',
self::O4_MINI => 'O4 mini',
};
}
public function getDescription(): string
{
return match ($this) {
self::GPT_4O_MINI => 'Cheapest model, best for smarter tasks',
self::GPT_4_1_NANO => 'Cheapest model, best for simpler tasks',
self::O4_MINI => 'Reasoning model, best for complex tasks',
};
}
public function getProvider(): Provider
{
return match ($this) {
self::GPT_4O_MINI => Provider::OpenAI,
self::GPT_4_1_NANO => Provider::OpenAI,
self::O4_MINI => Provider::OpenAI,
};
}
/**
* @return array{id: string, name: string, description: string, provider: string}
*/
public function toArray(): array
{
return [
'id' => $this->value,
'name' => $this->getName(),
'description' => $this->getDescription(),
'provider' => $this->getProvider()->value,
];
}
}筆者がインストールしているモデルは次の通りです。
次の手順でOllamaのモデルを追加していきます。
例として、Ollamaのモデル「llama3.2:3b」を追加していきます。
▼１．モデル名の enum caseを追加します。
※ollama の引数として指定するモデル名
case LLAMA_3_2_3B = 'llama3.2:3b';▼２．getName() メソッドの match 式内に、プルダウンで表示する名称を追記します。
public function getName(): string
{
return match ($this) {
self::GPT_4O_MINI => 'GPT-4o mini',
self::GPT_4_1_NANO => 'GPT-4.1 Nano',
self::O4_MINI => 'O4 mini',
self::LLAMA_3_2_3B => 'Llama 3.2 3B',
};
}▼３．getDescription() メソッドにモデルの説明を追記します。
public function getDescription(): string
{
return match ($this) {
self::GPT_4O_MINI => 'Cheapest model, best for smarter tasks',
self::GPT_4_1_NANO => 'Cheapest model, best for simpler tasks',
self::O4_MINI => 'Reasoning model, best for complex tasks',
self::LLAMA_3_2_3B => 'Open-source model, best for general tasks',
};
}▼４．getProvider() メソッドのmatch式内にプロバイダーを追記します。
public function getProvider(): Provider
{
return match ($this) {
self::GPT_4O_MINI => Provider::OpenAI,
self::GPT_4_1_NANO => Provider::OpenAI,
self::O4_MINI => Provider::OpenAI,
self::LLAMA_3_2_3B => Provider::Ollama,
};
}※執筆時点(2025/07/11)でサポートされているAIプロバイダーは次の通り
▼「vendor/prism-php/prism/src/Enums/Provider.php」
<?php
declare(strict_types=1);
namespace Prism\Prism\Enums;
enum Provider: string
{
case Anthropic = 'anthropic';
case DeepSeek = 'deepseek';
case Ollama = 'ollama';
case OpenAI = 'openai';
case Mistral = 'mistral';
case Groq = 'groq';
case XAI = 'xai';
case Gemini = 'gemini';
case VoyageAI = 'voyageai';
}WEBブラウザをリロードしてから、画面上部のモデル一覧のプルダウンを表示しすると、「Llama 3.2 3B」が追加されています。
モデルを「Llama 3.2 3B」にしてチャットしてみます。
一応、日本語もいけます。
ちなみに、チャット履歴は、ローカルDBのテーブル「chats」と「messages」に保存されています。
チャット内容の公開
デフォルトでチャット内容は「Private」になっていて、ログインしていない状態でチャットのURLにアクセスしようとすると、403 THIS ACTION IS UNAUTHORIZEDとなります。
画面右上のプルダウンから「Public」を選択するとログインしていなくてもチャット内容が閲覧できるようになります。
チャットのURLをコピーしてからログアウトして、
ブラウザにチャットのURLを貼り付けてみると、チャットの内容が表示されます。
設定変更
画面左下のポップアップメニューから「Settings」を選択します。
設定メニューは３つあります。
１．Profile
２．Password
３．Appearance
今回はAppearanceでテーマの変更だけやります。
デフォルトは「System」のLightモードになっています。
「Dark」モードを選択すると次のようになります。
- 0
- 0
- 0
- 0
コメント