get_component_code
Retrieve complete HTML code and information for specific KRDS design system components to implement Korean government digital service interfaces.
Instructions
특정 KRDS 컴포넌트의 전체 HTML 코드와 정보를 가져옵니다.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | 컴포넌트 이름 (예: button, text_input, modal) |
Implementation Reference
- src/tools/component-search.ts:39-48 (handler)Core handler function that loads all components and finds the matching one by name, normalizing underscores to dashes.
export async function getComponentCode( loader: KRDSLoader, componentName: string ): Promise<KRDSComponent | null> { const allComponents = await loader.loadComponents(); return allComponents.find(c => c.name === componentName || c.name === componentName.replace(/_/g, '-') ) || null; } - src/index.ts:121-134 (registration)Tool registration in getTools() including name, description, and input schema definition.
{ name: 'get_component_code', description: '특정 KRDS 컴포넌트의 전체 HTML 코드와 정보를 가져옵니다.', inputSchema: { type: 'object', properties: { componentName: { type: 'string', description: '컴포넌트 이름 (예: button, text_input, modal)', }, }, required: ['componentName'], }, }, - src/index.ts:235-266 (handler)MCP server wrapper handler that validates input, calls the core getComponentCode, formats the response with component details, HTML code, and usage instructions.
private async handleGetComponentCode(args: any) { if (!args?.componentName) { throw new Error('componentName이 필요합니다.'); } const component = await getComponentCode(this.loader, args.componentName); if (!component) { return { content: [{ type: 'text', text: `컴포넌트 "${args.componentName}"을 찾을 수 없습니다.`, }], }; } const text = `# ${component.name}\n\n` + `**카테고리:** ${component.category}\n` + `**설명:** ${component.description || '설명 없음'}\n\n` + `## HTML 코드\n\n` + `\`\`\`html\n${component.htmlCode}\n\`\`\`\n\n` + `## 사용법\n\n` + `1. KRDS CSS 파일을 프로젝트에 포함시킵니다:\n` + ` \`<link rel="stylesheet" href="node_modules/krds-uiux/resources/css/krds.css">\`\n\n` + `2. 위 HTML 코드를 복사하여 사용하세요.\n\n` + `3. 필요에 따라 클래스와 내용을 수정하세요.`; return { content: [{ type: 'text', text }], }; }