tkh-components
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": false
} |
| prompts | {
"listChanged": false
} |
| resources | {
"subscribe": false,
"listChanged": false
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| list_componentsA | List every saved TKH component (name, title, category, description, prop names). Optionally filter by category. |
| get_componentA | 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. |
| search_componentsA | Keyword search across component names, descriptions, categories and props (e.g. "slider", "dropdown", "cards"). |
| get_design_tokensA | 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). |
| get_design_specB | The full written UI/UX specification of theknowledgehouse.org homepage (layout, typography, colors, interactions, responsive rules). |
| get_site_contentA | 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. |
| render_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. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| build_tkh_page | Guides the model to assemble a new page from TKH components and tokens. |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| design-spec | |
| tokens | |
| base-css | |
| content | |
| page | |
| header | White 96px header. Logo left, bold purple nav links right with a gold hover underline that grows from the center (scaleX 0 to 1, 0.3s), Superfish-style gray dropdown panels, and a gold square "Donate" button with a purple ripple fill. Below 992px the nav collapses into a 2-line burger that opens a fullscreen purple overlay. |
| raw-header | |
| announcement-bar | 80px lavender (#C0BFF8) strip directly under the header. Centered row: 20px black message (emoji-friendly) + 16px gap + a 151x52 purple "Apply Today" button with 8px radius and a white ripple fill. Stacks vertically below 768px. |
| raw-announcement-bar | |
| hero-video | Full-width stage (about 641px tall on desktop) with a light-gray background image of flowing lavender wave-line art, and a centered 16:9 video (max 926px wide) that autoplays muted on loop. On the live site the video is a pre-rendered timeline slideshow (giant year, purple column with rotated year, B&W photo, purple caps subtitle, thick black rule, bold caption). Swap `video` for your own MP4, or pass `image` to show a still instead. |
| raw-hero-video | |
| mission | Warm off-white (#F6F3F1) section. Centered column (max about 979px). H2 36px/45px Lato Black, then paragraphs at 18px/27px in black, centered, with 48px outer margin and 30px between paragraphs. Each block fades in on scroll. |
| raw-mission | |
| pillars | Three equal columns inside a ~785px row on off-white. Each column: uppercase H3 label (21px, weight 900, nowrap, 16px below) above an 89x89 lavender circle icon with a dark purple glyph. Collapses to one column below 768px with 48px gaps. |
| raw-pillars | |
| testimonials | Wave-line background section with a left-aligned slider (~83% width on desktop). Each slide is two halves: left = portrait (30vh tall, background-size contain; source images are circular headshots with a thin gold ring), right = min-height 420px, vertically centered: "TESTIMONIALS" H2 (36px, 900, uppercase, 48px below), the quote in 18px/27px #525252 (48px below), the name in black prefixed with a long dash, and the role line in black. Seamless loop, 1000ms slide, 8s autoplay that keeps running after interaction, auto-height. Centered controls below: BACK n/total NEXT (13px bold, 2px tracking, uppercase). |
| raw-testimonials | |
| news-grid | Deep purple (#342459) section. Centered column (~75% width, 48px padding). White H2 + 18px white subtitle. Cards flow 3 across at 1200px+, 2 across at 992px+ (an odd last card is centered), and 1 below that. Each card is a single link that opens in a new tab: a 210px-tall cover image (no radius, no shadow) + a centered white 20px/28px weight-500 title, 16px above. |
| raw-news-grid | |
| footer | Light gray (#E2E2E2) footer with 48px vertical padding. Link columns have 21px Lato Black headings (24px below) and 16px black links with small chevron markers (8px apart, 20px indent). The Contact column uses map-pin and envelope icons. The brand block holds a large horizontal logo, 5 black circular social icons (max 40px, evenly spaced) and 2 trust badges. At 1200px+ the brand block is the first (left) column of a ~83% wide row; below that it moves to the bottom and centers. |
| raw-footer | |
| legal-bar | Last strip of the page: lavender (#C0BFF8), 16px vertical padding, 14px text. One centered line: uppercase black links ("TERMS OF USE", "PRIVACY POLICY"), then a gray copyright line. |
| raw-legal-bar | |
| button | Square-cornered Lato Bold button. On hover a circle grows from the cursor entry point (width/height 0.6s) and floods the button. primary = gold #FFC20A with purple text that floods purple and turns the text white. tertiary = purple #332459 with white text that floods white and turns the text purple. Sizes: sm (16px, 13px 27px padding), md (18px, 20px 60px padding). rounded adds an 8px radius (used only on the "Apply Today" button). |
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.