> For the complete documentation index, see [llms.txt](https://docs.clickai.vn/clickai-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.clickai.vn/clickai-docs/nha-phat-trien/trien-khai-ung-dung.md).

# Triển khai ứng dụng

<figure><img src="/files/JuYvZ3yVxOPMJXQwsCWU" alt=""><figcaption></figcaption></figure>

## &#x20;lục

·       \[Tổng quan]\(#tổng-quan)

·       \[Các phương thức triển khai]\(#các-phương-thức-triển-khai)

·       \[Hướng dẫn tích hợp API]\(#hướng-dẫn-tích-hợp-api)

·       \[Quản lý conversation\_id]\(#quản-lý-conversation\_id)

·       \[Best Practices]\(#best-practices)

&#x20;

## Tổng quan

Sau khi build xong ứng dụng AI trên ClickAI Studio, bạn có nhiều cách để triển khai. Quy trình đơn giản:

1\.     ✅ Build xong ứng dụng

2\.     🔘 Nhấn Publish

3\.     📋 Chọn phương thức triển khai

4\.     🔗 Copy URL / API Key

5\.     🌐 Chia sẻ ngay

&#x20;

## Các phương thức triển khai

### 1. Web App

Triển khai dưới dạng trang web độc lập, chia sẻ ngay lập tức.

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Thuộc tính</td><td valign="top">Chi tiết</td></tr><tr><td valign="top">Tốc độ</td><td valign="top">⚡ Ngay lập tức</td></tr><tr><td valign="top">Yêu cầu</td><td valign="top">Không cần coding</td></tr><tr><td valign="top">URL</td><td valign="top">https://app.clickai.vn/chat/&#x3C;app-id></td></tr></tbody></table>

&#x20;

ClickAI hỗ trợ 2 loại Web App:

·       Chatbot / Agent Web App: Giao diện chat real-time, multi-turn conversation

·       Workflow Web App: Form nhập liệu cho batch processing, quản lý kết quả

Cách triển khai:

6\.     Mở ứng dụng trong ClickAI Studio

7\.     Nhấn nút "Publish" ở góc trên phải

8\.     Chọn tab "Web App"

9\.     Copy URL và chia sẻ cho người dùng

### 2. API Integration

Tích hợp AI vào bất kỳ ứng dụng nào qua RESTful API.

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Thuộc tính</td><td valign="top">Chi tiết</td></tr><tr><td valign="top">Base URL</td><td valign="top">https://api.clickai.vn/v1</td></tr><tr><td valign="top">Xác thực</td><td valign="top">Bearer Token (API Key)</td></tr><tr><td valign="top">Response</td><td valign="top">JSON / Server-Sent Events (streaming)</td></tr></tbody></table>

&#x20;

⚠️ IMPORTANT: API Key (Secret Key) không bao giờ được expose ở client-side. Luôn gọi API từ backend server.

### 3. Embed vào Website

Nhúng trực tiếp ứng dụng AI vào website hiện có:

iFrame:

\<iframe\
&#x20; src="<https://app.clickai.vn/chatbot/\\><app-id>?embed=true"\
&#x20; style="width: 100%; height: 600px; border: none;"\
&#x20; allow="microphone">\
\</iframe>

Chat Bubble Script:

\<script>\
&#x20; window\.clickaiChatbotConfig = {\
&#x20;   token: 'YOUR\_APP\_TOKEN',\
&#x20;   baseUrl: '<https://api.clickai.vn'\\>
&#x20; }\
\</script>\
\<script src="<https://app.clickai.vn/embed.min.js>" defer>\</script>

### 4. MCP Server

Triển khai dưới dạng Model Context Protocol Server — cho phép AI client khác (Claude Desktop, VS Code Copilot) gọi đến ứng dụng.

&#x20;

## Hướng dẫn tích hợp API

### Xác thực

Authorization: Bearer {YOUR\_SECRET\_KEY}

### Text Generation App

curl -X POST '<https://api.clickai.vn/v1/completion-messages>' \\\
&#x20; -H 'Authorization: Bearer YOUR-SECRET-KEY' \\\
&#x20; -H 'Content-Type: application/json' \\\
&#x20; -d '{\
&#x20;   "inputs": {"text": "Viết email cảm ơn khách hàng"},\
&#x20;   "response\_mode": "streaming",\
&#x20;   "user": "user-123"\
&#x20; }'

import requests, json\
\
url = "<https://api.clickai.vn/v1/completion-messages"\\>
headers = {\
&#x20;   'Authorization': 'Bearer YOUR-SECRET-KEY',\
&#x20;   'Content-Type': 'application/json',\
}\
data = {\
&#x20;   "inputs": {"text": "Viết email cảm ơn khách hàng"},\
&#x20;   "response\_mode": "streaming",\
&#x20;   "user": "user-123"\
}\
response = requests.post(url, headers=headers, data=json.dumps(data))\
print(response.text)

### Conversational App (Chatbot / Agent)

curl -X POST '<https://api.clickai.vn/v1/chat-messages>' \\\
&#x20; -H 'Authorization: Bearer YOUR-SECRET-KEY' \\\
&#x20; -H 'Content-Type: application/json' \\\
&#x20; -d '{\
&#x20;   "inputs": {},\
&#x20;   "query": "Xin chào, tôi cần hỗ trợ",\
&#x20;   "response\_mode": "streaming",\
&#x20;   "conversation\_id": "",\
&#x20;   "user": "user-123"\
&#x20; }'

### Workflow App

curl -X POST '<https://api.clickai.vn/v1/workflows/run>' \\\
&#x20; -H 'Authorization: Bearer YOUR-SECRET-KEY' \\\
&#x20; -H 'Content-Type: application/json' \\\
&#x20; -d '{\
&#x20;   "inputs": {"input\_text": "Dữ liệu cần xử lý"},\
&#x20;   "response\_mode": "streaming",\
&#x20;   "user": "user-123"\
&#x20; }'

&#x20;

## Quản lý conversation\_id

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Tình huống</td><td valign="top">Cách xử lý</td></tr><tr><td valign="top">Cuộc hội thoại mới</td><td valign="top">Để trống conversation_id → Hệ thống tạo ID mới</td></tr><tr><td valign="top">Tiếp tục hội thoại</td><td valign="top">Gửi kèm conversation_id đã nhận</td></tr><tr><td valign="top">Thay đổi biến giữa phiên</td><td valign="top">Dùng Conversation Variables</td></tr></tbody></table>

&#x20;

🚨 WARNING: Khi truyền \`conversation\_id\` hiện có, giá trị \`inputs\` sẽ bị bỏ qua. Chỉ \`query\` được xử lý.

&#x20;

## Best Practices

### Trước khi Publish

·       ☐ Mô tả ứng dụng rõ ràng

·       ☐ Icon & Branding chuyên nghiệp

·       ☐ Thiết lập Access Controls

·       ☐ Cấu hình Rate Limits cho API

### Chọn phương thức phù hợp

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Mục tiêu</td><td valign="top">Phương thức</td></tr><tr><td valign="top">Feedback nhanh từ người dùng</td><td valign="top">Web App</td></tr><tr><td valign="top">Xây dựng sản phẩm riêng</td><td valign="top">API</td></tr><tr><td valign="top">Website sẵn muốn thêm AI</td><td valign="top">Embed</td></tr><tr><td valign="top">Mở rộng AI tools</td><td valign="top">MCP Server</td></tr></tbody></table>

&#x20;

&#x20;

*📖 Trước: \[Build]\(./01-build.md) · Tiếp: \[Monitor]\(./03-monitor.md)*