Live Demo: workersai.zwz.workers.dev
This is a demo project showcasing a full-stack chat application built entirely on the Cloudflare stack, featuring AI capabilities.
- AI-Powered Chat: Engage in conversations powered by Cloudflare AI text generation models.
- Real-time Communication: Uses WebSockets via Cloudflare Durable Objects for instant message delivery.
- Text-to-Speech (TTS): Hear AI responses spoken aloud using Cloudflare AI TTS.
- Speech-to-Text (STT): Dictate your messages using Cloudflare AI STT (Whisper).
- Conversation Management: Create, rename, pin, and delete conversations.
- Model Selection: View available Cloudflare AI text generation models.
- Anonymous Sessions: Simple authentication using tokens stored in Cloudflare KV.
- Modern Tech Stack:
- Backend: Cloudflare Workers, Durable Objects, KV, AI Gateway, TypeScript, ConnectRPC, Drizzle ORM (potentially for future database integration).
- Frontend: React, TypeScript, Vite, TailwindCSS, React Router.
- API: Protocol Buffers (protobuf) for type-safe communication.
.
├── backend/ # Cloudflare Worker backend code (TypeScript)
├── frontend/ # React frontend application (TypeScript, Vite)
├── proto/ # Protocol Buffer definitions for the API
├── buf.gen.yaml # Buf code generation configuration
├── buf.yaml # Buf linting and breaking change detection configuration
├── deploy.sh # Deployment script (likely for Cloudflare Workers)
└── README.md # This file
(Instructions need to be added here based on how to set up environment variables, install dependencies for both frontend and backend, and run the development servers.)
- Node.js and pnpm
- Cloudflare Account
- Wrangler CLI
- Buf CLI (optional, for protobuf generation)
- Clone the repository:
git clone https://github.com/akazwz/workersai.git cd workersai - Install Dependencies:
# From the root directory pnpm install # Navigate to backend and frontend to ensure all deps are installed if needed cd backend && pnpm install cd ../frontend && pnpm install cd ..
- Configure Backend Environment Variables:
- Navigate to the
backenddirectory. - Copy the provided example environment file:
cp .dev.vars.example .dev.vars - Edit
.dev.varsand fill in your Cloudflare credentials and bindings (refer towrangler.jsoncfor required variables). - Return to the project root directory:
cd ..
- Navigate to the
- Configure Frontend Environment Variables:
- The
frontenddirectory now includes a.envfile with default/example settings. - For local development, it is recommended to copy this file to
.env.localwithin thefrontenddirectory:cp frontend/.env frontend/.env.local
- Then, customize
frontend/.env.localwith your specific settings (e.g.,VITE_API_URLif it needs to differ from the default). The.env.localfile will overridefrontend/.envand is typically gitignored. - If you don't create a
.env.local, ensure the values infrontend/.envare suitable for your local setup.
- The
- Build Frontend Assets:
cd frontend pnpm run build cd ..
- Configure Cloudflare Resources:
- Set up necessary Cloudflare resources (KV namespace, Durable Object binding, AI Gateway). This step might involve using the Cloudflare dashboard or Wrangler commands. Ensure the bindings in
backend/wrangler.jsoncand.dev.varsmatch these resources.
- Set up necessary Cloudflare resources (KV namespace, Durable Object binding, AI Gateway). This step might involve using the Cloudflare dashboard or Wrangler commands. Ensure the bindings in
- Generate Protobuf Code (if needed):
buf generate
Important: Before starting the backend worker, ensure you have:
- Configured your
backend/.dev.varsfile (as per Setup step 3). - Configured your frontend environment by checking/copying
frontend/.envtofrontend/.env.localand customizing it if needed (as per Setup step 4). - Built the frontend assets (as per Setup step 5):
# Ensure you are in the project root directory cd frontend pnpm run build cd ..
These steps are crucial for the application to run correctly.
- Start the backend worker (using Wrangler):
cd backend pnpm run dev - Start the frontend development server (optional, if you want to make frontend changes and see them live):
cd frontend pnpm run dev
The application should now be accessible (usually at http://localhost:8787 for the backend worker, which serves the frontend assets. If you run the frontend dev server, it's often at http://localhost:5173).
(Instructions need to be added here, likely involving running the deploy.sh script or using wrangler deploy.)
# Example deployment command (adapt as needed)
./deploy.sh
# or
# cd backend && wrangler deployContributions are welcome! Please feel free to submit issues or pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.