Skip to content

Commit 85efc2d

Browse files
committed
Updated chat example readme
1 parent 448e633 commit 85efc2d

File tree

1 file changed

+23
-17
lines changed

1 file changed

+23
-17
lines changed

examples/chat-ui/README.md

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1-
# AI chat template
1+
# AI Chat with MCP
22

3-
An unofficial template for ⚛️ React ⨉ ⚡️ Vite ⨉ ⛅️ Cloudflare Workers AI.
3+
A React-based AI chat application demonstrating [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) integration with multiple AI providers.
44

5-
Full-stack AI chat application using Workers for the APIs (using the Cloudflare [vite-plugin](https://www.npmjs.com/package/@cloudflare/vite-plugin)) and Vite for the React application (hosted using [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/)). Provides chat functionality with [Workers AI](https://developers.cloudflare.com/workers-ai/), stores conversations in the browser's [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and uses [ai-sdk](https://sdk.vercel.ai/docs/introduction), [tailwindcss](https://tailwindcss.com/) and [workers-ai-provider](https://github.com/cloudflare/workers-ai-provider).
5+
This static web application showcases how to use the [`use-mcp`](../../) library to connect to MCP servers, providing extensible AI capabilities through external tools and services. The app supports multiple AI models, stores conversations locally in IndexedDB, and includes OAuth authentication for MCP server connections.
66

7-
## Get started
7+
**Live demo**: [chat.use-mcp.dev](https://chat.use-mcp.dev)
88

9-
Create the project using [create-cloudflare](https://www.npmjs.com/package/create-cloudflare):
9+
## Features
1010

11-
```sh
12-
npm create cloudflare@latest -- --template thomasgauvin/ai-chat-template
13-
```
11+
- **MCP Integration**: Connect to MCP servers with OAuth authentication support
12+
- **Multi-model Support**: Anthropic (Claude) and Groq (Llama) models with API key authentication
13+
- **Local Storage**: Conversations stored in browser's IndexedDB
14+
- **Static Deployment**: Builds to static assets for deployment anywhere
15+
- **Modern Stack**: React 19, TypeScript, Tailwind CSS, Vite
1416

15-
Run the project and deploy it:
17+
## Get started
1618

1719
```sh
18-
cd <project-name>
19-
npm install
20-
npm run dev
20+
pnpm install
21+
pnpm dev
2122
```
2223

23-
```
24-
npm run deploy
24+
Build and deploy:
25+
26+
```sh
27+
pnpm build
28+
pnpm run deploy # deploys to Cloudflare Pages
2529
```
2630

27-
## What's next?
31+
## Development
2832

29-
- Change the name of the package (in `package.json`)
30-
- Change the name of the worker (in `wrangler.jsonc`)
33+
- **Dev server**: `pnpm dev` (runs on port 5002)
34+
- **Build**: `pnpm build`
35+
- **Lint**: `pnpm lint`
36+
- **Test**: `pnpm test` (Playwright E2E tests)

0 commit comments

Comments
 (0)