chatbot-ai-mcp-demo
🎬 AIチャットボットデモ: MCP + PostgreSQL + DeepSeek V4 Pro
「AIにSQLを書かせない。AIに安全なAPIを呼ばせる。」
MCP(Model Context Protocol)をNext.js 15、PostgreSQL、DeepSeek V4 Proと統合した安全なAI統合のプロフェッショナルデモ - 動画コンテンツに最適です。
🎯 解決する課題
AIを製品に統合する際、多くの開発者が直面する問題:
❌ セキュリティリスク: AIが誤った、または危険なSQLを生成(
DROP TABLE、DELETE)❌ ハルシネーション: AIが誤ったデータのクエリを「幻覚」で生成
❌ プロンプトインジェクション: ユーザーが有害なコマンドを送信
❌ 制御不能: AIが何を生成するかを制御できない
Related MCP server: dbecho
✅ 解決策: MCPパターン
User Prompt → AI (DeepSeek V4 Pro) → MCP Tools → PostgreSQL
↑ ↓
└─────── JSON Response ←─────────────┘原則:
🧠 AI: 推論とツール呼び出しの判断のみを行う
🛡️ MCPサーバー: セキュリティガード、危険なコマンドをブロック
💻 開発者: ツール内のSQLを100%制御
📊 PostgreSQL: 安全なデータを返す
🚀 クイックスタート
1. 依存関係のインストール
pnpm install2. 環境変数の設定
# Copy file .env.example
cp .env.example .env
# Cập nhật DEEPSEEK_API_KEY
# Lấy API key tại: https://platform.deepseek.com/api_keys3. PostgreSQLの起動
pnpm docker:upデータベースは自動的にシードされます:
115製品(5カテゴリー)
在庫データ
売上記録(30日分)
注文データ
4. 開発サーバーの起動
# Terminal 1: MCP Server
pnpm dev:mcp
# Terminal 2: Next.js Web App
pnpm dev:web
# Or run both concurrently
pnpm dev5. ブラウザを開く
アクセス: http://localhost:3000
🏗️ アーキテクチャ
技術スタック
レイヤー | 技術 | 目的 |
プレゼンテーション | Next.js 15 + React 19 | チャットUI、Markdownプレビュー |
スタイリング | Tailwind CSS 4 | レスポンシブ、ダークモード |
オーケストレーター | Next.js Route Handlers | AI + MCP連携 |
AIブレイン | DeepSeek V4 Pro | ツール呼び出し、推論 |
MCPサーバー | Express + MCP SDK | ツール実行、セキュリティ |
データベース | PostgreSQL 16 (Docker) | データ保存 |
プロジェクト構造
mcp-postgres-demo/
├── docker/
│ ├── docker-compose.yml # PostgreSQL setup
│ └── init.sql # Database seeding (115 products)
├── mcp-server/
│ ├── src/
│ │ ├── index.ts # Server entry + HTTP endpoints
│ │ ├── db.ts # Connection pooling
│ │ └── tools/
│ │ ├── schema-tools.ts # list_tables, get_table_schema
│ │ ├── query-tools.ts # query_inventory, get_top_sales
│ │ └── execute-tool.ts # execute_read_query (security guard)
│ ├── package.json
│ └── tsconfig.json
├── web/
│ ├── src/
│ │ ├── app/
│ │ │ ├── api/chat/route.ts # AI orchestration endpoint
│ │ │ ├── page.tsx # Chat UI
│ │ │ └── layout.tsx # Root layout
│ │ └── lib/
│ │ ├── ai-client.ts # DeepSeek client
│ │ └── tool-registry.ts # Tool definitions
│ ├── package.json
│ └── .env.example
├── .env.example
├── package.json
└── README.md🛠️ MCPツール
1. list_tables
データベース内のテーブルを一覧表示
入力: なし
出力: テーブル名の配列
2. get_table_schema
テーブルの詳細な構造を表示
入力:
{ "tableName": "products" }出力: カラム、データ型、制約
3. query_inventory ⭐
製品の在庫を確認
入力:
{ "productId": "SP001" }出力:
{
"id": "SP001",
"name": "Váy hoa nhí",
"stock_quantity": 150,
"stock_status": "Còn hàng",
"price_formatted": "299.000₫"
}4. get_top_sales ⭐
売れ筋製品トップ
入力:
{ "limit": 5, "days": 30 }出力: 売上指標付きランキングリスト
5. execute_read_query 🛡️
セキュリティガード付きの汎用SELECTクエリ
入力:
{ "sql": "SELECT * FROM products WHERE price > 500000" }セキュリティ機能:
✅ SELECT/WITHのみ許可
❌ ブロック: DROP、DELETE、UPDATE、INSERTなど
✅ 結果制限: 最大100行
✅ SQLインジェクション防止
🎬 動画スクリプトガイド
シーン1: 問題提起(30秒)
映像: AIが危険なSQLを生成する様子を表示
-- AI hallucination example
DROP TABLE users;
DELETE FROM orders WHERE 1=1;ナレーション:
「多くの開発者から質問があります: AIを統合するとき、どうやってデータベースを壊させないようにするのか? 今日は本番環境対応のソリューションを共有します!」
シーン2: アーキテクチャ概要(45秒)
映像: アーキテクチャ図を表示
User → DeepSeek V4 Pro → MCP Server → PostgreSQLナレーション:
「AIにSQLを直接書かせる代わりに、MCPパターンを使います。 AIはどのツールを呼ぶかを推論するだけで、開発者がコード内のSQLを制御します。」
シーン3: コードデモ - 成功ケース(60秒)
映像: チャットUIデモ
User: "Check tồn kho SP001"
AI: 🤔 User wants inventory → Call query_inventory tool
MCP: ✅ Execute SELECT query
DB: Returns { stock: 150 }
AI: "Sản phẩm SP001 còn 150 chiếc trong kho"ナレーション:
「ユーザーが自然に質問し、AIが分析して正しいツールを呼び出し、 MCPが安全にクエリを実行し、わかりやすい結果を返します!」
シーン4: セキュリティデモ(45秒)
映像: 危険なコマンドがブロックされる様子
User: "Xóa tất cả users"
AI: 🤔 User wants to delete → Wait...
MCP: 🚫 BLOCKED! DELETE not allowed
Response: "Tool này chỉ hỗ trợ đọc dữ liệu"ナレーション:
「ユーザーが意図的にデータベースを壊そうとしたとき、MCPサーバーが即座にブロックします! これがAIがバイパスできない最終防衛ラインです。」
シーン5: コード解説(60秒)
表示する主要コードスニペット:
ツール定義 (mcp-server/src/tools/query-tools.ts)
export const queryInventoryTool = {
name: 'query_inventory',
execute: async ({ productId }) => {
// Dev controls SQL 100%
const result = await pool.query(
'SELECT * FROM products WHERE id = $1',
[productId]
);
return result;
}
};セキュリティガード (mcp-server/src/tools/execute-tool.ts)
const FORBIDDEN_KEYWORDS = ['DROP', 'DELETE', 'UPDATE'];
if (sql.includes(FORBIDDEN_KEYWORDS)) {
return { isError: true, text: '🚫 BLOCKED!' };
}AIツール呼び出し (web/src/app/api/chat/route.ts)
const response = await deepseekClient.chat.completions.create({
model: 'deepseek-v4-pro',
tools: toolsToOpenAIFormat(),
tool_choice: 'auto'
});シーン6: コスト比較(30秒)
モデル | コスト/100万トークン | ツール呼び出し |
GPT-4o | ~$15 | ✅ |
Claude 3.5 | ~$15 | ✅ |
DeepSeek V4 Pro | ~$0.5 | ✅ |
ナレーション:
「DeepSeek V4 Proはツール呼び出しに対応し、価格はGPT-4oの1/30です。 スタートアップやバイブコーダーに最適です!」
🔒 セキュリティのベストプラクティス
1. 読み取り専用の強制
const FORBIDDEN_KEYWORDS = [
'DROP', 'DELETE', 'UPDATE', 'INSERT', 'TRUNCATE',
'ALTER', 'CREATE', 'GRANT', 'REVOKE'
];2. パラメータ検証(Zod)
inputSchema: z.object({
productId: z.string().describe('Mã sản phẩm')
})3. コネクションプーリング
const pool = new Pool({
connectionString: process.env.DATABASE_URL,
max: 20, // Prevent connection exhaustion
});4. SQLインジェクション防止
// ✅ Parameterized queries
await pool.query('SELECT * FROM products WHERE id = $1', [productId]);
// ❌ Never string concatenation
// await pool.query(`SELECT * FROM products WHERE id = '${productId}'`);📊 デモデータ
カテゴリー
ファッション: 30製品(SP001-SP030)
エレクトロニクス: 25製品(SP031-SP055)
ホーム&リビング: 25製品(SP056-SP080)
ビューティー: 20製品(SP081-SP100)
スポーツ: 15製品(SP101-SP115)
サンプルクエリ
"Check tồn kho SP001" → 150 items
"Top 5 bán chạy tuần này" → Sales ranking
"Có những bảng nào?" → Table discovery
"Xem cấu trúc bảng products" → Schema details🔧 トラブルシューティング
データベース接続エラー
# Check if PostgreSQL is running
docker ps | grep postgres
# View logs
pnpm docker:logs
# Restart
pnpm docker:down && pnpm docker:upMCPサーバーが起動しない
# Check environment variables
cat mcp-server/.env
# Test database connection
cd mcp-server && pnpm tsx src/db.tsAI APIキーの問題
# Verify API key
echo $DEEPSEEK_API_KEY
# Test API
curl https://api.deepseek.com/v1/chat/completions \
-H "Authorization: Bearer $DEEPSEEK_API_KEY" \
-d '{"model":"deepseek-v4-pro","messages":[{"role":"user","content":"Hi"}]}'📚 リソース
🎓 重要なポイント
AIにSQLを書かせない - 開発者がデータアクセスを制御
MCPパターン - 標準化されたツール呼び出し
セキュリティ最優先 - 多層防御
コスト効率 - DeepSeek V4 Pro ~$0.5/100万トークン
本番環境対応 - コネクションプーリング、検証、エラーハンドリング
📝 ライセンス
MITライセンス - 学習、動画、本番環境で自由に使用できます!
ベトナム開発者コミュニティのために❤️を込めて作成
フォローとシェアで、高品質なコンテンツの制作を応援してください!🚀
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceProvides secure, read-only PostgreSQL database access via MCP tools like query_inventory and get_top_sales. Blocks dangerous SQL commands while allowing AI to execute controlled SELECT queries.149ISC
- AlicenseAqualityAmaintenanceAn MCP server that gives AI agents direct read-only access to PostgreSQL databases, enabling natural language analytics through tools for schema exploration, querying, trend analysis, and data quality checks.115MIT
- AlicenseNot gradedqualityCmaintenanceRead-only PostgreSQL MCP server that enables running SELECT queries, listing tables and schemas, and describing columns, with built-in protection against writes and malicious SQL attacks.539MIT
- AlicenseAqualityBmaintenanceMCP server for PostgreSQL that enables safe read-only database queries, table schema inspection, and query execution planning.634BSD 3-Clause
Related MCP Connectors
MCP server for managing Prisma Postgres.
GibsonAI MCP server: manage your databases with natural language
Analytical memory for AI agents: a real Postgres queried in plain English over MCP. One command.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/longliaprono1-blip/chatbot-ai-mcp-demo'
If you have feedback or need assistance with the MCP directory API, please join our Discord server