Skip to content

Commit ba30f35

Browse files
author
cloudflare[bot]
committed
source repo import
0 parents  commit ba30f35

11 files changed

Lines changed: 15630 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
# Created by https://www.toptal.com/developers/gitignore/api/macos,node,git
2+
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,node,git
3+
4+
### Git ###
5+
# Created by git for backups. To disable backups in Git:
6+
# $ git config --global mergetool.keepBackup false
7+
*.orig
8+
9+
# Created by git when using merge tools for conflicts
10+
*.BACKUP.*
11+
*.BASE.*
12+
*.LOCAL.*
13+
*.REMOTE.*
14+
*_BACKUP_*.txt
15+
*_BASE_*.txt
16+
*_LOCAL_*.txt
17+
*_REMOTE_*.txt
18+
19+
### macOS ###
20+
# General
21+
.DS_Store
22+
.AppleDouble
23+
.LSOverride
24+
25+
# Icon must end with two \r
26+
Icon
27+
28+
29+
# Thumbnails
30+
._*
31+
32+
# Files that might appear in the root of a volume
33+
.DocumentRevisions-V100
34+
.fseventsd
35+
.Spotlight-V100
36+
.TemporaryItems
37+
.Trashes
38+
.VolumeIcon.icns
39+
.com.apple.timemachine.donotpresent
40+
41+
# Directories potentially created on remote AFP share
42+
.AppleDB
43+
.AppleDesktop
44+
Network Trash Folder
45+
Temporary Items
46+
.apdisk
47+
48+
### macOS Patch ###
49+
# iCloud generated files
50+
*.icloud
51+
52+
### Node ###
53+
# Logs
54+
logs
55+
*.log
56+
npm-debug.log*
57+
yarn-debug.log*
58+
yarn-error.log*
59+
lerna-debug.log*
60+
.pnpm-debug.log*
61+
62+
# Diagnostic reports (https://nodejs.org/api/report.html)
63+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
64+
65+
# Runtime data
66+
pids
67+
*.pid
68+
*.seed
69+
*.pid.lock
70+
71+
# Directory for instrumented libs generated by jscoverage/JSCover
72+
lib-cov
73+
74+
# Coverage directory used by tools like istanbul
75+
coverage
76+
*.lcov
77+
78+
# nyc test coverage
79+
.nyc_output
80+
81+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
82+
.grunt
83+
84+
# Bower dependency directory (https://bower.io/)
85+
bower_components
86+
87+
# node-waf configuration
88+
.lock-wscript
89+
90+
# Compiled binary addons (https://nodejs.org/api/addons.html)
91+
build/Release
92+
93+
# Dependency directories
94+
node_modules/
95+
jspm_packages/
96+
97+
# Snowpack dependency directory (https://snowpack.dev/)
98+
web_modules/
99+
100+
# TypeScript cache
101+
*.tsbuildinfo
102+
103+
# Optional npm cache directory
104+
.npm
105+
106+
# Optional eslint cache
107+
.eslintcache
108+
109+
# Optional stylelint cache
110+
.stylelintcache
111+
112+
# Microbundle cache
113+
.rpt2_cache/
114+
.rts2_cache_cjs/
115+
.rts2_cache_es/
116+
.rts2_cache_umd/
117+
118+
# Optional REPL history
119+
.node_repl_history
120+
121+
# Output of 'npm pack'
122+
*.tgz
123+
124+
# Yarn Integrity file
125+
.yarn-integrity
126+
127+
# dotenv environment variable files
128+
.env
129+
.env.development.local
130+
.env.test.local
131+
.env.production.local
132+
.env.local
133+
134+
# parcel-bundler cache (https://parceljs.org/)
135+
.cache
136+
.parcel-cache
137+
138+
# Next.js build output
139+
.next
140+
out
141+
142+
# Nuxt.js build / generate output
143+
.nuxt
144+
dist
145+
146+
# Gatsby files
147+
.cache/
148+
# Comment in the public line in if your project uses Gatsby and not Next.js
149+
# https://nextjs.org/blog/next-9-1#public-directory-support
150+
# public
151+
152+
# vuepress build output
153+
.vuepress/dist
154+
155+
# vuepress v2.x temp and cache directory
156+
.temp
157+
158+
# Docusaurus cache and generated files
159+
.docusaurus
160+
161+
# Serverless directories
162+
.serverless/
163+
164+
# FuseBox cache
165+
.fusebox/
166+
167+
# DynamoDB Local files
168+
.dynamodb/
169+
170+
# TernJS port file
171+
.tern-port
172+
173+
# Stores VSCode versions used for testing VSCode extensions
174+
.vscode-test
175+
176+
# yarn v2
177+
.yarn/cache
178+
.yarn/unplugged
179+
.yarn/build-state.yml
180+
.yarn/install-state.gz
181+
.pnp.*
182+
183+
### Node Patch ###
184+
# Serverless Webpack directories
185+
.webpack/
186+
187+
# Optional stylelint cache
188+
189+
# SvelteKit build / generate output
190+
.svelte-kit
191+
192+
# End of https://www.toptal.com/developers/gitignore/api/macos,node,git
193+
194+
### Wrangler ###
195+
.wrangler/
196+
.env*
197+
!.env.example
198+
.dev.vars*
199+
!.dev.vars.example

