A production-ready AI-powered navigation assistant built on Cloudflare's edge platform. Wayfinder transforms website navigation using natural language queries and voice input, powered by Llama 3.3 and Cloudflare's AI infrastructure.
https://github.com/user-attachments/assets/Demo.mp4
Watch Wayfinder in action: indexing a website, asking questions via chat and voice, and getting instant AI-powered answers with source citations.
- Conversational AI - Ask questions in natural language using Llama 3.3 70B
- Voice Input - Speak your queries using Web Speech API
- Semantic Search - Vector embeddings via Cloudflare Vectorize
- Session Memory - Contextual conversations with Durable Objects
- Auto-Indexing - Scheduled crawling and re-indexing with Workflows
- Edge-Native - Sub-second response times on Cloudflare's global network
- Modern UI - React interface with TailwindCSS
┌─────────────────────────────────────────────────────────────┐
│ Frontend (Pages) │
│ React + TailwindCSS + Voice Input │
└────────────────────┬────────────────────────────────────────┘
│ HTTPS/WS
┌────────────────────▼────────────────────────────────────────┐
│ Cloudflare Workers │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ LLM Agent │ │ Durable │ │ Vectorize │ │
│ │ Llama 3.3 │ │ Objects │ │ (Semantic) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Workflows (Crawl & Index) │ │
│ └──────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
| Component | Purpose | Implementation |
|---|---|---|
| Workers AI | LLM inference with Llama 3.3 | @cf/meta/llama-3.3-70b-instruct-fp8-fast |
| Durable Objects | Session state & conversation history | SessionDO class |
| Vectorize | Semantic search over page embeddings | BGE embeddings + cosine similarity |
| Workflows | Scheduled crawling & indexing | CrawlWorkflow |
| Pages | Frontend hosting | React SPA |
| Requirement | Implementation | Status |
|---|---|---|
| LLM | Llama 3.3 70B via Workers AI | ✅ |
| Workflow/Coordination | Workflows for crawling, Durable Objects for state | ✅ |
| User Input | Chat + Voice (Web Speech API) | ✅ |
| Memory/State | Durable Objects for session & conversation history | ✅ |
- Visit https://ed1ddb6f.cf-ai-wayfinder.pages.dev/
- Enter any website URL (e.g.,
tazeemm.com,example.com) - Wait ~30 seconds for indexing
- Ask questions via text or voice!
- Node.js 18+
- Wrangler CLI
- Cloudflare account with Workers paid plan (for AI, Vectorize, Workflows)
- Clone and install dependencies:
cd /xx/xx/cf_ai_wayfinder
npm run setup- Create Vectorize index:
wrangler vectorize create wayfinder --dimensions=768 --metric=cosine- Configure wrangler.toml:
Update wrangler.toml with your account details if needed.
- Run locally:
# Terminal 1: Start Worker
npm run dev
# Terminal 2: Start Frontend
npm run dev:frontend- Index your first website:
curl -X POST http://localhost:8787/api/crawl \
-H "Content-Type: application/json" \
-d '{
"baseUrl": "https://example.com",
"maxPages": 20
}'- Open the app:
Visit http://localhost:5173 and start chatting!
Note: For local development with Vectorize, you must use:
npx wrangler dev --experimental-vectorize-bind-to-prod# Deploy Worker
npm run deploy
# Deploy Frontend (Pages)
cd frontend
npm run build
wrangler pages deploy dist --project-name=cf-ai-wayfinderFor production, ensure these bindings are configured in your Cloudflare dashboard:
- AI binding - Enabled by default on Workers paid plan
- Vectorize index - Created via
wrangler vectorize create - Durable Objects - Automatically configured via
wrangler.toml - Workflows - Available on Workers paid plan
- Enter a website URL on the home screen
- Wait for the crawling and indexing to complete (~30 seconds)
- Type or speak your question in the chat interface
- Get instant answers with source citations from the indexed website
- Click "Analyze New Site" to index a different website
- "Where's the pricing page?"
- "Find contact information"
- "Summarize the about page"
- "Show me documentation"
- "What are the main features?"
Click the microphone icon and speak your query. Requires browser support for Web Speech API (Chrome, Edge, Safari).
POST /api/query
Content-Type: application/json
{
"query": "Where is the pricing page?",
"sessionId": "session_123"
}Response:
{
"answer": "The pricing page is located under the Pricing section...",
"sources": [
{
"url": "https://example.com/pricing",
"title": "Pricing",
"relevance": 0.95
}
],
"action": {
"type": "navigate",
"target": "/pricing"
}
}POST /api/crawl
Content-Type: application/json
{
"baseUrl": "https://example.com",
"maxPages": 50,
"includePatterns": ["/docs", "/blog"],
"excludePatterns": ["/admin", "/api"]
}# Initialize session
POST /api/session/init
{"sessionId": "session_123"}
# Clear session
POST /api/session/clear
{"sessionId": "session_123"}Customize crawling behavior in your crawl requests:
{
baseUrl: string; // Starting URL
maxPages: number; // Max pages to crawl (default: 50)
includePatterns?: string[]; // URL patterns to include
excludePatterns?: string[]; // URL patterns to exclude
}Modify in worker/src/agent.ts:
await env.AI.run('@cf/meta/llama-3.3-70b-instruct-fp8-fast', {
messages: [...],
temperature: 0.7, // Adjust creativity (0.0-1.0)
max_tokens: 1024 // Max response length
});Configure in worker/src/utils/vectorize.ts:
const results = await env.VECTORIZE.query(embedding, {
topK: 5, // Number of results
returnMetadata: 'all' // Metadata to return
});cf_ai_wayfinder/
├── worker/
│ ├── src/
│ │ ├── index.ts # Main Worker entry
│ │ ├── agent.ts # LLM agent logic
│ │ ├── sessionDO.ts # Durable Object
│ │ ├── types.ts # TypeScript types
│ │ ├── utils/
│ │ │ └── vectorize.ts # Vector operations
│ │ └── workflows/
│ │ └── crawl.ts # Crawl workflow
├── frontend/
│ ├── src/
│ │ ├── App.tsx # Main app component
│ │ ├── components/
│ │ │ ├── ChatWidget.tsx # Chat interface
│ │ │ └── DemoSite.tsx # Demo website
│ │ └── index.css # Tailwind styles
│ ├── package.json
│ └── vite.config.ts
├── wrangler.toml # Cloudflare config
├── package.json
├── README.md
└── PROMPTS.md # AI prompts used
- Start the development server
- Index a test website
- Try various queries:
- Navigation queries
- Content questions
- Voice input
- Session persistence
curl http://localhost:8787/api/health- Documentation Sites - Help users find specific docs
- E-commerce - Guide shoppers to products
- Corporate Sites - Navigate complex site structures
- Knowledge Bases - Search and discover content
- Support Sites - Quick access to help articles
- CORS - Configured for cross-origin requests
- Rate Limiting - Implement via Cloudflare dashboard
- Input Validation - All inputs sanitized
- Session Isolation - Durable Objects provide isolation
- Multi-language support
- Custom branding options
- Analytics dashboard
- A/B testing for prompts
- Integration with external knowledge bases
- Advanced crawl scheduling
- Real-time index updates via webhooks
- Query Latency - < 1.5s average (including LLM inference)
- Crawl Speed - ~5 pages/second
- Embedding Generation - ~100ms per page
- Global Edge - Deployed to 300+ cities worldwide
This project was created as part of the Cloudflare SWE Summer Internship Assignment. Contributions, issues, and feature requests are welcome!
MIT License - see LICENSE file for details
- Built with Cloudflare Workers
- Powered by Llama 3.3
- UI components inspired by modern design systems
- Icons by Lucide
For questions or issues:
- Open an issue on GitHub
- Check Cloudflare Docs
- Review PROMPTS.md for AI implementation details
Built with ❤️ on Cloudflare's Edge Platform