This project is a browser integration system connecting a Chrome Extension frontend with a local Rust backend.
- Backend: Rust (Axum, Tokio, Rig-core)
- Frontend: Chrome Extension (Vanilla JS, HTML, CSS)
- AI Engine: Google Gemini API via Rig-core in Backend
- Directory:
backend/ - Run Dev:
cargo run(Listens on port 3000) - Run Release:
cargo run --release - Build Release:
cargo build --release - Check:
cargo check
- Run All Tests:
cargo test - Run Single Test:
cargo test <test_name> -- --nocapture - Lint:
cargo clippy(Ensure no warnings before committing) - Format (Root):
npm run format:rust(Formats backend from project root) - Format (Local):
cargo fmt(Standard Rust formatting)
-
Edition: Rust 2024
-
Async Runtime: Tokio
-
Web Framework: Axum
-
AI Integration:
rig-corefor building LLM-powered applications and agents. -
Error Handling:
- Use
Resultand the?operator. Avoidunwrap()orexpect()in production paths. - Use
thiserrorfor defining custom error types that map to HTTP responses.
- Use
-
Logging: Use
tracingmacros (info!,warn!,error!). Do not useprintln!. -
State Management: Use
Arc<RwLock<AppState>>orArc<AppState>for shared state. -
Imports: Grouped by (1) standard library, (2) external crates, (3) local modules.
use std::sync::Arc; use axum::{extract::State, Json}; use rig::completion::Prompt; use crate::error::AppError;
-
Serialization: Use
serdewith#[derive(Serialize, Deserialize)]. -
Typing: Use strong typing; avoid
serde_json::Valuewhere a struct can be defined.
agent: Core agent logic, behavioral definitions, and prompt templates. Uses Rig-core client.config: Environment variable loading (dotenvy) and configuration structs for the application.dtos: Data Transfer Objects for standardized API communication between frontend and backend.error: Centralized error types and AxumIntoResponseimplementations for consistent errors.handler: Request handlers for HTTP routes and WebSocket connections. Implements app logic.llm: Logic for interfacing with LLM providers (Google Gemini) and Rig client initialization.models: Core data structures and internal logic models used throughout the backend.routes: API route definitions, path mapping, and middleware layer configuration (CORS, tracing).state: Global application state accessible via Axum extractors, shared across all handlers.tools: Implementations of tools/functions (e.g., search, web navigation) that agents can call.utils: Shared utilities, helpers for data manipulation, and streaming response logic.
sidepanel.js: Main logic for the Chat UI in the browser's side panel.background.js: Extension service worker managing lifecycle and events.content.js: Script injected into pages to extract content and take screenshots.popup.js: UI logic for the extension's popup menu.offscreen.js: Handles DOM parsing and heavy tasks in a separate document.
- Directory: Project Root
- Run All Tests:
npm test(Runs Jest tests intests/extension/) - Run Single Test:
npm test -- -t "test name" - Format Check:
npm run format:check(Prettier check) - Format Fix:
npm run format(Prettier write)
- Standard: Vanilla JavaScript (ES6+), no build step or bundlers.
- Naming:
camelCasefor variables and functions,PascalCasefor classes. - Async: Use
async/awaitover raw Promises for clarity. - Error Handling: Use
try/catchblocks for all async operations and API calls. - DOM: Use
document.querySelectoranddocument.getElementById. - APIs: Prefer
chrome.storage.localfor state overlocalStorage.
- Theming: Support Light/Dark modes using CSS variables (
:rootvs[data-theme="dark"]). - Layout: Use Flexbox or CSS Grid for all layout tasks.
- Scrollbars: Custom styling required for consistent cross-theme appearance.
- No Hallucinations: Never invent API endpoints or library functions. Verify with search.
- Test Integrity: Never delete or bypass tests. Fix the code to make tests pass.
- LSP Usage: Use
lsp_diagnosticsto verify code quality before finishing a task. - Documentation: Update
AGENTS.mdwhen introducing new patterns or modules. - Atomic Commits: Use Conventional Commits (
feat:,fix:,chore:) for atomic changes. - Pre-Commit: Always run
npm run formatandnpm run format:rustbefore committing. - Context Awareness: Be aware of Chrome Extension script scopes (Sidepanel vs Content).
- Directory Verification: Verify parent directories exist using
lsbefore creating new files. - Command Quoting: Quote file paths with spaces (e.g.,
rm "path with spaces/file.txt").
- Always verify if a fix requires changes in both Backend and Frontend.
- If a new feature requires a dependency, add it to
Cargo.tomlorextension/lib/.
- Secrets: Never hardcode API keys. Use
.envfile loaded bydotenvy. - Sanitization: All text sent to AI must be sanitized in
privacy.rs(remove PII).
- For distribution: Copy
extension/,backend.exe(release),README_CEPAT.txt,run_backend.bat. - Package as a ZIP with version prefix (e.g.,
v1.2.0_package.zip).
- "Image state not clearing": Ensure logic handles both text and image message states.
- "Connection failed": Verify backend is on port 3000 and
GEMINI_API_KEYis set. - "Extension not updating": Click the "Refresh" icon in
chrome://extensions. - "CORS Errors": Check Axum
tower_http::corsconfiguration inroutes.rs. - "LSP Failures": If LSP fails, ensure the correct workspace root is opened.
- "Rig Client Error": Ensure the
GEMINI_API_KEYis valid and has sufficient quota. - "404 Not Found": Verify that the route is defined in
routes.rsand matches the path.
- Contextual Prompts: Always include page context (URL, Title, Body) in system prompts.
- Token Management: Be mindful of large screenshots; downscale if possible before sending.
- Streaming: Use Server-Sent Events (SSE) or WebSockets for real-time AI responses.
- Tool Selection: Only provide tools relevant to the current agent's behavior.
- Fallback Logic: Implement fallbacks for API timeouts or rate limits.