Zenn
🔖

【ローカルLLM × MCP】OllamaとMCPでLINE風チャットAIを作ってみた【Node.js／TypeScript】

に公開
TypeScript
Model Context Protocol
Ollama
tech

【ローカルLLM × MCP】OllamaとMCPでLINE風チャットAIを作ってみた【Node.js／TypeScript】

最近話題のローカルLLM「Ollama」と、外部機能連携が簡単になる「Model Context Protocol（MCP）」を組み合わせて、LINE風のチャットUIを備えたAIチャットアプリを作ってみました。

この記事では、プロジェクトの概要、技術構成、インストール手順、そしてアーキテクチャのポイントをご紹介します。

🎬 デモ動画

まずは完成したチャットアプリの動作をご覧ください👇

📽️ <iframe width="560" height="315" src="https://www.youtube.com/embed/egD5knWnxPQ?si=DaZD9X4I_YPPvbIq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

📝 プロジェクト概要

このWebアプリは、ローカルで動作するOllamaと**MCP（Model Context Protocol）**を活用し、まるでLINEのようなチャット体験を提供するAIチャットエージェントです。

主な特徴

  • ✅ LINE風のモダンなUI
  • ✅ ローカルLLM（Ollama）による高速応答
  • ✅ MCP経由で天気や時刻などの外部情報も取得可能
  • ✅ ストリーミング応答でスムーズなチャット体験
  • ✅ すべてブラウザ上で動作（クライアントと簡易サーバー）

📷 スクリーンショット

screen-shot-2.png

🛠 技術スタック

カテゴリ 使用技術
フロントエンド HTML/CSS/JS, Express.js
バックエンド Node.js, Express.js, TypeScript
AI/LLM Ollama（ローカルLLM）
外部連携 Model Context Protocol (MCP)
その他 ESLint, Prettier

🔧 セットアップ方法

✅ 事前準備

✅ インストール手順

# 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

Discussion