“Search smarter, browse faster, and learn seamlessly — powered by local AI.”
Web Navigator AI Agent – Build an AI agent that can take natural language instructions and autonomously drive the web on a local computer.
We selected this challenge because it merges our core expertise in AI, browser automation, and full-stack development. It demonstrates how locally running LLMs can interpret human instructions, automate browser actions, and extract structured insights — all without cloud dependency, ensuring privacy and offline usability.
IntelliBrowse uses a local LLM (Ollama + Mistral) to convert natural-language commands into executable plans, which are carried out by a Playwright-based browser controller. Results are parsed, stored, and returned to a React frontend for visualization and download.
- LLM Planner: Converts user instructions into structured JSON plans.
- Browser Controller: Uses Playwright to automate real web interactions.
- Extractors: Domain-specific scrapers for Amazon, Flipkart, and Web.
- Search Dock UI: Modern, animated interface for query input and results.
- Dual Modes:
- Product Mode → Amazon/Flipkart grid view
- Research Mode → Web article list view
- Download Center: Export results as
.csvor.jsonfiles from database. - Offline Execution: Entire system runs locally (no external API calls).
- Input: User submits a query in plain English.
- Planning: FastAPI invokes the LLM planner to infer intent (
shop,learn,explore,news). - Execution: Browser Controller (Playwright) navigates and extracts relevant information.
- Storage: Parsed results are saved to
data/navigator.db. - Frontend Rendering: React components render grid or list view.
- Download: User can download results in CSV or JSON format via
/download/...endpoints.
| Layer | Tools / Frameworks |
|---|---|
| Backend | Python 3 · FastAPI · Playwright · Pydantic · SQLite |
| Frontend | React + TypeScript · Vite · Tailwind CSS v4 · Framer Motion |
| Database | SQLite (navigator.db) |
| ML / AI Frameworks | Ollama · Mistral LLM |
| APIs / Libraries | Axios · Sonner (Toast UI) · Lucide Icons · AsyncIO · CSV / JSON exporters |
| Component | Description |
|---|---|
| Algorithm(s) Chosen | LLM-based semantic planner generating normalized JSON schema |
| Reason for Choice | Provides flexible understanding of user queries while remaining locally executable |
| Model Training & Testing Approach | Utilizes pretrained Mistral model via Ollama; evaluated on multiple test prompts (“laptops under 50 k”, “AI in healthcare”) to verify correct intent & structured plan generation |
| Stage | Details |
|---|---|
| Data Sources Used | Amazon · Flipkart · Web (DuckDuckGo / real pages) |
| Preprocessing Methods | HTML parsing, price normalization, duplicate removal, text cleaning |
| Storage / Pipeline Setup | Results inserted into navigator.db → retrieved for download or display; exports saved to data/ folder (.csv, .json) |
- Create virtual environment and install dependencies (
FastAPI,Playwright,Ollama). - Configure Tailwind v4 + Vite for React frontend.
- Initialize SQLite DB (
navigator.db).
- Implement
plan_from_instruction()→ LLM planner. - Develop
BrowserController→ page automation handler. - Build extractors:
amazon.py,flipkart.py,web.py.
- Connect frontend search box (
SearchDock) with FastAPI/orchestrateendpoint. - Validate JSON/CSV exports.
- Add Sonner toasts for network errors or success.
- Dockerfile for combined backend + frontend build.
- Local run:
ollama run mistral & uvicorn app.main:app --reload npm run dev
| Metric | Strategy |
|---|---|
| Evaluation Metrics | Response latency < 5 s per query; 95 % parsing accuracy on product pages |
| Testing Strategy | Unit testing of extractor functions; end-to-end runs via sample commands; visual validation through frontend |
- Local Mode: Runs fully offline with Ollama + Playwright.
- Dockerized Mode: Combined container for backend + frontend.
- Optional Cloud Mode: Can be hosted with headless browser instances (e.g., Render / Railway / AWS EC2).
- Modular extractors for adding new websites easily.
- Task queue (Celery + Redis) for parallel searches.
- Persistent caching of search results for faster re-queries.
AI-Web-Navigator/ │ ├── server/ │ ├── app/ │ │ ├── main.py │ │ ├── browser/ │ │ │ └── controller.py │ │ ├── skills/ │ │ │ ├── extractors/ │ │ │ │ ├── amazon.py │ │ │ │ ├── flipkart.py │ │ │ │ └── web.py │ │ ├── llm/ │ │ │ ├── planner.py │ │ │ └── prompts.py │ │ └── services/ │ │ └── aggregator.py │ ├── data/ │ │ └── navigator.db │ ├── runs/ │ └── .venv/ │ └── client/ ├── index.html ├── package.json ├── tailwind.config.ts ├── vite.config.ts └── src/ ├── main.tsx ├── App.tsx ├── index.css ├── lib/ │ └── api.ts ├── components/ │ ├── SearchDock.tsx │ ├── ProductCard.tsx │ ├── ResultsGrid.tsx │ ├── ResultsList.tsx │ ├── ThemeToggle.tsx │ └── LoadingDots.tsx └── types/ ├── product.ts ├── research.ts └── api.ts Developed by Team CIVICAURA | SKCET | HackXlerate 2025