【ローカルLLM × MCP】OllamaとMCPでLINE風チャットAIを作ってみた【Node.js／TypeScript】
最近話題のローカルLLM「Ollama」と、外部機能連携が簡単になる「Model Context Protocol（MCP）」を組み合わせて、LINE風のチャットUIを備えたAIチャットアプリを作ってみました。
この記事では、プロジェクトの概要、技術構成、インストール手順、そしてアーキテクチャのポイントをご紹介します。
🎬 デモ動画
まずは完成したチャットアプリの動作をご覧ください👇
📽️
📝 プロジェクト概要
このWebアプリは、ローカルで動作するOllamaと**MCP（Model Context Protocol）**を活用し、まるでLINEのようなチャット体験を提供するAIチャットエージェントです。
主な特徴
- ✅ LINE風のモダンなUI
- ✅ ローカルLLM（Ollama）による高速応答
- ✅ MCP経由で天気や時刻などの外部情報も取得可能
- ✅ ストリーミング応答でスムーズなチャット体験
- ✅ すべてブラウザ上で動作（クライアントと簡易サーバー）
📷 スクリーンショット
🛠 技術スタック
| カテゴリ | 使用技術 |
|---|---|
| フロントエンド | HTML/CSS/JS, Express.js |
| バックエンド | Node.js, Express.js, TypeScript |
| AI/LLM | Ollama（ローカルLLM） |
| 外部連携 | Model Context Protocol (MCP) |
| その他 | ESLint, Prettier |
🔧 セットアップ方法
✅ 事前準備
- Node.js 18+
- Ollamaのインストール
- MCPに対応したサーバー（または自作）
✅ インストール手順
# Ollamaをバックグラウンドで起動しておく
git clone https://github.com/softjapan/ollama-mcp-agent.git
cd ollama-mcp-agent
npm install
npm run build
npm run start
ブラウザで http://localhost にアクセスすれば起動します。
🔍 アーキテクチャの概要
[ブラウザUI]
↓ HTTP
[Expressサーバー（Node.js）]
├─> Ollama（ローカルLLM）へのリクエスト
└─> MCP対応モジュールで外部API（天気、時刻など）を呼び出し
Ollamaはローカルで動作するため、インターネットに依存せずに高速なレスポンスが得られます。さらにMCPを介することで、LLMが「天気を教えて」といった曖昧な質問にも外部情報と連携して対応可能になります。
🧪 応用アイデア
- ユーザーの質問に応じてニュースAPIや為替APIと連携
- スマホ対応にしてPWAとしてインストール可能に
- Ollamaのモデルを切り替えて精度や速度を比較
📄 ライセンス
このプロジェクトはMITライセンスで公開されています。
詳細は LICENSE をご覧ください。
🚀 おわりに
ローカルLLMとMCPの組み合わせは、AIを安全に・柔軟に使いたい開発者にとって非常に魅力的な選択肢です。気になった方はぜひGitHubを覗いてみてください👇
🔗 GitHub: https://github.com/softjapan/ollama-mcp-agent