tech lead mcp

an ai-powered technical lead that helps agents build production-quality apps following your design system, coding standards, and architecture patterns.

25 tools design system app planning api scaffolding testing ci/cd ui standards code review documentation
mcp endpoint
https://tl.serviceroute.io/mcp
connect, ask, build

Add this server to any MCP-compatible client and your AI agent instantly becomes a senior engineer who knows your entire codebase.

01

connect

Point your MCP client (Claude, Cursor, VS Code, Windsurf) to the endpoint above.

02

ask

Your agent queries the design system, standards, and patterns — getting guidance as it codes.

03

build

Scaffold components, routes, and pages that match your exact design system and stack.

04

review

Get automated code review that catches design system violations, naming issues, and anti-patterns.

the "te" system

teenage engineering inspired — warm cream backgrounds, bold orange accents, and clean typography with a lowercase aesthetic.

core palette

teBlack
#121118
teDarkGray
#32313B
teOffWhite
#ECEAE6
teCream
#F6F5F1
teWhite
#FBFAF7
teOrange
#F27A1A
teRed
#E8453E
teGreen
#2ECC71

typography

sans — ibm plex sans
headings are light
body — 300 weight
Body text uses weight 300 for a clean, readable feel across all content areas.
mono — space mono
UI LABELS, BUTTONS, TABS
style rules
• All headings are lowercase
• Mono for all interactive UI labels
• border-radius: 10px (cards), 6px (inputs)
• 100px radius for chips/pills
app examples

Here's what AI agents build when guided by this MCP server — pixel-perfect apps following the "te" design system.

TYPE A MESSAGE...

ai chat interface

Real-time messaging with auto-scroll, message bubbles, typing indicators, and model selector. Full keyboard navigation.

chat pattern • react 19 • tanstack start
OVERVIEW
ANALYTICS
REPORTS
2,847
USERS
+14%
GROWTH
$12.4K
REVENUE
98.2%
UPTIME

analytics dashboard

Stat cards with trend indicators, tabbed navigation, responsive grid layout, and data visualization areas.

dashboard pattern • mui grid2 • charts
GPT-4O-MINI
GPT-4O
CLAUDE
GEMINI
CANCEL
SAVE

settings & forms

Toggle switches, model selectors, chip groups, and form controls using the full MUI 6 component system with te theme.

form pattern • mui dialog • settings
+ ADD
ALL
ACTIVE
ARCHIVED
ACTIVE
ACTIVE
ARCHIVED

data lists & tables

Filterable lists with status chips, action buttons, icon indicators, and responsive card layouts.

list pattern • mui chips • filters
built for modern react

Every scaffold, pattern, and review is tuned for this exact stack.

React 19 TanStack Start TanStack Router Vite 7 TypeScript 5.7+
MUI 6 Emotion lucide-react Space Mono IBM Plex Sans
25 tools for your agent

Everything an AI agent needs to build, review, and document apps that follow your standards.

planning & architecture
plan_app

Generate a complete build plan for any app — phased implementation with files, commands, and tool calls. Supports 5 stacks.

validate_plan

Validate a build plan for completeness, checking missing phases, stack requirements, and best practices.

knowledge & standards
get_design_system

Complete design tokens — colors, typography, spacing, shadows, motion, and component guidelines.

get_font_imports

Required font packages and CSS imports for IBM Plex Sans and Space Mono.

get_stack_info

Full tech stack specification with TypeScript, Vite, and framework configuration.

get_coding_standards

Naming conventions, file organization rules, and code quality standards.

get_project_structure

Standard project directory layout for routes, components, and features.

get_component_patterns

12 production-ready code examples: layouts, pages, chat, forms, tables, and more.

get_theme_source

Complete MUI theme.ts source — 1200+ lines of fully configured theme tokens.

get_ui_component_standards

UI component creation standards: accessibility, responsive design, state management, animations, composition, and MUI usage guide.

get_documentation_standards

Standards for JSDoc, README files, changelogs, and error messages.

scaffolding & generation
scaffold_component

Generate a production-ready component file with proper MUI imports and theme usage.

scaffold_route

Generate TanStack Router route files with typed parameters and proper structure.

scaffold_api

Generate a full API resource: route handlers, validation schemas, controllers, and client-side query hooks.

scaffold_test

Generate test files for components, APIs, services, or hooks with proper mocking and assertions.

generate_ui_component

Generate full-featured UI components: dashboards, data lists, chat UIs, forms, detail pages, modals, tabs, and status cards.

generate_documentation

Generate README, changelog, component docs, or API docs from templates.

get_setup_guide

Step-by-step new project setup from npm create to first deploy.

testing & ci/cd
get_testing_guide

Comprehensive testing setup guide: runner config, utilities, example tests, and best practices per stack.

get_api_patterns

Detailed API implementation patterns: routes, controllers, services, validation, error handling, and query hooks.

get_ci_config

Generate CI/CD pipelines (GitHub Actions / GitLab CI) with lint, test, build, and Docker jobs.

code review
review_code

Automated review checking design system compliance, naming, patterns, and anti-patterns.

review_ui_component

Specialized UI review: accessibility, responsive design, state patterns, loading/error states, and animation.

review_documentation

Review code for documentation quality — missing JSDoc, exports, and coverage.

assess_codebase

Full codebase assessment: dependency audit, structure analysis, design system compliance, and recommendations report.