跪拜 Guibai
← All articles
Frontend · JavaScript · Programmer

MCP Feeds AI Coding Tools Real Component Data, Not Guesswork

By ErpanOmer ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Teams with in-house component libraries can now feed their actual specs to AI coding tools, eliminating the back-and-forth of re-explaining code. Teams relying on public UI libraries gain little from MCP, and the security and metadata upkeep are real costs to budget for.

Summary

AI coding tools still produce code that doesn't fit a specific project's component library, design tokens, or type definitions. The problem isn't model intelligence; it's that the model has to guess from public training data. MCP (Model Context Protocol) changes that by letting the assistant reach into a live codebase and pull project-specific metadata on demand.

The author spent two days building an MCP server for a ~60-component library. It exposes a component list, per-component details (props, slots, events, examples, design notes), and design tokens as resources, plus two tools: one that recommends components from a natural-language requirement, and one that validates a code snippet against the component props. After registering the server in Claude Code, the assistant stopped emitting native HTML and inline styles; it produced imports and props matching the library's actual definitions.

MCP works, but it's not friction-free. Exposing resources and tools means anything the AI can access is also accessible to logging or cloud transfer, so the server should stay read-only and only expose public specs. Metadata quality is the other bottleneck; the fix is to auto-extract from TypeScript and JSDoc comments rather than maintain a separate doc layer. The author's threshold for adoption: teams with 30+ custom components and a design spec see real gains; teams on Ant Design or Element Plus already enjoy adequate training data and shouldn't bother.

Takeaways
— MCP is an open protocol open-sourced by Anthropic in late 2024 that lets AI models connect to external data sources and tools.
— The author's component library has about 60 components; he spent two days building an MCP server using the official @modelcontextprotocol/sdk.
— The server exposes three resources (component list, component detail, design tokens) and two tools (recommend-components, validate-component-usage).
— Without MCP, AI generated a product card with native HTML, inline styles, and undefined props; with MCP, it produced code using the library's actual components, props, and design tokens.
— MCP exposes any resource/tool to the AI, so it should stay read-only and never include runtime data, keys, or internal APIs.
— Metadata quality determines MCP's effectiveness; the author auto-extracts from TypeScript types and JSDoc using ts-morph to avoid a separate doc layer.
— Adoption threshold: teams with 30+ self-built components and their own design specs benefit; teams using Ant Design or Element Plus gain little because AI training data already covers them.
Conclusions

MCP amplifies metadata quality: stale or vague type definitions flow directly into AI-generated code, so its value hinges on keeping source comments and types meticulous.

The 30-component threshold is pragmatic but arbitrary; the real break-even point is when guessing on AI output costs more than the two days to build the server.

MCP is useful for specific integrations but not yet a standard interface; its adoption depends on ecosystem tooling, security hardening, and whether metadata extraction stays automated.

Concepts & terms
Model Context Protocol (MCP)
An open protocol from Anthropic that standardizes how AI models connect to external data sources and tools, letting them fetch and act on project-specific information during coding.
MCP Resource
A read-only data endpoint exposed by an MCP server (e.g., a component list or design tokens) that the AI can query on demand.
MCP Tool
An executable action an MCP server exposes (e.g., recommending components or validating code) that the AI can invoke to perform a task.
From the discussion

A quick exchange settles one taxonomy question—Codex-class tools clearly count as agents—before shifting to a tooling comparison. Building a skill from existing company documentation is proposed as a more convenient alternative to an MCP server, and the follow-up reply accepts it as a viable route. The thread stays brief, with agreement rather than any sustained debate.

— Codex and similar coding tools belong in the 'agent' category, not a separate class.
— When a company already maintains documentation, generating a skill from it may be simpler than building an MCP server, and the reply grants that approach as workable.
Featured comments
汪汪队首席上单

Are Codex and those things considered agents?

ErpanOmer

Definitely counts, yes.

wenps

Why not just add a skill instead? If the company has documentation, wouldn't generating a skill be more convenient?

ErpanOmer

That would work too.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