get_shell
Generate an HTML skeleton for Shell A, B, C, or D with CSS/JS links and SLOT comments. Use this base to fill in content.
Instructions
Returns a ready-to-fill HTML skeleton for Shell A/B/C/D with all required CSS/JS links and SLOT comments. Copy-paste this as the base, then fill the SLOTs.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| shell | Yes |
Implementation Reference
- api/mcp.ts:587-590 (registration)The tool 'get_shell' is registered on the MCP server via server.tool() with a Zod schema enum for shell type (A/B/C/D).
server.tool("get_shell", "Returns a complete HTML skeleton (<!DOCTYPE> to </html>) for Shell A/B/C/D with all CSS/JS CDN links pre-filled and SLOT comments where you insert components. Use this as your starting template.", { shell: z.enum(["A","B","C","D"]) }, async ({ shell }) => { const s = SHELLS[shell]; return { content: [{ type: "text" as const, text: s ? `## Shell ${shell} — Ready-to-use HTML skeleton\nAll CSS/JS links point to CDN: ${CDN_BASE}\nAll icon <img src> must also use: ${CDN_BASE}/assets/icons/ICON.svg\n\n\`\`\`html\n${s}\n\`\`\`` : `Unknown: ${shell}` }] }; }); - api/mcp.ts:587-587 (schema)Input schema for get_shell accepts a single 'shell' parameter that must be one of 'A', 'B', 'C', or 'D'.
server.tool("get_shell", "Returns a complete HTML skeleton (<!DOCTYPE> to </html>) for Shell A/B/C/D with all CSS/JS CDN links pre-filled and SLOT comments where you insert components. Use this as your starting template.", { shell: z.enum(["A","B","C","D"]) }, async ({ shell }) => { - api/mcp.ts:587-590 (handler)Handler function that looks up the shell in the SHELLS record and returns the full HTML skeleton string wrapped in markdown.
server.tool("get_shell", "Returns a complete HTML skeleton (<!DOCTYPE> to </html>) for Shell A/B/C/D with all CSS/JS CDN links pre-filled and SLOT comments where you insert components. Use this as your starting template.", { shell: z.enum(["A","B","C","D"]) }, async ({ shell }) => { const s = SHELLS[shell]; return { content: [{ type: "text" as const, text: s ? `## Shell ${shell} — Ready-to-use HTML skeleton\nAll CSS/JS links point to CDN: ${CDN_BASE}\nAll icon <img src> must also use: ${CDN_BASE}/assets/icons/ICON.svg\n\n\`\`\`html\n${s}\n\`\`\`` : `Unknown: ${shell}` }] }; }); - api/mcp.ts:130-135 (helper)The SHELLS static data record contains the HTML skeletons for Shell A, B, C, and D. Each is a complete HTML document with pre-filled CDN links and SLOT comments.
const SHELLS: Record<string, string> = { A: `<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title><!-- PAGE TITLE --> — Log360 Cloud</title>\n <link rel="stylesheet" href="${CDN_BASE}/components/tokens.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/layout.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/topnavbar.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/line-tab.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/widget.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/table.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/responsive.css" />\n <style>html,body{height:100%;margin:0;overflow:hidden;}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden;}</style>\n</head>\n<body>\n<div class="app-shell">\n <!-- SLOT: TopNavBar (data-active-tab="Home") -->\n <!-- SLOT: Line Tab + Actions -->\n <div class="dash"><div class="dash__grid">\n <!-- SLOT: stat-row, tile-grid, dash__row widgets -->\n </div></div>\n</div>\n<script src="${CDN_BASE}/components/lib/echarts.min.js"></script>\n<script src="${CDN_BASE}/components/echarts-elegant-theme.js"></script>\n<script src="${CDN_BASE}/components/echarts-widget.js"></script>\n<script src="${CDN_BASE}/components/topnavbar.js"></script>\n<script src="${CDN_BASE}/components/line-tab.js"></script>\n<script src="${CDN_BASE}/components/icon-engine.js"></script>\n</body></html>`, B: `<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title><!-- PAGE TITLE --> — Log360 Cloud</title>\n <link rel="stylesheet" href="${CDN_BASE}/components/tokens.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/layout.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/topnavbar.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/sidemenu.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/header.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/classic-tab.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/table.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/form-input.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/form-dropdown.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/drawer.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/responsive.css" />\n <style>html,body{height:100%;margin:0;overflow:hidden;}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden;}.app-body{flex:1;display:flex;overflow:hidden;min-height:0;}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:0 16px;}</style>\n</head>\n<body>\n<div class="sidemenu-backdrop"></div>\n<div class="app-shell">\n <!-- SLOT: TopNavBar (data-active-tab="Settings") -->\n <div class="app-body">\n <!-- SLOT: aside.sidemenu -->\n <button class="sidemenu-expand" id="sidebarExpand"></button>\n <main class="main-content">\n <!-- SLOT: page-header -->\n <!-- SLOT: classic-tab -->\n </main>\n </div>\n</div>\n<script src="${CDN_BASE}/components/topnavbar.js"></script>\n<script src="${CDN_BASE}/components/sidemenu.js"></script>\n<script src="${CDN_BASE}/components/classic-tab.js"></script>\n<script src="${CDN_BASE}/components/table.js"></script>\n<script src="${CDN_BASE}/components/drawer.js"></script>\n<script src="${CDN_BASE}/components/icon-engine.js"></script>\n</body></html>`, C: `<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title><!-- REPORT TITLE --> — Reports — Log360 Cloud</title>\n <link rel="stylesheet" href="${CDN_BASE}/components/tokens.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/layout.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/topnavbar.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/sidemenu.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/header.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/classic-tab.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/line-tab.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/table.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/form-input.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/form-dropdown.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/drawer.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/rpt-chart-floater.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/responsive.css" />\n <style>html,body{height:100%;margin:0;overflow:hidden;}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden;}.app-body{flex:1;display:flex;overflow:hidden;min-height:0;}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:0 16px;}.classic-tab{flex-shrink:0;}.table-scroll-area{flex:1;overflow-y:auto;min-height:0;position:relative;}.actionbar{position:sticky;top:0;z-index:3;background:#fff;}</style>\n</head>\n<body>\n<div class="sidemenu-backdrop"></div>\n<div class="app-shell">\n <!-- SLOT: TopNavBar (data-active-tab="Reports") -->\n <div class="reports-quicklink"><!-- SLOT: line-tab quicklink --></div>\n <div class="app-body">\n <!-- SLOT: aside.sidemenu.sidemenu--type2 -->\n <button class="sidemenu-expand" id="sidebarExpand"></button>\n <main class="main-content">\n <!-- SLOT: page-header (Variant 3) -->\n <!-- SLOT: reports-input-row -->\n <!-- SLOT: classic-tab [chart ONLY] -->\n <div class="table-scroll-area">\n <!-- SLOT: actionbar Type 8 -->\n <!-- SLOT: data-table-wrap -->\n </div>\n </main>\n </div>\n</div>\n<script src="${CDN_BASE}/components/lib/echarts.min.js"></script>\n<script src="${CDN_BASE}/components/echarts-elegant-theme.js"></script>\n<script src="${CDN_BASE}/components/echarts-widget.js"></script>\n<script src="${CDN_BASE}/components/topnavbar.js"></script>\n<script src="${CDN_BASE}/components/sidemenu.js"></script>\n<script src="${CDN_BASE}/components/classic-tab.js"></script>\n<script src="${CDN_BASE}/components/line-tab.js"></script>\n<script src="${CDN_BASE}/components/table.js"></script>\n<script src="${CDN_BASE}/components/drawer.js"></script>\n<script src="${CDN_BASE}/components/rpt-chart-floater.js"></script>\n<script src="${CDN_BASE}/components/icon-engine.js"></script>\n</body></html>`, D: `<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title><!-- TITLE --> — Log360 Cloud</title>\n <link rel="stylesheet" href="${CDN_BASE}/components/tokens.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/layout.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/topnavbar.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/line-tab.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/header.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/widget.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/table.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/drawer.css" />\n <link rel="stylesheet" href="${CDN_BASE}/components/responsive.css" />\n <style>html,body{height:100%;margin:0;overflow:hidden;}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden;}.app-body{flex:1;display:flex;overflow:hidden;min-height:0;}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:0;}.split-layout{display:flex;flex:1;min-height:0;}.left-panel{flex:1;overflow-y:auto;padding:0 16px 24px;}.right-panel{width:380px;border-left:1px solid #E9E9E9;display:flex;flex-direction:column;}</style>\n</head>\n<body>\n<div class="app-shell">\n <!-- SLOT: TopNavBar -->\n <div class="app-body"><main class="main-content">\n <!-- SLOT: line-tab -->\n <div class="line-tab__body" style="flex:1;display:flex;flex-direction:column;min-height:0;">\n <div class="split-layout">\n <div class="left-panel"><!-- SLOT --></div>\n <div class="right-panel"><!-- SLOT --></div>\n </div>\n </div>\n </main></div>\n</div>\n<script src="${CDN_BASE}/components/lib/echarts.min.js"></script>\n<script src="${CDN_BASE}/components/echarts-elegant-theme.js"></script>\n<script src="${CDN_BASE}/components/topnavbar.js"></script>\n<script src="${CDN_BASE}/components/line-tab.js"></script>\n</body></html>`, };