# C_GUIDE
**Your AI co-pilot for any web app.** Capture your screen or any browser tab, ask in voice or text, and get a step-by-step guide with a moving phantom cursor that points to the exact button to click β refined per step by Gemini.
---
## Table of contents
1. What is C_GUIDE?
2. Features at a glance
3. Architecture overview
4. How the AI providers are used
- Gemini (`@google/genai`)
- Cursor SDK (`@cursor/sdk`)
5. Per-step refinement (the moving cursor)
6. REST API reference
7. Quick start
8. Project layout
9. Environment variables
10. Hotkey & UI cheat sheet
11. Troubleshooting
12. Extending C_GUIDE
---
## What is C_GUIDE?
C_GUIDE is two cooperating clients sharing one backend:
| Surface | What it does |
| --- | --- |
| **Web app** at `
localhost` | Shares your screen via `getDisplayMedia`, sends a JPEG frame + your question to Gemini, then animates a phantom cursor over the live preview, refining the target with a **second Gemini call per step**. |
| **Chrome extension** (`extension/`) | Drops onto every other tab, scans real interactive DOM elements, asks Gemini which element each step refers to, and pins a phantom cursor + glowing highlight to that element. A small purple ring follows your mouse to show the extension is alive. |
Both surfaces share the same hotkey: Ctrl + Shift + L (β+Shift+L on macOS).
---
## Features at a glance
- ποΈ **Voice or text input** β Web Speech API in app & extension.
- πΌοΈ **Screenshot understanding** β Gemini vision analyzes a JPEG of the user's screen.
- π±οΈ **Phantom cursor** β Moves over the live preview (app) or pins to real DOM elements (extension).
- π **Per-step refinement** β Every Previous/Next click re-asks the AI _"where exactly for this step?"_, so the cursor stays correct even after the page changes.
- π§ **Step navigation** β Numbered list, Previous / Next buttons, β/β arrow keys.
- β¨ **Mouse companion** β Purple glowing ring follows your real cursor on any tab to confirm the extension is β¦