Content
# 🎬 AI Chatbot Demo: MCP + PostgreSQL + DeepSeek V4 Pro
> **"Don't let AI write SQL. Let AI call your secure API."**
Demo chuyên nghiệp tích hợp AI an toàn sử dụng MCP (Model Context Protocol) với Next.js 15, PostgreSQL và DeepSeek V4 Pro - Perfect cho vlog content.
## 🎯 Vấn đề giải quyết
Khi tích hợp AI vào sản phẩm, nhiều dev gặp phải:
- ❌ **Security risks**: AI tạo SQL sai hoặc nguy hiểm (`DROP TABLE`, `DELETE`)
- ❌ **Hallucination**: AI "ảo giác" tạo query sai data
- ❌ **Prompt injection**: User truyền lệnh gây hại
- ❌ **No control**: Không kiểm soát được AI tạo gì
## ✅ Giải pháp: MCP Pattern
```
User Prompt → AI (DeepSeek V4 Pro) → MCP Tools → PostgreSQL
↑ ↓
└─────── JSON Response ←─────────────┘
```
**Nguyên tắc:**
- 🧠 **AI**: Chỉ suy luận, quyết định gọi tool nào
- 🛡️ **MCP Server**: Security guards, chặn lệnh nguy hiểm
- 💻 **Dev**: Kiểm soát 100% SQL trong tools
- 📊 **PostgreSQL**: Trả về data an toàn
---
## 🚀 Quick Start
### 1. Cài đặt dependencies
```bash
pnpm install
```
### 2. Cấu hình environment
```bash
# 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_keys
```
### 3. Khởi động PostgreSQL
```bash
pnpm docker:up
```
Database sẽ được tự động seed với:
- 115 sản phẩm (5 categories)
- Inventory data
- Sales records (30 ngày)
- Orders data
### 4. Chạy development servers
```bash
# Terminal 1: MCP Server
pnpm dev:mcp
# Terminal 2: Next.js Web App
pnpm dev:web
# Or run both concurrently
pnpm dev
```
### 5. Mở browser
Truy cập: **http://localhost:3000**
---
## 🏗️ Architecture
### Tech Stack
| Layer | Technology | Purpose |
|-------|-----------|---------|
| **Presentation** | Next.js 15 + React 19 | Chat UI, Markdown preview |
| **Styling** | Tailwind CSS 4 | Responsive, dark mode |
| **Orchestrator** | Next.js Route Handlers | AI + MCP coordination |
| **AI Brain** | DeepSeek V4 Pro | Tool calling, reasoning |
| **MCP Server** | Express + MCP SDK | Tool execution, security |
| **Database** | PostgreSQL 16 (Docker) | Data storage |
### Project Structure
```
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 Tools
### 1. `list_tables`
Liệt kê các bảng trong database
**Input:** None
**Output:** Array of table names
### 2. `get_table_schema`
Xem cấu trúc chi tiết của bảng
**Input:**
```json
{ "tableName": "products" }
```
**Output:** Columns, data types, constraints
### 3. `query_inventory` ⭐
Kiểm tra tồn kho sản phẩm
**Input:**
```json
{ "productId": "SP001" }
```
**Output:**
```json
{
"id": "SP001",
"name": "Váy hoa nhí",
"stock_quantity": 150,
"stock_status": "Còn hàng",
"price_formatted": "299.000₫"
}
```
### 4. `get_top_sales` ⭐
Top sản phẩm bán chạy
**Input:**
```json
{ "limit": 5, "days": 30 }
```
**Output:** Ranked list with sales metrics
### 5. `execute_read_query` 🛡️
Generic SELECT query với security guards
**Input:**
```json
{ "sql": "SELECT * FROM products WHERE price > 500000" }
```
**Security Features:**
- ✅ Only SELECT/WITH allowed
- ❌ Blocks: DROP, DELETE, UPDATE, INSERT, etc.
- ✅ Result limit: 100 rows max
- ✅ SQL injection prevention
---
## 🎬 Vlog Script Guide
### Scene 1: Problem Statement (30s)
**Visual:** Show AI generating dangerous SQL
```sql
-- AI hallucination example
DROP TABLE users;
DELETE FROM orders WHERE 1=1;
```
**Narration:**
> "Nhiều bạn dev hỏi: Khi tích hợp AI, làm sao để nó không phá database?
> Hôm nay mình share giải pháp production-ready!"
### Scene 2: Architecture Overview (45s)
**Visual:** Show architecture diagram
```
User → DeepSeek V4 Pro → MCP Server → PostgreSQL
```
**Narration:**
> "Thay vì để AI tự viết SQL, chúng ta dùng MCP Pattern.
> AI chỉ suy luận gọi tool nào, dev kiểm soát SQL trong code."
### Scene 3: Code Demo - Success Case (60s)
**Visual:** Chat UI demo
```
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"
```
**Narration:**
> "User hỏi tự nhiên, AI phân tích, gọi đúng tool,
> MCP thực thi query an toàn, trả kết quả dễ hiểu!"
### Scene 4: Security Demo (45s)
**Visual:** Blocked dangerous command
```
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"
```
**Narration:**
> "Khi user cố tình phá database, MCP server chặn ngay!
> Đây là chốt chặn bảo mật cuối cùng mà AI không thể bypass."
### Scene 5: Code Walkthrough (60s)
**Key code snippets to show:**
1. **Tool Definition** (mcp-server/src/tools/query-tools.ts)
```typescript
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;
}
};
```
2. **Security Guard** (mcp-server/src/tools/execute-tool.ts)
```typescript
const FORBIDDEN_KEYWORDS = ['DROP', 'DELETE', 'UPDATE'];
if (sql.includes(FORBIDDEN_KEYWORDS)) {
return { isError: true, text: '🚫 BLOCKED!' };
}
```
3. **AI Tool Calling** (web/src/app/api/chat/route.ts)
```typescript
const response = await deepseekClient.chat.completions.create({
model: 'deepseek-v4-pro',
tools: toolsToOpenAIFormat(),
tool_choice: 'auto'
});
```
### Scene 6: Cost Comparison (30s)
| Model | Cost/1M tokens | Tool Calling |
|-------|---------------|--------------|
| GPT-4o | ~$15 | ✅ |
| Claude 3.5 | ~$15 | ✅ |
| **DeepSeek V4 Pro** | **~$0.5** | ✅ |
**Narration:**
> "DeepSeek V4 Pro hỗ trợ tool calling, giá chỉ bằng 1/30 GPT-4o.
> Perfect cho startups và vibe coders!"
---
## 🔒 Security Best Practices
### 1. Read-Only Enforcement
```typescript
const FORBIDDEN_KEYWORDS = [
'DROP', 'DELETE', 'UPDATE', 'INSERT', 'TRUNCATE',
'ALTER', 'CREATE', 'GRANT', 'REVOKE'
];
```
### 2. Parameter Validation (Zod)
```typescript
inputSchema: z.object({
productId: z.string().describe('Mã sản phẩm')
})
```
### 3. Connection Pooling
```typescript
const pool = new Pool({
connectionString: process.env.DATABASE_URL,
max: 20, // Prevent connection exhaustion
});
```
### 4. SQL Injection Prevention
```typescript
// ✅ Parameterized queries
await pool.query('SELECT * FROM products WHERE id = $1', [productId]);
// ❌ Never string concatenation
// await pool.query(`SELECT * FROM products WHERE id = '${productId}'`);
```
---
## 📊 Demo Data
### Categories
- **Fashion**: 30 products (SP001-SP030)
- **Electronics**: 25 products (SP031-SP055)
- **Home & Living**: 25 products (SP056-SP080)
- **Beauty**: 20 products (SP081-SP100)
- **Sports**: 15 products (SP101-SP115)
### Sample Queries
```
"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
```
---
## 🔧 Troubleshooting
### Database Connection Failed
```bash
# Check if PostgreSQL is running
docker ps | grep postgres
# View logs
pnpm docker:logs
# Restart
pnpm docker:down && pnpm docker:up
```
### MCP Server Not Starting
```bash
# Check environment variables
cat mcp-server/.env
# Test database connection
cd mcp-server && pnpm tsx src/db.ts
```
### AI API Key Issues
```bash
# 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"}]}'
```
---
## 📚 Resources
- [DeepSeek API Docs](https://api-docs.deepseek.com/)
- [MCP Specification](https://modelcontextprotocol.io/)
- [MCP TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk)
- [Next.js 15 Docs](https://nextjs.org/docs)
- [Tailwind CSS 4](https://tailwindcss.com/)
---
## 🎓 Key Takeaways
1. **Don't let AI write SQL** - Dev controls data access
2. **MCP Pattern** - Standardized tool calling
3. **Security First** - Multiple protection layers
4. **Cost Effective** - DeepSeek V4 Pro ~$0.5/1M tokens
5. **Production Ready** - Connection pooling, validation, error handling
---
## 📝 License
MIT License - Feel free to use for learning, vlogs, or production!
---
**Made with ❤️ for Vietnamese Dev Community**
Follow và share để ủng hộ mình ra thêm nhiều content chất lượng nhé! 🚀
