@tekton-ui/mcp-server
Advanced tools
Tekton MCP Server with Claude Code integration and timestamp-based preview system
Tekton MCP Server v2.0.0 - stdio-based MCP protocol implementation for Claude Code.
MCP (Model Context Protocol) server enabling AI-driven blueprint generation, theme preview, and production code export for the Tekton design system.
SPEC: SPEC-MCP-002 v2.0.0 - stdio-based MCP Standard
pnpm install
The MCP server supports optional API key authentication to enable access to premium themes.
# Required for premium theme access
TEKTON_API_KEY=tk_live_xxx...
# Optional: API endpoint (defaults to https://tekton-ui.com)
TEKTON_API_URL=https://tekton-ui.com # or http://localhost:3000 for dev
All Themes (Requires valid API key and license):
classic-magazine - Classic magazine styledark-boldness - Fitness & wellnessminimal-workspace - Minimal workspaceneutral-workspace - Neutral humanismpebble - Round minimalsquare-minimalism - Square minimalismNote: All 6 themes require authentication. No free themes are available.
Without API Key:
With Valid API Key:
With Invalid API Key:
init Command프로젝트에 Tekton UI를 한 줄로 설정합니다.
npx @tekton-ui/mcp-server init
자동으로 수행되는 작업:
@tekton-ui/ui, tailwindcss-animate (패키지 매니저 자동 감지: pnpm/yarn/bun/npm)tailwind.config.ts에 content 경로 및 animate 플러그인 추가globals.css에 @import '@tekton-ui/ui/styles' 추가.mcp.json에 tekton 서버 등록 (프로젝트 루트)TEKTON-GUIDE.md 프로젝트 루트에 생성CLAUDE.md 및 AGENTS.md에 Tekton 워크플로우 섹션 추가설정 완료 후 Claude Code를 재시작하면, AI에게 "로그인 화면 만들어줘"와 같이 자연어로 화면 생성을 요청할 수 있습니다.
| Command | Description |
|---|---|
npx @tekton-ui/mcp-server | MCP stdio 서버 시작 |
npx @tekton-ui/mcp-server init | 프로젝트 초기 설정 |
tekton-mcp login | 브라우저 OAuth 로그인 |
tekton-mcp logout | 로그아웃 |
tekton-mcp status | 인증 상태 확인 |
pnpm install
pnpm build
pnpm inspect
# Opens browser at http://localhost:6274
See Claude Code Integration Guide for complete setup instructions.
Quick Config (프로젝트 루트 .mcp.json):
{
"mcpServers": {
"tekton": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@tekton-ui/mcp-server"]
}
}
}
Tool: generate-blueprint
Description: Generate a UI blueprint from natural language description
Input:
{
"description": "User profile dashboard with avatar, bio, settings link",
"layout": "sidebar-left",
"themeId": "calm-wellness",
"componentHints": ["Card", "Avatar", "Button"]
}
Output (Data-Only, v2.0.0):
{
"success": true,
"blueprint": {
"id": "bp-1738123456789-abc123",
"name": "User profile dashboard",
"themeId": "calm-wellness",
"layout": "sidebar-left",
"components": [...],
"timestamp": 1738123456789
}
}
Note: previewUrl field removed in v2.0.0 (use SPEC-PLAYGROUND-001 for visual preview)
Tool: preview-theme
Description: Preview a Tekton theme and retrieve its design tokens
Input:
{
"themeId": "premium-editorial"
}
Output (Data-Only, v2.0.0):
{
"success": true,
"theme": {
"id": "premium-editorial",
"name": "Premium Editorial",
"description": "Elegant magazine-style UI",
"cssVariables": {
"--color-primary": "oklch(0.2 0 0)",
"--color-secondary": "oklch(0.98 0 0)",
"--font-family": "Georgia",
"--border-radius": "0"
}
}
}
Note: previewUrl field removed in v2.0.0
Tool: export-screen
Description: Export a blueprint to production-ready code (TSX/JSX/Vue)
Input (v2.0.0: accepts blueprint object):
{
"blueprint": {
"id": "bp-1738123456789-abc123",
"name": "User Dashboard",
"themeId": "calm-wellness",
"layout": "sidebar-left",
"components": [],
"timestamp": 1738123456789
},
"format": "tsx"
}
Output (Data-Only, v2.0.0):
{
"success": true,
"code": "import React from 'react';\n\nexport default function UserDashboard() { ... }"
}
Note: filePath field removed in v2.0.0. Claude Code handles file writes.
Tool: list-themes
Description: List all available themes from .moai/themes/generated/
Input:
{}
Output:
{
"success": true,
"themes": [
{
"id": "calm-wellness",
"name": "Calm Wellness",
"description": "Serene wellness applications",
"brandTone": "calm",
"schemaVersion": "2.1"
}
],
"count": 13
}
Tool: generate_screen
Description: Generate production-ready code from JSON screen definition
Input:
{
"screenDefinition": {
"id": "user-dashboard",
"shell": "shell.web.dashboard",
"page": "page.dashboard",
"sections": [
{
"id": "header",
"token": "section.container",
"components": [
{
"type": "Heading",
"props": { "level": 1, "children": "Dashboard" }
}
]
}
]
},
"outputFormat": "react",
"options": {
"typescript": true,
"cssFramework": "styled-components"
}
}
Output:
{
"success": true,
"code": "import React from 'react';\nimport styled from 'styled-components';\n\n...",
"cssVariables": ":root { --shell-header-height: 64px; ... }"
}
Output Formats:
css-in-js: Styled-components or Emotiontailwind: Tailwind CSS classesreact: Pure React component with CSS variablesTool: validate_screen
Description: Validate JSON screen definition with helpful feedback
Input:
{
"screenDefinition": {
"id": "test-screen",
"shell": "shell.web.app",
"page": "page.detail",
"sections": []
},
"strictMode": false
}
Output:
{
"success": true,
"valid": true,
"errors": [],
"warnings": ["Optional field 'meta' not provided"],
"suggestions": [
{
"field": "shell",
"message": "Shell token must match pattern",
"suggestion": "Use format: shell.{platform}.{name}"
}
]
}
Tool: list_tokens
Description: List available layout tokens from SPEC-LAYOUT-001
Input:
{
"tokenType": "shell",
"filter": "dashboard"
}
Output:
{
"success": true,
"shells": [
{
"id": "shell.web.dashboard",
"name": "Web Dashboard Shell",
"description": "Dashboard application shell with header and sidebar",
"platform": "web"
}
],
"metadata": {
"total": 1,
"filtered": 1
}
}
Token Types:
shell: Shell layout tokens (shell.web., shell.mobile.)page: Page layout tokens (page.dashboard, page.detail, etc.)section: Section pattern tokens (section.grid-4, section.hero, etc.)all: All token typesTool: list-components
Description: List all available UI components from @tekton/ui component catalog
Input:
{
"category": "core",
"search": "button"
}
Parameters:
category (optional): Filter by category - 'core' | 'complex' | 'advanced' | 'all' (default: 'all')search (optional): Search components by name or descriptionOutput:
{
"success": true,
"components": [
{
"id": "button",
"name": "Button",
"category": "core",
"description": "Interactive button with variants",
"variantsCount": 6,
"hasSubComponents": false,
"tier": 1
}
],
"count": 15,
"categories": {
"core": 15,
"complex": 10,
"advanced": 5
}
}
Component Categories:
Total Components: 30+
Tool: preview-component
Description: Get detailed information about a specific UI component including props, variants, sub-components, and usage examples
Input:
{
"componentId": "button",
"includeExamples": true,
"includeDependencies": true
}
Parameters:
componentId (required): Component ID (lowercase with hyphens, e.g., 'button', 'card', 'dialog')includeExamples (optional): Include usage examples (default: true)includeDependencies (optional): Include dependency information (default: true)Output:
{
"success": true,
"component": {
"id": "button",
"name": "Button",
"category": "core",
"description": "Interactive button with variants",
"tier": 1,
"props": [
{
"name": "variant",
"type": "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'",
"required": false,
"defaultValue": "'default'",
"description": "Visual style variant"
},
{
"name": "size",
"type": "'default' | 'sm' | 'lg' | 'icon'",
"required": false,
"defaultValue": "'default'",
"description": "Button size"
}
],
"variants": [
{
"name": "variant",
"value": "default",
"description": "Default blue button"
},
{
"name": "variant",
"value": "destructive",
"description": "Red destructive action"
}
],
"importStatement": "import { Button } from '@tekton/ui';",
"dependencies": {
"internal": [],
"external": ["@radix-ui/react-slot"]
},
"examples": [
{
"title": "Basic Usage",
"code": "import { Button } from '@tekton/ui';\n\n<Button variant=\"default\">Click me</Button>",
"description": "Simple button with default variant"
}
],
"accessibility": "Supports keyboard navigation and ARIA attributes"
}
}
Error Handling: When component not found, returns error with list of available components
Tool: list-screen-templates
Description: List all available screen templates from the Tekton template registry
Input:
{
"category": "auth",
"search": "login"
}
Parameters:
category (optional): Filter by category - 'auth' | 'dashboard' | 'form' | 'marketing' | 'feedback' | 'all' (default: 'all')search (optional): Search templates by name or descriptionOutput:
{
"success": true,
"templates": [
{
"id": "auth.login",
"name": "Login",
"category": "auth",
"description": "User authentication login screen",
"requiredComponentsCount": 5,
"layoutType": "centered",
"version": "1.0.0",
"tags": ["authentication", "form"]
}
],
"count": 4,
"categories": {
"auth": 4,
"dashboard": 1,
"form": 0,
"marketing": 3,
"feedback": 5
}
}
Template Categories:
Total Templates: 13
The MCP server provides 2 built-in prompts that work across all MCP clients:
Purpose: Complete onboarding guide for Tekton UI
Content:
When to use: First-time users, onboarding, workflow overview
Purpose: Detailed 4-step production workflow
Content:
When to use: Production screen generation, workflow clarification
Note: These prompts are platform-agnostic and work with Claude Code, OpenAI Codex, Cursor, Windsurf, and any MCP-compatible client.
Total Prompts: 2
Tool: preview-screen-template
Description: Get detailed information about a specific screen template including skeleton structure, layout configuration, and customization boundaries
Input:
{
"templateId": "auth.login",
"includeLayoutTokens": true
}
Parameters:
templateId (required): Template ID in format category.name (e.g., 'auth.login', 'feedback.loading')includeLayoutTokens (optional): Include responsive layout tokens (default: true)Output:
{
"success": true,
"template": {
"id": "auth.login",
"name": "Login",
"category": "auth",
"description": "User authentication login screen",
"version": "1.0.0",
"skeleton": {
"shell": "centered-card",
"page": "auth-page",
"sections": [
{
"id": "header",
"name": "Header",
"slot": "logo",
"required": true
},
{
"id": "form",
"name": "Form",
"slot": "main",
"required": true
}
]
},
"layout": {
"type": "centered",
"responsive": {
"mobile": {
"padding": "1rem",
"gap": "1rem",
"columns": 1
},
"tablet": {
"padding": "2rem",
"gap": "1.5rem",
"columns": 1
},
"desktop": {
"padding": "2rem",
"gap": "2rem",
"columns": 1
}
}
},
"customizable": {
"texts": ["title", "subtitle", "button_label"],
"optional": ["social_login", "remember_me"],
"slots": ["logo", "footer", "socialLogin"]
},
"requiredComponents": ["Input", "Button", "Card", "Form", "Label"],
"importStatement": "import { LoginTemplate } from '@tekton/ui';",
"exampleProps": {
"texts": {
"title": "Welcome Back",
"subtitle": "Sign in to your account"
},
"options": {
"social_login": true,
"remember_me": true
}
},
"created": "2026-01-15",
"updated": "2026-01-20",
"tags": ["authentication", "form"]
}
}
Error Handling: When template not found, returns error with list of available templates
Use Cases:
Blueprint & Theme Workflows:
User: "Create a user dashboard with profile card using calm-wellness theme"
→ Claude Code calls generate-blueprint
→ Blueprint JSON returned
User: "Show me the premium-editorial theme"
→ Claude Code calls preview-theme
→ Theme metadata and CSS variables returned
User: "Export that dashboard as TypeScript React"
→ Claude Code calls export-screen
→ TSX code returned (ready to copy/paste)
Screen Generation Workflows:
User: "Generate a dashboard screen using shell.web.dashboard and page.dashboard"
→ Claude Code calls generate_screen
→ Production-ready React code with CSS variables returned
User: "What layout tokens are available for sections?"
→ Claude Code calls list_tokens with tokenType='section'
→ List of section tokens (grid-2, grid-3, hero, etc.) returned
Component Discovery Workflows (SPEC-MCP-003):
User: "What UI components are available?"
→ Claude Code calls list-components
→ List of 30+ components categorized by tier returned
User: "Show me details about the Button component"
→ Claude Code calls preview-component with componentId='button'
→ Props, variants, examples, and dependencies returned
User: "I need a dialog component. What are the props?"
→ Claude Code calls preview-component with componentId='dialog'
→ Complete Dialog component specification with sub-components returned
Template Discovery Workflows (SPEC-MCP-003):
User: "What screen templates are available for authentication?"
→ Claude Code calls list-screen-templates with category='auth'
→ 4 auth templates (login, signup, forgot-password, verification) returned
User: "Show me the login template structure"
→ Claude Code calls preview-screen-template with templateId='auth.login'
→ Skeleton, layout, customization boundaries, and required components returned
User: "What can I customize in the loading template?"
→ Claude Code calls preview-screen-template with templateId='feedback.loading'
→ Customizable texts, slots, and optional features returned
See Claude Code Integration Guide for complete examples.
packages/mcp-server/
├── src/
│ ├── index.ts # stdio MCP server entry point (13 tools)
│ ├── tools/ # MCP tool implementations
│ │ ├── generate-blueprint.ts # Blueprint generation
│ │ ├── preview-theme.ts # Theme preview
│ │ ├── list-themes.ts # Theme listing
│ │ ├── list-icon-libraries.ts # Icon library listing
│ │ ├── preview-icon-library.ts # Icon library preview
│ │ ├── export-screen.ts # Blueprint export
│ │ ├── generate-screen.ts # Screen code generation (SPEC-LAYOUT-002)
│ │ ├── validate-screen.ts # Screen validation (SPEC-LAYOUT-002)
│ │ ├── list-tokens.ts # Layout token listing (SPEC-LAYOUT-002)
│ │ ├── list-components.ts # Component listing (SPEC-MCP-003)
│ │ ├── preview-component.ts # Component preview (SPEC-MCP-003)
│ │ ├── list-screen-templates.ts # Template listing (SPEC-MCP-003)
│ │ └── preview-screen-template.ts # Template preview (SPEC-MCP-003)
│ ├── data/ # Static data registries (SPEC-MCP-003)
│ │ ├── component-registry.ts # Component metadata registry
│ │ └── component-metadata.json # Static component metadata
│ ├── storage/ # Blueprint storage
│ │ ├── blueprint-storage.ts
│ │ └── timestamp-manager.ts
│ ├── schemas/ # Zod validation
│ │ └── mcp-schemas.ts
│ └── utils/ # Helper functions
│ ├── error-handler.ts
│ └── logger.ts # stderr-only logging
└── __tests__/ # Test suites
├── tools/ # Tool tests
│ ├── generate-blueprint.test.ts
│ ├── preview-theme.test.ts
│ ├── export-screen.test.ts
│ ├── screen-tools.test.ts # SPEC-LAYOUT-002 Phase 4 tests
│ ├── list-components.test.ts # SPEC-MCP-003 tests
│ ├── preview-component.test.ts # SPEC-MCP-003 tests
│ ├── list-screen-templates.test.ts # SPEC-MCP-003 tests
│ └── preview-screen-template.test.ts # SPEC-MCP-003 tests
├── mcp-protocol/ # JSON-RPC validation
├── storage/ # Storage tests
└── utils/ # Utility tests
Key Changes in v2.0.0:
classic-magazine - Classic magazine styledark-boldness - Fitness & wellnessminimal-workspace - Minimal workspaceneutral-workspace - Neutral humanismpebble - Round minimalsquare-minimalism - Square minimalismCSS Format: All color values use OKLCH format for perceptual uniformity
Authentication: All themes require valid API key and license
| Metric | Target | Current | Status |
|---|---|---|---|
| Test Coverage | ≥ 85% | 94.39% | ✅ |
| TypeScript Errors | 0 | 0 | ✅ |
| Critical Vulnerabilities | 0 | 0 | ✅ |
| Tool Response Time | < 500ms | < 100ms | ✅ |
| Server Startup | < 1s | < 500ms | ✅ |
Test Results:
All MCP tools reuse @tekton/core functions:
Blueprint & Theme Tools:
loadTheme() - Theme loadinglistThemes() - Theme enumerationcreateBlueprint() - Blueprint creationvalidateBlueprint() - Schema validationgenerateCSSVariables() - CSS variable extractionrender() - Code generationScreen Generation Tools (SPEC-LAYOUT-002):
validateScreenDefinition() - Screen validationresolveScreen() - Layout and component resolutiongenerateStyledComponents() - CSS-in-JS generationgenerateTailwindClasses() - Tailwind CSS generationgenerateReactComponent() - React component generationgetAllShellTokens() - Shell token listinggetAllPageLayoutTokens() - Page token listinggetAllSectionPatternTokens() - Section token listingComponent & Template Discovery (SPEC-MCP-003):
templateRegistry from @tekton/ui - Template metadata and searchZero code duplication - Single source of truth maintained.
# Install dependencies
pnpm install
# Build (TypeScript → dist/)
pnpm build
# Run tests
pnpm test
# Test with coverage
pnpm test:coverage
# Watch mode
pnpm dev
# Lint
pnpm lint
# Start MCP server (stdio)
pnpm start
# MCP Inspector (browser-based testing)
pnpm inspect
# Automated MCP protocol validation
node validate-mcp.mjs
# Manual testing with MCP Inspector
pnpm inspect
Breaking Changes:
previewUrl field removed from generate-blueprint and preview-theme outputsfilePath field removed from export-screen outputexport-screenexport-screen now accepts blueprint object instead of blueprintIdWhy?
Visual Preview: Use SPEC-PLAYGROUND-001 for React-based rendering
Contributions welcome! Please ensure:
pnpm test)pnpm test:coverage)pnpm build)node validate-mcp.mjs)MIT
Version: 3.0.0 (stdio-based MCP standard + Component & Template Discovery) Last Updated: 2026-02-01 SPEC: SPEC-MCP-002 v2.0.0, SPEC-LAYOUT-002 Phase 4, SPEC-MCP-003 v1.0.0 Total Tools: 13 (9 existing + 4 new discovery tools)
FAQs
Tekton MCP Server with Claude Code integration and timestamp-based preview system
We found that @tekton-ui/mcp-server demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Research
/Security News
A malicious Firefox extension fetches its payload after installation to evade detection, steal Google session cookies, and automate account takeover.
Research
/Security News
The compromise affects MemTensor's MemOS, an open source memory framework for large language models (LLMs) and AI agents. Both npm package @memtensor/memos-cloud-openclaw-plugin and the PyPI package MemoryOS are compromised. They drop cross-platform Go binaries that exfiltrate developer secrets.
Security News
Lovable’s OJ rewrites Vite’s dev server in Rust, reducing memory use and preview times as AI lowers the cost of open source reimplementation.