How to Build & Deploy an LLM Chatbot with Cloudflare LLM Chat App Template

Use the official llm-chat-app-template to create a private, blazing-fast AI chatbot in minutes — completely free with Cloudflare's generous limits.

Why Build with Cloudflare?

Serverless & global edge deployment
Access to powerful open models like Llama 3.1, Gemma, Mistral
Streaming responses for real-time chat
No API keys or expensive bills for moderate usage
Easy to embed anywhere

Step-by-Step Guide

Prerequisites

Cloudflare account (free)
Node.js 18+ installed
Wrangler CLI

Create the Project

                            npm create cloudflare@latest -- --template cloudflare/llm-chat-app-template my-ai-chatbot
                        

Or clone the repo directly:

                            git clone https://github.com/cloudflare/templates.git

                            cd templates/llm-chat-app

                            npm install

Install Dependencies & Generate Types

                            cd my-ai-chatbot

                            npm install

                            npm run cf-typegen

Run Locally

npm run dev

Open http://localhost:8787 to test your chatbot locally.

Deploy to Cloudflare

npm run deploy

After deployment, you'll get a URL like https://my-ai-chatbot.yourusername.workers.dev

Customize the Model

Edit wrangler.toml or the worker code to change the model (e.g., @cf/meta/llama-3.1-8b-instruct).

Embed the Chatbot as an iFrame Widget

After deployment, you can embed your chatbot on any website using an iframe.

Example HTML Embed Code:

<iframe 
    src="https://YOUR-CHATBOT.workers.dev" 
    width="400" 
    height="650" 
    style="border: none; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);"
    allow="clipboard-write">
</iframe>
                

Place this code anywhere in your HTML page. Adjust width/height as needed.

Pro Tips

• Use @cf/meta/llama-3.1-8b-instruct for great performance
• Add custom system prompts in the worker code
• Enable streaming for better UX
• Monitor usage in the Cloudflare dashboard

Build & Deploy Your Own LLM Chatbot with Cloudflare Workers AI