Ui Architect Ai

UI Architect AI

From idea to world-class design stack in seconds.

A comprehensive Design Intelligence System — self-updating multi-agent architecture that discovers the best components, animations, libraries, colors, typography, icons, mobile UI patterns, and design inspirations for any web or mobile project.

7 applications · 3 shared packages · 9 specialist agents · 2200+ curated resources

Built with · TypeScript · Node.js · Next.js · Prisma · PostgreSQL · MCP SDK

Project Overview

---

The Intelligence Network

CLI · MCP Server · Web Dashboard · VS Code Extension

graph TD
    User[User / Developer] --> Dashboard[Web Dashboard Next.js]
    User --> VSCode[VS Code Extension]
    User --> CLI[CLI Tool uia]
    User --> AIClient[AI Coding AgentsClaude / 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 Baseknowledge-base.json)]

    AutoDisc[Auto Discoverycron scheduler] --> Research[Research Agent]
    Research --> Internet[External Sources21st.dev, Magic UI, GitHub]

    ReviewAI[Design Review AI] --> Architect
    ReviewAI --> RecEngine

    subgraph "Data Flow"
        Agents
        KB
        Research
    end

Interface Gallery

Terminal CLI (uia)

MCP in Cursor

---

Features

Multi-Agent Intelligence 9 specialized agents rank resources by project intent using a weighted scoring formula — 50% intent match, 30% quality heuristics, 20% popularity.

MCP Server v2.0 4 tools exposed via Model Context Protocol for Claude Code, Cursor, Gemini, Roo Code, and Cline — recommenddesign, analyzedesign, findcomponents, getlatest_audit.

Developer Level Personalization Results adapt to beginner, intermediate, or advanced skill levels — beginners get simpler resources, experts get advanced customizable options.

Web Dashboard Next.js 16 with dark mode, live prompt generation, responsive card grids, and sidebar navigation for visual design exploration.

CLI Tool Terminal interface with color-coded output, spinner feedback, and 5 commands — recommend, search, find, analyze, prompt.

VS Code Extension Sidebar webview, command-palette recommendations, secure sandboxed webviews with CSP, and dark theme integration.

Research Agent Automated discovery engine with URL/name deduplication, category coverage analysis, and 4 markdown reports per scan.

Auto Discovery Periodic cron scheduler — daily research scans, weekly link validation via HTTP HEAD, monthly score refresh aligned with trends.

Design Review AI Heuristic visual analysis engine providing overall, accessibility, and visual quality scores with actionable suggestions and component recommendations.

100+ Parallel Agents Orchestrator dispatches to all 9 agents simultaneously — results merged, deduplicated, and sorted in under 200ms.

Deterministic Results Same prompt + same knowledge base = identical results every time. No randomness in the scoring pipeline.

Scoring Formula 0.5matchScore + 0.3qualityScore + 0.2*popularityScore — framework, style, use case match + accessibility, performance, popularity signals.

---

Project Structure

ui-architect-ai/ │ ├── apps/ # Application ecosystem (7 apps) │ ├── cli/ # Terminal CLI (uia) — 5 commands │ │ └── src/index.ts │ ├── mcp-server/ # MCP v2.0 server — 4 tools │ │ └── src/index.ts │ ├── dashboard/ # Next.js 16 web dashboard │ │ └── src/app/ │ ├── vscode-extension/ # VS Code sidebar + commands │ │ └── src/extension.ts │ ├── research-agent/ # Automated discovery engine │ │ └── src/index.ts │ ├── auto-discovery/ # Cron maintenance scheduler │ │ └── src/index.ts │ └── design-review-ai/ # Visual analysis engine │ └── src/index.ts │ ├── packages/ # Shared libraries (3 packages) │ ├── core/ # Domain types, interfaces, logger │ │ └── src/index.ts │ ├── database/ # Prisma client, schema, seed │ │ └── prisma/schema.prisma │ └── recommendation-engine/ # Multi-agent recommendation system │ └── src/agents/ # Orchestrator + 9 specialist agents │ ├── data/ # Centralized intelligence data │ ├── knowledge-base.json # Primary DB (~2264 resources) │ └── internalresources.json # Secondary DB (~2240 resources) │ ├── docs/ # Documentation │ ├── architecture/ # DB design, schema, ER diagram │ ├── guides/ # Setup, MCP tools spec │ ├── rules/ # Coding standards & global rules │ ├── NETWORKMAP.md │ └── COMPLETED_PHASES.md │ ├── package.json # Monorepo root (npm workspaces) ├── tsconfig.json # ES2022, NodeNext, strict mode ├── .gitignore ├── technical-debt.md ├── missing-features.md └── architecture-review.md