‎README.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# LLM Chat Application Template
2+
3+
A simple, ready-to-deploy chat application template powered by Cloudflare Workers AI. This template provides a clean starting point for building AI chat applications with streaming responses.
4+
5+
[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/templates/tree/main/llm-chat-app-template)
6+
7+
<!-- dash-content-start -->
8+
9+
## Demo
10+
11+
This template demonstrates how to build an AI-powered chat interface using Cloudflare Workers AI with streaming responses. It features:
12+
13+
- Real-time streaming of AI responses using Server-Sent Events (SSE)
14+
- Easy customization of models and system prompts
15+
- Support for AI Gateway integration
16+
- Clean, responsive UI that works on mobile and desktop
17+
18+
## Features
19+
20+
- 💬 Simple and responsive chat interface
21+
- ⚡ Server-Sent Events (SSE) for streaming responses
22+
- 🧠 Powered by Cloudflare Workers AI LLMs
23+
- 🛠️ Built with TypeScript and Cloudflare Workers
24+
- 📱 Mobile-friendly design
25+
- 🔄 Maintains chat history on the client
26+
- 🔎 Built-in Observability logging
27+
<!-- dash-content-end -->
28+
29+
## Getting Started
30+
31+
### Prerequisites
32+
33+
- [Node.js](https://nodejs.org/) (v18 or newer)
34+
- [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/install-and-update/)
35+
- A Cloudflare account with Workers AI access
36+
37+
### Installation
38+
39+
1. Clone this repository:
40+
41+
```bash
42+
git clone https://github.com/cloudflare/templates.git
43+
cd templates/llm-chat-app
44+
```
45+
46+
2. Install dependencies:
47+
48+
```bash
49+
npm install
50+
```
51+
52+
3. Generate Worker type definitions:
53+
```bash
54+
npm run cf-typegen
55+
```
56+
57+
### Development
58+
59+
Start a local development server:
60+
61+
```bash
62+
npm run dev
63+
```
64+
65+
This will start a local server at http://localhost:8787.
66+
67+
Note: Using Workers AI accesses your Cloudflare account even during local development, which will incur usage charges.
68+
69+
### Deployment
70+
71+
Deploy to Cloudflare Workers:
72+
73+
```bash
74+
npm run deploy
75+
```
76+
77+
### Monitor
78+
79+
View real-time logs associated with any deployed Worker:
80+
81+
```bash
82+
npm wrangler tail
83+
```
84+
85+
## Project Structure
86+
87+
```
88+
/
89+
├── public/ # Static assets
90+
│ ├── index.html # Chat UI HTML
91+
│ └── chat.js # Chat UI frontend script
92+
├── src/
93+
│ ├── index.ts # Main Worker entry point
94+
│ └── types.ts # TypeScript type definitions
95+
├── test/ # Test files
96+
├── wrangler.jsonc # Cloudflare Worker configuration
97+
├── tsconfig.json # TypeScript configuration
98+
└── README.md # This documentation
99+
```
100+
101+
## How It Works
102+
103+
### Backend
104+
105+
The backend is built with Cloudflare Workers and uses the Workers AI platform to generate responses. The main components are:
106+
107+
1. **API Endpoint** (`/api/chat`): Accepts POST requests with chat messages and streams responses
108+
2. **Streaming**: Uses Server-Sent Events (SSE) for real-time streaming of AI responses
109+
3. **Workers AI Binding**: Connects to Cloudflare's AI service via the Workers AI binding
110+
111+
### Frontend
112+
113+
The frontend is a simple HTML/CSS/JavaScript application that:
114+
115+
1. Presents a chat interface
116+
2. Sends user messages to the API
117+
3. Processes streaming responses in real-time
118+
4. Maintains chat history on the client side
119+
120+
## Customization
121+
122+
### Changing the Model
123+
124+
To use a different AI model, update the `MODEL_ID` constant in `src/index.ts`. You can find available models in the [Cloudflare Workers AI documentation](https://developers.cloudflare.com/workers-ai/models/).
125+
126+
### Using AI Gateway
127+
128+
The template includes commented code for AI Gateway integration, which provides additional capabilities like rate limiting, caching, and analytics.
129+
130+
To enable AI Gateway:
131+
132+
1. [Create an AI Gateway](https://dash.cloudflare.com/?to=/:account/ai/ai-gateway) in your Cloudflare dashboard
133+
2. Uncomment the gateway configuration in `src/index.ts`
134+
3. Replace `YOUR_GATEWAY_ID` with your actual AI Gateway ID
135+
4. Configure other gateway options as needed:
136+
- `skipCache`: Set to `true` to bypass gateway caching
137+
- `cacheTtl`: Set the cache time-to-live in seconds
138+
139+
Learn more about [AI Gateway](https://developers.cloudflare.com/ai-gateway/).
140+
141+
### Modifying the System Prompt
142+
143+
The default system prompt can be changed by updating the `SYSTEM_PROMPT` constant in `src/index.ts`.
144+
145+
### Styling
146+
147+
The UI styling is contained in the `<style>` section of `public/index.html`. You can modify the CSS variables at the top to quickly change the color scheme.
148+
149+
## Resources
150+
151+
- [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/)
152+
- [Cloudflare Workers AI Documentation](https://developers.cloudflare.com/workers-ai/)
153+
- [Workers AI Models](https://developers.cloudflare.com/workers-ai/models/)

0 commit comments

Comments
 (0)