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