---

Technology Stack

Layer Technologies

Monorepo npm workspaces

Runtime Node.js 20+, TypeScript 5.3+ (strict mode across all 7 apps + 3 packages)

CLI commander · chalk · ora

MCP @modelcontextprotocol/sdk v1.0.1 — Stdio transport, JSON-RPC 2.0

Dashboard Next.js 16.2.9 · React 19.2.4 · Tailwind CSS v4 · Framer Motion · Lucide React · TanStack React Query

VS Code @types/vscode 1.85+ · Webview API with sandboxed CSP

Database PostgreSQL · Prisma 7.8

Scheduling node-cron

HTTP axios

Tooling tsx · ESLint

---

Getting Started

Prerequisites

Node.js v20 or higher

npm v10 or higher (workspaces support)

PostgreSQL Optional — system runs with just the JSON knowledge base

Quick Install

# 1. Install all dependencies across all 10+ packages/apps
npm install

# 2. Compile TypeScript to JavaScript
npm run build

Database Setup — Optional

Expand for Prisma/PostgreSQL setup

# 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

---

MCP Server — AI Agent Integration

The MCP server lets AI coding agents query the design intelligence system directly via 4 tools over Stdio JSON-RPC 2.0.

Running the Server

node apps/mcp-server/dist/index.js

Connecting AI Clients

Client Configuration

Cursor Settings → Features → MCP → Add: node /abs/path/to/apps/mcp-server/dist/index.js

Claude Code claude mcp add ui-architect -- node /abs/path/to/apps/mcp-server/dist/index.js

Gemini CLI gemini-cli mcp register ui-architect -- node /abs/path/to/apps/mcp-server/dist/index.js

Roo Code / Cline Add to mcpServers config as command type with the node path

Exposed Tools

Tool Input Output

recommend_design { prompt, developerLevel? } RecommendationStack — components, animations, icons, typography, colors, mobileUI, inspirations

analyze_design { type: "url"|"screenshot", value } DesignReviewResult — scores, issues, suggestions, recommendations

find_components { query } Filtered component resources

getlatestaudit {} Latest gap-analysis & audit report markdown

Verify Connection

npx tsx apps/mcp-server/src/test-client.ts

---

CLI Usage

Command Description

uia recommend <prompt> Get design recommendations with optional --level flag

uia search <query> Search across all design resources

uia find <category> <query> Find resources in a specific category

uia analyze Analyze project for design debt (stub — coming soon)

uia prompt <type> Generate AI prompt templates for design tasks

# 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"

Output: Color-coded by category — cyan (components), yellow (animations), green (icons), magenta (typography), blue (colors), red (mobileUI). Each entry shows name, description, and URL.

---

Web Dashboard

npm run dev --workspace=dashboard

Navigate to http://localhost:3000. 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

---

VS Code Extension

cd apps/vscode-extension
npm run watch

Open VS Code → Run Extension → Use the UI Architect sidebar panel or run UI Architect: Recommend from the command palette.

---

Multi-Agent Recommendation System

Scoring Formula

totalScore = 0.5 × matchScore + 0.3 × qualityScore + 0.2 × popularityScore

Component Signals

matchScore Framework match (+10) · Style match (+8) · Use case match (+8) · Prompt keyword match (+5 exact, +2 description) · Domain bonuses

