はじめに
以前にもChat UIとOllamaの組み合わせは使ったことがあります。 touch-sp.hatenablog.com
久しぶりにChat UIについて調べてみたら以前からずいぶん変わっていました。
MongoDBの使用が必須ではなくっていました。
chatPromptTemplateのような難しい設定が不要になっていました。
使い方
非常に簡単です。
リポジトリのクローン
git clone https://github.com/huggingface/chat-ui cd chat-ui
.env.localファイルの作成
記述する内容はいたってシンプルです。
chat-uiフォルダに保存します。
OPENAI_BASE_URL=http://127.0.0.1:11434/v1 OPENAI_API_KEY=ollama
ビルド
npm install npm run build
実行
npm run preview -- --open
ショートカット
以下のようなショートカットを作成しておけばクリックするだけで開始できます。
リンク先
C:\Windows\System32\cmd.exe /k "npm run preview -- --open"
作業フォルダ（クローンしたリポジトリ）
D:\chat-ui
MCPサーバーの使い方
STDIOが使えないので以下を実行します。
npx @modelcontextprotocol/server-everything sse
httpが使えないので以下を実行します。
npx localtunnel --subdomain chatui-1234 --port 3001
これでhttps://chatui-1234.loca.lt/sseで登録可能となります。
セキュリティーの問題があるのでサブドメインはもっと複雑にした方が良いと思います。
また、自身が使用しているサブドメインは公開しない方が良いです。
ショートカット
以下のバッチファイルが役に立ちます。
@echo off
REM Start 3 services in Windows Terminal tabs
REM Shutdown existing LocalTunnel process
echo Shutdown LocalTunnel...
taskkill /F /IM node.exe /FI "WINDOWTITLE eq LocalTunnel*" >nul 2>&1
taskkill /F /IM node.exe /FI "COMMANDLINE eq *localtunnel*" >nul 2>&1
echo Shutdown port 3001...
for /f "tokens=5" %%a in ('netstat -aon ^| find ":3001" ^| find "LISTENING"') do (
taskkill /F /PID %%a >nul 2>&1
)
timeout /t 2 /nobreak >nul
wt -w 0 new-tab --title "MCP Server" cmd /k "npx @modelcontextprotocol/server-everything sse"
timeout /t 4 /nobreak >nul
wt -w 0 new-tab --title "LocalTunnel" cmd /k "npx localtunnel --subdomain chatui-1234 --port 3001"
timeout /t 3 /nobreak >nul
wt -w 0 new-tab --title "ChatUI" cmd /k "cd /d D:\chat-ui && npm run preview -- --open"
