> 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/clickai-docs-en/developer/publish.md).

# Publish

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

## Table of Contents

·       \[Overview]\(#overview)

·       \[Deployment Methods]\(#deployment-methods)

·       \[API Integration Guide]\(#api-integration-guide)

·       \[Managing conversation\_id]\(#managing-conversation\_id)

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

&#x20;

## Overview

After building your AI application in ClickAI Studio, you have multiple ways to deploy it. The process is simple:

1\.     ✅ Finish building your app

2\.     🔘 Click Publish

3\.     📋 Choose deployment method

4\.     🔗 Copy URL / API Key

5\.     🌐 Share immediately

&#x20;

## Deployment Methods

### 1. Web App

Deploy as a standalone web page, ready to share instantly.

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Property</td><td valign="top">Details</td></tr><tr><td valign="top">Speed</td><td valign="top">⚡ Instant</td></tr><tr><td valign="top">Requirements</td><td valign="top">No coding needed</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 supports 2 Web App types:

·       Chatbot / Agent Web App: Real-time chat interface, multi-turn conversation

·       Workflow Web App: Input form for batch processing, result management

How to deploy:

6\.     Open your app in ClickAI Studio

7\.     Click "Publish" button in the top right

8\.     Select "Web App" tab

9\.     Copy URL and share with users

### 2. API Integration

Integrate AI capabilities into any application via RESTful API.

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Property</td><td valign="top">Details</td></tr><tr><td valign="top">Base URL</td><td valign="top">https://api.clickai.vn/v1</td></tr><tr><td valign="top">Authentication</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) must never be exposed on the client-side. Always call the API from a backend server.

### 3. Embed in Website

Embed your AI application directly into an existing website:

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

Deploy as a Model Context Protocol Server — allowing other AI clients (Claude Desktop, VS Code Copilot) to call your application.

&#x20;

## API Integration Guide

### Authentication

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": "Write a thank-you email to a customer"},\
&#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": "Write a thank-you email"},\
&#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": "Hello, I need support",\
&#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": "Data to process"},\
&#x20;   "response\_mode": "streaming",\
&#x20;   "user": "user-123"\
&#x20; }'

&#x20;

## Managing conversation\_id

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Scenario</td><td valign="top">How to Handle</td></tr><tr><td valign="top">New conversation</td><td valign="top">Leave conversation_id empty → System generates a new ID</td></tr><tr><td valign="top">Continue conversation</td><td valign="top">Send the previously received conversation_id</td></tr><tr><td valign="top">Change variables mid-session</td><td valign="top">Use Conversation Variables</td></tr></tbody></table>

&#x20;

🚨 WARNING: When passing an existing \`conversation\_id\`, \`inputs\` values will be ignored. Only \`query\` is processed for the ongoing conversation.

&#x20;

## Best Practices

### Before Publishing

·       ☐ Clear app description

·       ☐ Professional icon & branding

·       ☐ Configure access controls

·       ☐ Set up rate limits for API

### Choose the Right Method

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Goal</td><td valign="top">Recommended Method</td></tr><tr><td valign="top">Quick user feedback</td><td valign="top">Web App</td></tr><tr><td valign="top">Building your own product</td><td valign="top">API</td></tr><tr><td valign="top">Existing website needs AI</td><td valign="top">Embed</td></tr><tr><td valign="top">Extending AI tools</td><td valign="top">MCP Server</td></tr></tbody></table>

&#x20;

&#x20;

*📖 Previous: \[Build]\(./01-build-en.md) · Next: \[Monitor]*


---

# 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/clickai-docs-en/developer/publish.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.