qualityScore Baseline 75 · Accessibility/WCAG (+10) · Performance (+10) · Responsive/mobile (+5) · Capped at 100

popularityScore Baseline 60 · "popular"/"standard" (+15) · "tailwind"/"shadcn" (+20) · Capped at 100

9 Specialist Agents

Agent Domain Special Bonuses

ComponentAgent Components, UI kits Framework match (+10), playground (+5), accessible (+8)

AnimationAgent Animations, motion Physics-based (+5)

TypographyAgent Fonts, typography Variable fonts (+5), self-hosted/open-source (+3)

ColorAgent Colors, gradients WCAG/contrast (+10)

IconAgent Icons SVG/open-source (+5)

MobileUIAgent iOS, Android, Flutter, RN Platform match (+10)

InspirationAgent Galleries, showcases Gallery/showcase (+5)

TrendAgent All resources Recency 2024-2026 (+5), trend keywords (+15)

ResourceResearchAgent All resources Broad keyword match (+2 per word)

Developer Level Personalization

Level Behavior

Beginner Bonuses for "simple", "easy", "starter" resources · Penalties for "advanced", "complex"

Intermediate Neutral — standard professional stacks

Advanced Bonuses for "customizable", "3D", "physics-based", "complex" · Penalties for "simple"

---

Research Agent & Auto Discovery

Research Agent

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:

Report Content

research-report.md Summary statistics of the scan

new-resources.md Newly discovered resources with metadata

duplicate-report.md Duplicate resources found (matched by name/URL)

gap-analysis.md Category coverage counts and missing design areas

npm run dev --workspace=@ui-architect/research-agent

Auto Discovery — Maintenance Scheduler

Periodic cron-based maintenance for database integrity and freshness.

Schedule Day/Time Actions

Daily Every day at 00:00 Research Agent scan

Weekly Sunday at 01:00 Research scan + dead link validation (HTTP HEAD)

Monthly 1st at 02:00 Research scan + link validation + trend-based score refresh

# 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

---

Design Review AI

Heuristic visual analysis engine providing design and accessibility scoring for any URL or screenshot.

Metric Score Notes

Overall Score 78/100 General design quality assessment

Accessibility 65/100 WCAG compliance, contrast, ARIA labels

Visual Quality 82/100 Typography, spacing, hierarchy, color harmony

npm run dev --workspace=@ui-architect/design-review-ai

Programmatic usage:

const engine = new DesignReviewEngine();
const result = await engine.analyze({ type: "url", value: "https://example.com" });
// => { overallScore: 78, accessibilityScore: 65, visualQualityScore: 82,
//      issues: [...], suggestions: [...], recommendations: {...} }

---

Database Schema

The database uses a hybrid extending-table architecture — a core Resource table with 1:1 extension tables per design category, avoiding a sparse monolithic table with 40+ nullable columns. 3NF compliant.

Core Tables

Table Key Fields

Resource id (UUID PK), name, description, url, popularity, score, useCases[], categoryId (FK)

Category id (UUID PK), name (unique), description?

Tag id (UUID PK), name (unique) — M2M with Resource

Extension Tables — 1:1 with Resource

Table Specialty Fields

Component frameworks[], isResponsive, isAccessible, hasPlayground, codeSnippet, dependencies[]

Library packageManager, installCommand, license, githubStars, bundleSizeKb, repoUrl

Animation engine, isPhysicsBased, triggerType, durationMs, easing

Icon formats[], iconCount, styles[], isCustomizable

Typography fontType, designer, isVariable, licensing, isSelfHosted

ColorPalette hexCodes[], contrastRatio, isWCAGCompliant, paletteType

MobileUI platforms[], screenType, deviceMockUrl, userFlowSteps[]

Inspiration submittedBy, inspirationUrl, screenshotUrl, stylesDetected[]

# Seed the database
npx tsx packages/database/src/seed.ts

---

Development

Running Apps

Component Command

Web Dashboard

…

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: kanjariyaraj
• Source: kanjariyaraj/ui-architect-ai
• License: MIT

Install and usage instructions live in the source repository linked above.