ui-architect-ai

<p align="center"> <img src="https://img.shields.io/badge/version-2.0.0-blue?style=for-the-badge" alt="Version"> <img src="https://img.shields.io/badge/status-production%20ready-green?style=for-the-badge" alt="Status"> <img src="https://img.shields.io/badge/phases-12%20%2F%2012-success?style=for-the-badge" alt="Phases"> <img src="https://img.shields.io/badge/typescript-strict%20mode-3178C6?style=for-the-badge&logo=typescript" alt="TypeScript"> <img src="https://img.shields.io/badge/license-MIT-yellow?style=for-the-badge" alt="License"> </p> <br> <h1 align="center">UI Architect AI</h1> <p align="center"> <strong>From idea to world-class design stack in seconds.</strong> </p> <p align="center"> A comprehensive <strong>Design Intelligence System</strong> — self-updating multi-agent architecture<br> that discovers the best components, animations, libraries, colors, typography, icons,<br> mobile UI patterns, and design inspirations for any web or mobile project. </p> <p align="center"> 7 applications · 3 shared packages · 9 specialist agents · 2200+ curated resources </p> <p align="center"> Built with · TypeScript · Node.js · Next.js · Prisma · PostgreSQL · MCP SDK </p> <br> <h2 align="center">Project Overview</h2> <p align="center"> <img src="photos/overview/overview-1.png" width="32%" /> <img src="photos/overview/overview-2.png" width="32%" /> <img src="photos/overview/overview-3.png" width="32%" /> </p> <br> --- <br> <h2 align="center">The Intelligence Network</h2> <p align="center"> <strong>CLI</strong> · <strong>MCP Server</strong> · <strong>Web Dashboard</strong> · <strong>VS Code Extension</strong> </p> <br> ```mermaid graph TD User[User / Developer] --> Dashboard[Web Dashboard Next.js] User --> VSCode[VS Code Extension] User --> CLI[CLI Tool uia] User --> AIClient[AI Coding Agents<br/>Claude / Cursor / Gemini] Dashboard --> ServerActions[Server Actions] VSCode --> MCPClient[MCP Client] CLI --> RecEngine[Recommendation Engine] AIClient --> MCPServer[MCP Server v2.0] MCPServer --> RecEngine ServerActions --> RecEngine RecEngine --> Architect[Design Architect Agent] Architect --> Agents[9 Specialist Agents] Agents --> KB[(Knowledge Base<br/>knowledge-base.json)] AutoDisc[Auto Discovery<br/>cron scheduler] --> Research[Research Agent] Research --> Internet[External Sources<br/>21st.dev, Magic UI, GitHub] ReviewAI[Design Review AI] --> Architect ReviewAI --> RecEngine subgraph "Data Flow" Agents KB Research end ``` <br> <h2 align="center">Interface Gallery</h2> <h3 align="center">Terminal CLI (uia)</h3> <table width="100%"> <tr> <td width="33%"><img src="photos/cli/cli-1.png" width="100%"></td> <td width="33%"><img src="photos/cli/cli-2.png" width="100%"></td> <td width="33%"><img src="photos/cli/cli-3.png" width="100%"></td> </tr> </table> <h3 align="center">MCP in Cursor</h3> <table width="100%"> <tr> <td width="33%"><img src="photos/mcp/mcp-1.png" width="100%"></td> <td width="33%"><img src="photos/mcp/mcp-2.png" width="100%"></td> <td width="33%"><img src="photos/mcp/mcp-3.png" width="100%"></td> </tr> </table> <br> --- <br> <h2 align="center">Features</h2> <br> <table> <tr> <td width="33%" align="center"> <h3>Multi-Agent Intelligence</h3> <p>9 specialized agents rank resources by project intent using a weighted scoring formula — 50% intent match, 30% quality heuristics, 20% popularity.</p> </td> <td width="33%" align="center"> <h3>MCP Server v2.0</h3> <p>4 tools exposed via Model Context Protocol for Claude Code, Cursor, Gemini, Roo Code, and Cline — <code>recommend_design</code>, <code>analyze_design</code>, <code>find_components</code>, <code>get_latest_audit</code>.</p> </td> <td width="33%" align="center"> <h3>Developer Level Personalization</h3> <p>Results adapt to beginner, intermediate, or advanced skill levels — beginners get simpler resources, experts get advanced customizable options.</p> </td> </tr> <tr> <td width="33%" align="center"> <h3>Web Dashboard</h3> <p>Next.js 16 with dark mode, live prompt generation, responsive card grids, and sidebar navigation for visual design exploration.</p> </td> <td width="33%" align="center"> <h3>CLI Tool</h3> <p>Terminal interface with color-coded output, spinner feedback, and 5 commands — <code>recommend</code>, <code>search</code>, <code>find</code>, <code>analyze</code>, <code>prompt</code>.</p> </td> <td width="33%" align="center"> <h3>VS Code Extension</h3> <p>Sidebar webview, command-palette recommendations, secure sandboxed webviews with CSP, and dark theme integration.</p> </td> </tr> <tr> <td width="33%" align="center"> <h3>Research Agent</h3> <p>Automated discovery engine with URL/name deduplication, category coverage analysis, and 4 markdown reports per scan.</p> </td> <td width="33%" align="center"> <h3>Auto Discovery</h3> <p>Periodic cron scheduler — daily research scans, weekly link validation via HTTP HEAD, monthly score refresh aligned with trends.</p> </td> <td width="33%" align="center"> <h3>Design Review AI</h3> <p>Heuristic visual analysis engine providing overall, accessibility, and visual quality scores with actionable suggestions and component recommendations.</p> </td> </tr> <tr> <td width="33%" align="center"> <h3>100+ Parallel Agents</h3> <p>Orchestrator dispatches to all 9 agents simultaneously — results merged, deduplicated, and sorted in under 200ms.</p> </td> <td width="33%" align="center"> <h3>Deterministic Results</h3> <p>Same prompt + same knowledge base = identical results every time. No randomness in the scoring pipeline.</p> </td> <td width="33%" align="center"> <h3>Scoring Formula</h3> <p><code>0.5*matchScore + 0.3*qualityScore + 0.2*popularityScore</code> — framework, style, use case match + accessibility, performance, popularity signals.</p> </td> </tr> </table> <br> --- <br> <h2 align="center">Project Structure</h2> <br> <pre> ui-architect-ai/ │ ├── <strong>apps/</strong> <em># Application ecosystem (7 apps)</em> │ ├── <strong>cli/</strong> <em># Terminal CLI (uia) — 5 commands</em> │ │ └── src/index.ts │ ├── <strong>mcp-server/</strong> <em># MCP v2.0 server — 4 tools</em> │ │ └── src/index.ts │ ├── <strong>dashboard/</strong> <em># Next.js 16 web dashboard</em> │ │ └── src/app/ │ ├── <strong>vscode-extension/</strong> <em># VS Code sidebar + commands</em> │ │ └── src/extension.ts │ ├── <strong>research-agent/</strong> <em># Automated discovery engine</em> │ │ └── src/index.ts │ ├── <strong>auto-discovery/</strong> <em># Cron maintenance scheduler</em> │ │ └── src/index.ts │ └── <strong>design-review-ai/</strong> <em># Visual analysis engine</em> │ └── src/index.ts │ ├── <strong>packages/</strong> <em># Shared libraries (3 packages)</em> │ ├── <strong>core/</strong> <em># Domain types, interfaces, logger</em> │ │ └── src/index.ts │ ├── <strong>database/</strong> <em># Prisma client, schema, seed</em> │ │ └── prisma/schema.prisma │ └── <strong>recommendation-engine/</strong> <em># Multi-agent recommendation system</em> │ └── src/agents/ <em># Orchestrator + 9 specialist agents</em> │ ├── <strong>data/</strong> <em># Centralized intelligence data</em> │ ├── knowledge-base.json <em># Primary DB (~2264 resources)</em> │ └── internal_resources.json <em># Secondary DB (~2240 resources)</em> │ ├── <strong>docs/</strong> <em># Documentation</em> │ ├── architecture/ <em># DB design, schema, ER diagram</em> │ ├── guides/ <em># Setup, MCP tools spec</em> │ ├── rules/ <em># Coding standards & global rules</em> │ ├── NETWORK_MAP.md │ └── COMPLETED_PHASES.md │ ├── package.json <em># Monorepo root (npm workspaces)</em> ├── tsconfig.json <em># ES2022, NodeNext, strict mode</em> ├── .gitignore ├── technical-debt.md ├── missing-features.md └── architecture-review.md </pre> <br> --- <br> <h2 align="center">Technology Stack</h2> <br> <table> <thead> <tr> <th>Layer</th> <th>Technologies</th> </tr> </thead> <tbody> <tr> <td><strong>Monorepo</strong></td> <td>npm workspaces</td> </tr> <tr> <td><strong>Runtime</strong></td> <td>Node.js 20+, TypeScript 5.3+ (strict mode across all 7 apps + 3 packages)</td> </tr> <tr> <td><strong>CLI</strong></td> <td>commander · chalk · ora</td> </tr> <tr> <td><strong>MCP</strong></td> <td>@modelcontextprotocol/sdk v1.0.1 — Stdio transport, JSON-RPC 2.0</td> </tr> <tr> <td><strong>Dashboard</strong></td> <td>Next.js 16.2.9 · React 19.2.4 · Tailwind CSS v4 · Framer Motion · Lucide React · TanStack React Query</td> </tr> <tr> <td><strong>VS Code</strong></td> <td>@types/vscode 1.85+ · Webview API with sandboxed CSP</td> </tr> <tr> <td><strong>Database</strong></td> <td>PostgreSQL · Prisma 7.8</td> </tr> <tr> <td><strong>Scheduling</strong></td> <td>node-cron</td> </tr> <tr> <td><strong>HTTP</strong></td> <td>axios</td> </tr> <tr> <td><strong>Tooling</strong></td> <td>tsx · ESLint</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">Getting Started</h2> <br> <h3>Prerequisites</h3> <table> <tr> <td><strong>Node.js</strong></td> <td>v20 or higher</td> </tr> <tr> <td><strong>npm</strong></td> <td>v10 or higher (workspaces support)</td> </tr> <tr> <td><strong>PostgreSQL</strong></td> <td><em>Optional</em> — system runs with just the JSON knowledge base</td> </tr> </table> <br> <h3>Quick Install</h3> ```bash # 1. Install all dependencies across all 10+ packages/apps npm install # 2. Compile TypeScript to JavaScript npm run build ``` <br> <h3>Database Setup — Optional</h3> <details> <summary><strong>Expand for Prisma/PostgreSQL setup</strong></summary> <br> ```bash # Create .env in root echo 'DATABASE_URL="postgresql://user:password@localhost:5432/ui_architect_db"' > .env # Initialize schema cd packages/database npx prisma generate npx prisma db push npx prisma studio # Verify tables interactively ``` </details> <br> --- <br> <h2 align="center">MCP Server — AI Agent Integration</h2> <br> <p>The MCP server lets AI coding agents query the design intelligence system directly via 4 tools over <strong>Stdio JSON-RPC 2.0</strong>.</p> <br> <h3>Running the Server</h3> ```bash node apps/mcp-server/dist/index.js ``` <br> <h3>Connecting AI Clients</h3> <table> <thead> <tr> <th>Client</th> <th>Configuration</th> </tr> </thead> <tbody> <tr> <td><strong>Cursor</strong></td> <td>Settings → Features → MCP → Add: <code>node /abs/path/to/apps/mcp-server/dist/index.js</code></td> </tr> <tr> <td><strong>Claude Code</strong></td> <td><code>claude mcp add ui-architect -- node /abs/path/to/apps/mcp-server/dist/index.js</code></td> </tr> <tr> <td><strong>Gemini CLI</strong></td> <td><code>gemini-cli mcp register ui-architect -- node /abs/path/to/apps/mcp-server/dist/index.js</code></td> </tr> <tr> <td><strong>Roo Code / Cline</strong></td> <td>Add to <code>mcpServers</code> config as <code>command</code> type with the node path</td> </tr> </tbody> </table> <br> <h3>Exposed Tools</h3> <table> <thead> <tr> <th>Tool</th> <th>Input</th> <th>Output</th> </tr> </thead> <tbody> <tr> <td><code>recommend_design</code></td> <td><code>{ prompt, developerLevel? }</code></td> <td><code>RecommendationStack</code> — components, animations, icons, typography, colors, mobileUI, inspirations</td> </tr> <tr> <td><code>analyze_design</code></td> <td><code>{ type: "url"|"screenshot", value }</code></td> <td><code>DesignReviewResult</code> — scores, issues, suggestions, recommendations</td> </tr> <tr> <td><code>find_components</code></td> <td><code>{ query }</code></td> <td>Filtered component resources</td> </tr> <tr> <td><code>get_latest_audit</code></td> <td><code>{}</code></td> <td>Latest gap-analysis & audit report markdown</td> </tr> </tbody> </table> <br> <h3>Verify Connection</h3> ```bash npx tsx apps/mcp-server/src/test-client.ts ``` <br> --- <br> <h2 align="center">CLI Usage</h2> <br> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>uia recommend &lt;prompt&gt;</code></td> <td>Get design recommendations with optional <code>--level</code> flag</td> </tr> <tr> <td><code>uia search &lt;query&gt;</code></td> <td>Search across all design resources</td> </tr> <tr> <td><code>uia find &lt;category&gt; &lt;query&gt;</code></td> <td>Find resources in a specific category</td> </tr> <tr> <td><code>uia analyze</code></td> <td>Analyze project for design debt <em>(stub — coming soon)</em></td> </tr> <tr> <td><code>uia prompt &lt;type&gt;</code></td> <td>Generate AI prompt templates for design tasks</td> </tr> </tbody> </table> <br> ```bash # Get design recommendations npx tsx apps/cli/src/index.ts recommend "Modern SaaS Dashboard" # With developer level filtering npx tsx apps/cli/src/index.ts recommend "Bento Grid Portfolio" --level advanced # Search across all resources npx tsx apps/cli/src/index.ts search "glassmorphism UI kit" # Find resources in a specific category npx tsx apps/cli/src/index.ts find animations "scroll reveal" ``` <p> <strong>Output:</strong> Color-coded by category — cyan (components), yellow (animations), green (icons), magenta (typography), blue (colors), red (mobileUI). Each entry shows name, description, and URL. </p> <br> --- <br> <h2 align="center">Web Dashboard</h2> <br> ```bash npm run dev --workspace=dashboard ``` Navigate to <code>http://localhost:3000</code>. Enter a design prompt and get categorized results in a responsive card grid. Features include: - Dark mode with Tailwind CSS v4 theming - Popular prompt suggestions (Developer Portfolio, Bento Dashboard, E-commerce) - Server-side rendering via Next.js Server Actions - Sidebar navigation with active state <br> --- <br> <h2 align="center">VS Code Extension</h2> <br> ```bash cd apps/vscode-extension npm run watch ``` Open VS Code → <strong>Run Extension</strong> → Use the <code>UI Architect</code> sidebar panel or run <code>UI Architect: Recommend</code> from the command palette. <br> --- <br> <h2 align="center">Multi-Agent Recommendation System</h2> <br> <h3>Scoring Formula</h3> <pre> totalScore = 0.5 × <strong>matchScore</strong> + 0.3 × <strong>qualityScore</strong> + 0.2 × <strong>popularityScore</strong> </pre> <table> <thead> <tr> <th>Component</th> <th>Signals</th> </tr> </thead> <tbody> <tr> <td><strong>matchScore</strong></td> <td>Framework match (+10) · Style match (+8) · Use case match (+8) · Prompt keyword match (+5 exact, +2 description) · Domain bonuses</td> </tr> <tr> <td><strong>qualityScore</strong></td> <td>Baseline 75 · Accessibility/WCAG (+10) · Performance (+10) · Responsive/mobile (+5) · <em>Capped at 100</em></td> </tr> <tr> <td><strong>popularityScore</strong></td> <td>Baseline 60 · "popular"/"standard" (+15) · "tailwind"/"shadcn" (+20) · <em>Capped at 100</em></td> </tr> </tbody> </table> <br> <h3>9 Specialist Agents</h3> <table> <thead> <tr> <th>Agent</th> <th>Domain</th> <th>Special Bonuses</th> </tr> </thead> <tbody> <tr> <td><strong>ComponentAgent</strong></td> <td>Components, UI kits</td> <td>Framework match (+10), playground (+5), accessible (+8)</td> </tr> <tr> <td><strong>AnimationAgent</strong></td> <td>Animations, motion</td> <td>Physics-based (+5)</td> </tr> <tr> <td><strong>TypographyAgent</strong></td> <td>Fonts, typography</td> <td>Variable fonts (+5), self-hosted/open-source (+3)</td> </tr> <tr> <td><strong>ColorAgent</strong></td> <td>Colors, gradients</td> <td>WCAG/contrast (+10)</td> </tr> <tr> <td><strong>IconAgent</strong></td> <td>Icons</td> <td>SVG/open-source (+5)</td> </tr> <tr> <td><strong>MobileUIAgent</strong></td> <td>iOS, Android, Flutter, RN</td> <td>Platform match (+10)</td> </tr> <tr> <td><strong>InspirationAgent</strong></td> <td>Galleries, showcases</td> <td>Gallery/showcase (+5)</td> </tr> <tr> <td><strong>TrendAgent</strong></td> <td>All resources</td> <td>Recency 2024-2026 (+5), trend keywords (+15)</td> </tr> <tr> <td><strong>ResourceResearchAgent</strong></td> <td>All resources</td> <td>Broad keyword match (+2 per word)</td> </tr> </tbody> </table> <br> <h3>Developer Level Personalization</h3> <table> <thead> <tr> <th>Level</th> <th>Behavior</th> </tr> </thead> <tbody> <tr> <td><strong>Beginner</strong></td> <td>Bonuses for "simple", "easy", "starter" resources · Penalties for "advanced", "complex"</td> </tr> <tr> <td><strong>Intermediate</strong></td> <td>Neutral — standard professional stacks</td> </tr> <tr> <td><strong>Advanced</strong></td> <td>Bonuses for "customizable", "3D", "physics-based", "complex" · Penalties for "simple"</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">Research Agent & Auto Discovery</h2> <br> <h3>Research Agent</h3> <p>The automated discovery engine reads the knowledge base, simulates internet research (scanning 21st.dev, Magic UI, GitHub), deduplicates by URL and name, and generates 4 markdown reports:</p> <table> <thead> <tr> <th>Report</th> <th>Content</th> </tr> </thead> <tbody> <tr> <td><code>research-report.md</code></td> <td>Summary statistics of the scan</td> </tr> <tr> <td><code>new-resources.md</code></td> <td>Newly discovered resources with metadata</td> </tr> <tr> <td><code>duplicate-report.md</code></td> <td>Duplicate resources found (matched by name/URL)</td> </tr> <tr> <td><code>gap-analysis.md</code></td> <td>Category coverage counts and missing design areas</td> </tr> </tbody> </table> ```bash npm run dev --workspace=@ui-architect/research-agent ``` <br> <h3>Auto Discovery — Maintenance Scheduler</h3> <p>Periodic cron-based maintenance for database integrity and freshness.</p> <table> <thead> <tr> <th>Schedule</th> <th>Day/Time</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td><strong>Daily</strong></td> <td>Every day at 00:00</td> <td>Research Agent scan</td> </tr> <tr> <td><strong>Weekly</strong></td> <td>Sunday at 01:00</td> <td>Research scan + dead link validation (HTTP HEAD)</td> </tr> <tr> <td><strong>Monthly</strong></td> <td>1st at 02:00</td> <td>Research scan + link validation + trend-based score refresh</td> </tr> </tbody> </table> ```bash # Start the daemon scheduler npx tsx apps/auto-discovery/src/index.ts start # Run a one-time scan npx tsx apps/auto-discovery/src/index.ts run --mode daily npx tsx apps/auto-discovery/src/index.ts run --mode weekly npx tsx apps/auto-discovery/src/index.ts run --mode monthly ``` <br> --- <br> <h2 align="center">Design Review AI</h2> <br> <p>Heuristic visual analysis engine providing design and accessibility scoring for any URL or screenshot.</p> <table> <thead> <tr> <th>Metric</th> <th>Score</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td><strong>Overall Score</strong></td> <td>78/100</td> <td>General design quality assessment</td> </tr> <tr> <td><strong>Accessibility</strong></td> <td>65/100</td> <td>WCAG compliance, contrast, ARIA labels</td> </tr> <tr> <td><strong>Visual Quality</strong></td> <td>82/100</td> <td>Typography, spacing, hierarchy, color harmony</td> </tr> </tbody> </table> <br> ```bash npm run dev --workspace=@ui-architect/design-review-ai ``` <br> **Programmatic usage:** ```typescript const engine = new DesignReviewEngine(); const result = await engine.analyze({ type: "url", value: "https://example.com" }); // => { overallScore: 78, accessibilityScore: 65, visualQualityScore: 82, // issues: [...], suggestions: [...], recommendations: {...} } ``` <br> --- <br> <h2 align="center">Database Schema</h2> <br> <p>The database uses a <strong>hybrid extending-table architecture</strong> — a core <code>Resource</code> table with 1:1 extension tables per design category, avoiding a sparse monolithic table with 40+ nullable columns. 3NF compliant.</p> <br> <h3>Core Tables</h3> <table> <thead> <tr> <th>Table</th> <th>Key Fields</th> </tr> </thead> <tbody> <tr> <td><strong>Resource</strong></td> <td><code>id</code> (UUID PK), <code>name</code>, <code>description</code>, <code>url</code>, <code>popularity</code>, <code>score</code>, <code>useCases[]</code>, <code>categoryId</code> (FK)</td> </tr> <tr> <td><strong>Category</strong></td> <td><code>id</code> (UUID PK), <code>name</code> (unique), <code>description</code>?</td> </tr> <tr> <td><strong>Tag</strong></td> <td><code>id</code> (UUID PK), <code>name</code> (unique) — M2M with Resource</td> </tr> </tbody> </table> <br> <h3>Extension Tables — 1:1 with Resource</h3> <table> <thead> <tr> <th>Table</th> <th>Specialty Fields</th> </tr> </thead> <tbody> <tr> <td><strong>Component</strong></td> <td>frameworks[], isResponsive, isAccessible, hasPlayground, codeSnippet, dependencies[]</td> </tr> <tr> <td><strong>Library</strong></td> <td>packageManager, installCommand, license, githubStars, bundleSizeKb, repoUrl</td> </tr> <tr> <td><strong>Animation</strong></td> <td>engine, isPhysicsBased, triggerType, durationMs, easing</td> </tr> <tr> <td><strong>Icon</strong></td> <td>formats[], iconCount, styles[], isCustomizable</td> </tr> <tr> <td><strong>Typography</strong></td> <td>fontType, designer, isVariable, licensing, isSelfHosted</td> </tr> <tr> <td><strong>ColorPalette</strong></td> <td>hexCodes[], contrastRatio, isWCAGCompliant, paletteType</td> </tr> <tr> <td><strong>MobileUI</strong></td> <td>platforms[], screenType, deviceMockUrl, userFlowSteps[]</td> </tr> <tr> <td><strong>Inspiration</strong></td> <td>submittedBy, inspirationUrl, screenshotUrl, stylesDetected[]</td> </tr> </tbody> </table> <br> ```bash # Seed the database npx tsx packages/database/src/seed.ts ``` <br> --- <br> <h2 align="center">Development</h2> <br> <h3>Running Apps</h3> <table> <thead> <tr> <th>Component</th> <th>Command</th> </tr> </thead> <tbody> <tr> <td>Web Dashboard</td> <td><code>npm run dev --workspace=dashboard</code></td> </tr> <tr> <td>CLI</td> <td><code>npx tsx apps/cli/src/index.ts recommend "prompt"</code></td> </tr> <tr> <td>MCP Server</td> <td><code>npx tsx apps/mcp-server/src/index.ts</code></td> </tr> <tr> <td>Design Review</td> <td><code>npm run dev --workspace=@ui-architect/design-review-ai</code></td> </tr> <tr> <td>Research Agent</td> <td><code>npm run dev --workspace=@ui-architect/research-agent</code></td> </tr> <tr> <td>Auto Discovery</td> <td><code>npm run scan:daily --workspace=@ui-architect/auto-discovery</code></td> </tr> <tr> <td>VS Code Extension</td> <td><code>cd apps/vscode-extension && npm run watch</code></td> </tr> </tbody> </table> <br> <h3>Testing</h3> ```bash npm test # All workspace tests npx tsx packages/recommendation-engine/tests/agents.test.ts # Agent logic npx tsx apps/mcp-server/src/test-client.ts # MCP handshake npx tsx apps/research-agent/tests/research.test.ts # Research agent ``` <br> --- <br> <h2 align="center">Configuration Reference</h2> <br> <table> <thead> <tr> <th>Variable</th> <th>Required</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>DATABASE_URL</code></td> <td>For Prisma</td> <td>—</td> <td>PostgreSQL connection string</td> </tr> <tr> <td><code>UI_ARCHITECT_DB_PATH</code></td> <td>No</td> <td><code>data/knowledge-base.json</code></td> <td>Custom path to knowledge base JSON</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">Project Phases</h2> <br> <table> <thead> <tr> <th>Phase</th> <th>Component</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>1–2</td> <td>Infrastructure, Database & Schema</td> <td align="center">✅ Complete</td> </tr> <tr> <td>3</td> <td>Recommendation Logic</td> <td align="center">✅ Complete</td> </tr> <tr> <td>4</td> <td>MCP Server v1</td> <td align="center">✅ Complete</td> </tr> <tr> <td>5</td> <td>Multi-Agent Hub — 9 agents + orchestrator</td> <td align="center">✅ Complete</td> </tr> <tr> <td>6</td> <td>Automated Research & Deduplication</td> <td align="center">✅ Complete</td> </tr> <tr> <td>7</td> <td>Next.js Web Dashboard</td> <td align="center">✅ Complete</td> </tr> <tr> <td>8</td> <td>VS Code / Cursor Integration</td> <td align="center">✅ Complete</td> </tr> <tr> <td>9</td> <td>Terminal CLI (uia)</td> <td align="center">✅ Complete</td> </tr> <tr> <td>10</td> <td>Maintenance & Link Health — Auto Discovery</td> <td align="center">✅ Complete</td> </tr> <tr> <td>11</td> <td>Visual Scoring & Accessibility Review</td> <td align="center">✅ Complete</td> </tr> <tr> <td>12</td> <td>Intelligence Network & Developer Personalization</td> <td align="center">✅ Complete</td> </tr> </tbody> </table> <p align="center"><strong>12 / 12 phases — 100% complete</strong></p> <br> --- <br> <h2 align="center">Security</h2> <br> <table> <tbody> <tr> <td align="center">No Hardcoded Secrets</td> <td>API keys and credentials are environment-variable based</td> </tr> <tr> <td align="center">XSS Protection</td> <td>VS Code webview uses CSP with nonce-based scripts; textContent instead of innerHTML</td> </tr> <tr> <td align="center">Sandboxed Webviews</td> <td>VS Code extension runs in sandboxed iframes with no node access</td> </tr> <tr> <td align="center">Stdio-Only MCP</td> <td>No network layer exposed — MCP communicates exclusively over stdin/stdout</td> </tr> <tr> <td align="center">100% TypeScript Strict</td> <td>Strict mode enabled across all 7 applications and 3 packages</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">License</h2> <p align="center"> MIT — Open source and free to use. </p> <br> --- <br> <p align="center"> <em>Built with the UI Architect AI monorepo · npm workspaces · TypeScript strict mode</em> </p>