Vynix

<div align="center"> # Vynix ### Point it. Capture it. Ship it. **An AI-native website annotation & developer-context platform.** Click any element on a live website, leave structured feedback, and Vynix captures enough context — page, element, DOM, screenshots — that an AI coding agent can act on it without a single follow-up question. </div> --- ## Why Vynix Today, feedback like _"make this button bigger"_ forces a developer (or an AI agent) to hunt for the page, find the element, reconstruct the context, and ask clarifying questions. Vynix attaches **structured context** directly to the clicked element, and exposes it to AI agents over a first-party **MCP server** — becoming the bridge between live websites and AI development workflows. ## Monorepo layout | Path | What it is | Stack | | ------------- | ----------------- | ----- | | `backend/` | REST API | PHP 8.2+, Slim 4, PDO/MySQL, JWT | | `widget/` | Embeddable widget | TypeScript, Vite, Web Components, Shadow DOM | | `dashboard/` | Web app | React, TypeScript, Vite, Tailwind | | `mcp-server/` | MCP server | TypeScript, `@modelcontextprotocol/sdk` | | `docs/` | Documentation | Architecture, API, database, widget, MCP | | `.ai-context/`| Orchestration | Project ground truth, plan, runtime state | | `.github/agents/` | Agent specs | Orchestrator + 7 role agents | ## Quick start (local development) Prerequisites: **PHP 8.2+**, **Composer**, **Node 20+**, **Docker + Compose**. ```bash # 1. Backing services (MySQL, Redis, MinIO) cp .env.example .env docker compose up -d # 2. Backend API cd backend composer install cp .env.example .env # then set JWT_SECRET and DB_* to match your infra php database/migrate.php # apply schema + migrations php -S 127.0.0.1:8080 -t public # API on http://127.0.0.1:8080 cd .. # 3. Dashboard cd dashboard npm install npm run dev # app on http://127.0.0.1:5173 cd .. # 4. Widget (build the embeddable script) cd widget npm install npm run build # outputs dist/widget.js cd .. ``` Health check: `curl -s http://127.0.0.1:8080/api/v1/health` ## Install the widget on any site ```html <script src="https://cdn.vynix.in/widget.js" data-project-key="YOUR_PROJECT_INGEST_KEY" data-api="https://api.vynix.in" defer ></script> ``` It works on plain HTML, PHP, WordPress, Laravel, React, Vue, and Next.js — no framework dependency, fully isolated in a Shadow DOM. ## The MVP flow ``` widget captures element + context → POST /api/v1/annotations → stored in MySQL → dashboard lists & shows full context → "Generate AI prompt" → MCP server exposes the same annotations to AI coding agents ``` ## Multi-agent development workflow Vynix ships with a stateful, loop-guarded agent pipeline (Planner → Architect → Developer → Tester → Debugger → Regression → Reviewer) driven by an **Orchestrator**. See [AGENTS.md](AGENTS.md) and [.github/agents/automation-pipeline.md](.github/agents/automation-pipeline.md). ## Documentation - [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) — system design - [docs/API.md](docs/API.md) — REST endpoints - [docs/DATABASE.md](docs/DATABASE.md) — schema reference - [docs/WIDGET.md](docs/WIDGET.md) — widget internals & install - [docs/MCP.md](docs/MCP.md) — MCP tools for AI agents - [CONTRIBUTING.md](CONTRIBUTING.md) — how to work in this repo ## License [MIT](LICENSE) © Vynix