tkh-components
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@tkh-componentsbuild a volunteer page with hero, mission, testimonials, and footer"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
tkh-components-mcp
UI components, design tokens, and a UI/UX spec rebuilt from theknowledgehouse.org, served over the Model Context Protocol (MCP). Any MCP client (Claude Desktop, Claude Code, Cursor, etc.) can browse the components, customize them with props, and generate full pages in the TKH style.
No dependencies. Plain Node 18+. Nothing to
npm install.Transport: stdio (newline-delimited JSON-RPC 2.0). Protocol versions 2025-06-18, 2025-03-26, and 2024-11-05.
Quick start
cd tkh-components-mcp
node scripts/test.js # 14 protocol smoke tests
node scripts/export.js # writes components/<name>/component.{html,css,js} + dist/*.html
open dist/index.html # full homepage rebuildRelated MCP server: UI Toolkit MCP Server
Connect it to a client
Claude Code
claude mcp add tkh-components -- node /ABSOLUTE/PATH/tkh-components-mcp/server.jsClaude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json) / Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"tkh-components": {
"command": "node",
"args": ["/ABSOLUTE/PATH/tkh-components-mcp/server.js"]
}
}
}Tools
Tool | What it does |
| Lists all components (optional |
|
|
| Keyword search, e.g. "slider", "dropdown" |
|
|
| The full written UI/UX spec |
| Scraped content (nav, testimonials, news, footer...) as JSON |
| Composes |
Resources: tkh://design-spec, tkh://tokens.json, tkh://base.css, tkh://content.json, tkh://page.html, tkh://component/{name}, and tkh://raw/{name}.
Prompt: build_tkh_page(goal).
Components
name | category | notes |
| navigation | Gold underline hover, gray dropdowns, Donate ripple button, burger + fullscreen overlay below 992px |
| marketing | Lavender strip + rounded purple CTA |
| hero | Wave-line bg + 16:9 autoplay video (or |
| content | Centered H2 + paragraphs on off-white |
| content | 3-up uppercase label + 89px lavender icon circles |
| social-proof | Seamless-loop slider, 8s autoplay, auto-height, BACK n/total NEXT |
| content | Purple section, 3/2/1 responsive cards |
| navigation | Link columns w/ chevrons, contact icons, logo, social, badges |
| navigation | Lavender legal strip |
| primitive | Ripple button: |
Example call
{ "name": "render_page", "arguments": {
"title": "Volunteer with us",
"sections": [
"header",
{ "name": "announcement-bar", "props": { "text": "Mentor sign-ups close Friday!", "cta": { "label": "Sign Up", "href": "/volunteer" } } },
{ "name": "mission", "props": { "title": "Give back to the pipeline", "paragraphs": ["..."] } },
"testimonials", "footer", "legal-bar"
],
"outputPath": "./out/volunteer.html"
} }Layout
server.js MCP server (stdio)
src/base.js tokens -> CSS vars, globals, ripple button, reveal JS
src/registry.js component registry, renderPage, search
src/components/*.js one module per component: {name, description, props, css, js, render()}
src/tokens.json measured design tokens
src/content.json scraped homepage content (defaults for props)
components/_raw/*.html original markup captured from the live site (reference)
components/<name>/ exported static html/css/js per component
dist/ standalone previews (index.html = full page)
DESIGN_SPEC.md written UI/UX specNotes
Images and the hero video are hot-linked from the TKH CloudFront CDN. Swap them via props for your own project.
The originals use Bootstrap 4, Swiper, AOS, and jQuery. These rebuilds swap those for small vanilla CSS/JS with the same measured values and timings.
The mobile fullscreen menu is an approximation. The desktop layout was measured directly.
The brand, logos, photos, and copy belong to The Knowledge House. Use this as a design reference, or with their permission.
Available Tools
7 toolsget_componentGet componentARead-only
Get one component. format: "spec" (props schema + defaults), "html" (rendered markup), "css", "js", "bundle" (html+css+js, default), "standalone" (full HTML doc with base styles, ready to open), or "raw" (original markup captured from theknowledgehouse.org). Pass props to override the default content.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | ||
| props | No | Prop overrides. Call with format "spec" to see the available props. | |
| format | No | bundle |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already establishes the safety profile, so the bar is lower. The description goes beyond annotations by explaining what each output mode actually yields ("standalone" = full HTML doc with base styles ready to open; "raw" = original markup captured from theknowledgehouse.org), which is genuinely useful behavioral context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loaded with the core action, then a dense but efficient enumeration of formats. The single run-on sentence is information-rich with little waste, though the format list could be broken up for readability.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description carries the return-value burden and does so by describing what each format produces. Gaps remain around invalid-name behavior and how to discover available props, but for a read-only single-item getter this is largely complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is only 33%, so the description has to compensate and largely does: it defines every format value including the default ("bundle") and the special semantics of "standalone" and "raw", which the bare enum cannot convey. The props parameter is only lightly covered ("override the default content"), leaving some gap.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource ("Get one component") and clearly signals single-item retrieval, which distinguishes it from list_components and search_components without naming them. It falls short of a 5 because it never explicitly contrasts itself with those siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied rather than stated: the format enumeration and the note to pass props convey how to call it, but there is no explicit when-to-use-this-vs-alternatives guidance (e.g., versus get_design_spec or render_page). A reader must infer the context from the sibling names alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_design_specGet UI/UX specBRead-only
The full written UI/UX specification of theknowledgehouse.org homepage (layout, typography, colors, interactions, responsive rules).
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, so the safety profile is covered. The description usefully discloses the breadth of the payload (layout, typography, colors, interactions, responsive rules), but says nothing about output format (markdown vs structured), size, or whether it is scoped only to the homepage. With annotations carrying the behavioral baseline, this is adequate but thin.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single sentence, front-loaded with the resource and followed by a compact enumeration of what it contains. The parenthetical list is dense but earns its place; no filler or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a parameterless, read-only retrieval tool with no output schema, the description covers what is returned and its scope. The only gap is the return format, which an agent might want to know when planning how to consume the spec, but this is minor for a simple getter.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so the baseline is 4. The description correctly implies no input is required, and there are no parameters whose semantics could be missing.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific resource — the full written UI/UX specification of theknowledgehouse.org's homepage — and enumerates its contents (layout, typography, colors, interactions, responsive rules), so an agent knows exactly what it retrieves. It does not explicitly distinguish itself from get_design_tokens or get_site_content, but the 'full specification' framing implies broader coverage than tokens alone.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no when-to-use guidance, no statement of prerequisites, and no routing to or away from siblings such as get_design_tokens (which presumably returns the token subset) or get_site_content. The scope is implied by the content description, but the agent must infer when this tool is preferable to the other design-related tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_design_tokensGet design tokensARead-only
Design tokens measured from the live site (colors, Lato type scale, spacing, layout, motion, scrollbar). format "json" (default), "css" (CSS custom properties only), or "base-css" (tokens + global styles + ripple buttons + reveal animation).
| Name | Required | Description | Default |
|---|---|---|---|
| format | No | json |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already tells the agent this is a safe read, so the bar is lower. The description adds that tokens are 'measured from the live site,' which is meaningful provenance context, but says nothing about freshness, caching, or auth requirements.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two dense sentences, front-loaded with the resource and provenance, then the format options. Every clause earns its place, though the parenthetical lists are packed tight.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description must convey returns, and it does via the per-format breakdown of what each mode produces. It is largely sufficient for a single-parameter read tool, lacking only freshness or caveat notes.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 0% for the single format parameter, so the description carries the full burden and does — explaining that 'json' is the default, 'css' yields CSS custom properties only, and 'base-css' adds global styles, ripple buttons, and reveal animation. This is exactly the meaning the bare enum lacks.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific resource (design tokens) and its provenance (measured from the live site), enumerating the token categories covered (colors, type scale, spacing, layout, motion, scrollbar). An agent can tell this retrieves design tokens rather than components or page content, though it never names siblings like get_design_spec to sharpen the distinction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No statement of when to prefer this over get_design_spec, get_site_content, or the component tools. The format values imply different output contexts, but there is no explicit when-to-use or when-not-to-use guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_site_contentGet site contentARead-only
Structured content scraped from the homepage (nav tree, announcement, mission, pillars, 5 testimonials, news, footer links, social, badges). Useful as a template for your own props.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already establishes that this is a safe read, so the bar is lower. The description adds genuine value by disclosing the returned payload's structure, which matters because there is no output schema. It does not mention freshness, caching, or whether the scraped content can go stale.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the payload contents before the practical usage hint. The long parenthetical list is dense but earns its place given the absent output schema.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema and no parameters, the description carries the burden of describing what comes back, and it does so item by item. Minor gaps remain around content freshness and whether the shape is stable, but an agent has enough to call this correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so the baseline is 4. There is nothing parameter-related for the description to clarify, and it correctly spends no words on inputs.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a clear verb+resource (retrieving structured homepage content) and enumerates exactly what that content contains (nav tree, announcement, mission, pillars, testimonials, news, footer links, social, badges). It is precise about scope, though it never distinguishes itself from siblings like get_component or render_page.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Useful as a template for your own props' implies one intended use case, which gives some guidance. However, there is no explicit when-to-use vs. when-not, no mention of sibling tools, and no prerequisites, so the agent must infer the rest.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList componentsARead-only
List every saved TKH component (name, title, category, description, prop names). Optionally filter by category.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | navigation | marketing | hero | content | social-proof | primitive |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already tells the agent this is a safe read, and the description adds valuable context by enumerating the fields returned (name, title, category, description, prop names), which matters since no output schema exists. It doesn't cover pagination or result-volume behavior, keeping it below a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight clauses with the core action and its return payload front-loaded, then the optional filter. Every word earns its place with no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read-only listing tool with annotations covering its safety profile and the return fields named, the definition is essentially complete. Only minor gaps remain, such as result volume or how results are ordered.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the single category parameter lists its allowed values in the schema, so the schema carries the semantics. The description only restates that the filter is optional, adding little beyond what's already documented.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description gives a specific verb+resource ('List every saved TKH component') and even enumerates the returned fields, so its purpose is unambiguous. It does not explicitly distinguish itself from the sibling search_components, so it falls short of a 5, but a reader can infer the difference between a full listing and a search.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Optionally filter by category' implies the usage context (browse all when unfiltered, narrow when a category is known), but there is no explicit when-to-use statement or reference to alternatives like search_components for targeted lookups. Usage is left to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_pageRender pageA
Compose components into one standalone HTML page (base styles, Lato font, per-component CSS/JS deduped). sections defaults to the full homepage order. Optionally write the result to outputPath.
| Name | Required | Description | Default |
|---|---|---|---|
| title | No | ||
| extraCss | No | CSS appended after component styles | |
| sections | No | Defaults to ["header","announcement-bar","hero-video","mission","pillars","testimonials","news-grid","footer","legal-bar"] | |
| outputPath | No | If set, the HTML is written to this file path |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations declare readOnlyHint=false and destructiveHint=false, and the description usefully explains the non-read side effect: it only writes when outputPath is set. It also adds real behavioral context (dedupe of per-component CSS/JS, base styles, font). However, it never addresses whether an existing file at outputPath is overwritten, which is the key risk for this mutation, so it stops short of full transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences, front-loaded with the core action, then defaults, then the optional write. Every clause carries information; nothing is redundant padding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, and the description implicitly conveys a return value (the composed HTML, unless written to disk). Combined with the defaults and the dedupe/composition notes, an agent has enough to call it. The unaddressed 'title' parameter and overwrite semantics keep it from being fully complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 75%, so most parameters are already documented in the schema (extraCss, sections default array, outputPath). The description largely restates those ('sections defaults to the full homepage order', 'optionally write the result to outputPath') and leaves 'title' unexplained in both places. Baseline 3 applies when the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('compose components into one standalone HTML page') plus the concrete output traits (base styles, Lato font, deduped CSS/JS). This is clearly distinct from the read-oriented siblings (get_component, list_components, get_design_tokens), so an agent can route to it without ambiguity.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description never says when to call this versus gathering components with the sibling tools, nor what prerequisites exist (e.g. components must first be resolved). It mentions the sections default, which is parameter behavior rather than usage guidance. No exclusions or alternatives are named.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsSearch componentsARead-only
Keyword search across component names, descriptions, categories and props (e.g. "slider", "dropdown", "cards").
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already establishes this as a safe read, so the description's added value is limited to the fact that matching spans multiple fields rather than just names. It says nothing about result limits, ordering/relevance, or pagination behavior, all of which matter for a search tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One sentence, front-loaded with verb+resource, with the searchable-field list and inline examples folded in without any filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a one-parameter, read-only search with no output schema, the description is nearly sufficient: purpose, scope of matching, and query examples are covered. Only the shape of results (fields returned, ranking, limits) is left unstated, which is a minor gap here.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 0% and the single query parameter is an undescribed string, so the description carries the load — and it does so by explaining which fields the keyword matches against and giving concrete example terms ("slider", "dropdown", "cards"). That meaningfully clarifies how to phrase the argument beyond the bare type.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (keyword search) and resource (components), and enumerates the searched fields (names, descriptions, categories, props), which plainly separates it from get_component. It never names a sibling or scope difference explicitly, so it stays short of a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is only implied: the word 'search' plus query examples signal lookup-by-keyword, but there is no guidance on when to prefer this over list_components or get_component, nor any note on exclusions such as empty results or exhaustive listing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
7 tool updates
v1.0.0- First observed
get_component - First observed
get_design_spec - First observed
get_design_tokens - First observed
get_site_content - First observed
list_components - First observed
render_page - First observed
search_components
TDQS
Scored across 7 tools
Most tools are clearly distinct (get_component for one item, get_design_tokens, get_design_spec, get_site_content, render_page all target different resources). search_components and list_components overlap slightly since list can filter by category while search does keyword matching, but the descriptions clarify the boundary.
Consistent snake_case verb_noun pattern throughout: search_components, list_components, get_component, get_design_tokens, get_design_spec, get_site_content, render_page. The 'get_' family and the search/list/render verbs are used predictably.
Seven tools is well-scoped for a component-library/reference server, with each tool earning its place (discovery, retrieval, tokens, spec, content, composition). No redundant or thin entries.
The read-and-compose surface is strong: discovery (search/list), retrieval with multiple output formats (get_component), design system data (tokens/spec/content), and page composition (render_page). There is no write/create/update path for components, but the server's apparent purpose is serving reference components, so this is a minor gap.
Maintenance
Related MCP Connectors
Create, edit, preview, publish, and manage web pages from MCP-capable AI clients.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Jinn gateway MCP — brand DNA, brand kits, design systems, and agency tools behind one bearer token.
Public read-only MCP for products, frameworks, guides, methodology, and blog metadata.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceProvides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.284 npmMIT
- AlicenseAqualityFmaintenanceComprehensive MCP server for end-to-end UI development, offering tools to generate components, manage design tokens, audit accessibility, autofix issues, inspect live pages, compare screenshots, and more across multiple frameworks.1311 npmMIT
- FlicenseNot gradedqualityBmaintenanceEnables AI coding assistants to search, discover, and retrieve UI HUB components, source code, dependencies, templates, and animations via MCP.-
- FlicenseNot gradedqualityBmaintenanceEnables coding agents to search and retrieve 500+ production-ready React and Tailwind UI sections, page recipes, and brand-styled components over MCP, along with imagery and social post templates.-