> 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)*


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.clickai.vn/clickai-docs/nha-phat-trien/trien-khai-ung-dung.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.