setup_project

Instructions

Implementation Reference

• api/mcp.ts:566-569 (handler)

  Handler function for setup_project MCP tool. It accepts a 'feature_name' parameter, sanitizes it, and returns a static SETUP_PROJECT string with variable replacements.

  server.tool("setup_project", "⚠️ CALL THIS FIRST before any other tool. Returns the complete build instructions, CDN URLs, available CSS/JS files, and workflow steps. You MUST follow the workflow it returns. Output is always a SINGLE index.html file with all assets loaded from CDN.", { feature_name: z.string().describe("Name for the page being built (e.g. 'windows-startup', 'dashboard', 'alerts'). Used only as a label — no folders are created.") }, async ({ feature_name }) => {
    const name = feature_name.replace(/[^a-zA-Z0-9_-]/g, "-").toLowerCase();
    return { content: [{ type: "text" as const, text: SETUP_PROJECT.replace(/your-feature-name/g, name).replace(/\$FEATURE/g, name) }] };
  });

• api/mcp.ts:566-566 (schema)

  Input schema for setup_project: a single required 'feature_name' string parameter, validated with Zod.

  server.tool("setup_project", "⚠️ CALL THIS FIRST before any other tool. Returns the complete build instructions, CDN URLs, available CSS/JS files, and workflow steps. You MUST follow the workflow it returns. Output is always a SINGLE index.html file with all assets loaded from CDN.", { feature_name: z.string().describe("Name for the page being built (e.g. 'windows-startup', 'dashboard', 'alerts'). Used only as a label — no folders are created.") }, async ({ feature_name }) => {

• api/mcp.ts:145-186 (helper)

  The static SETUP_PROJECT constant containing the full build instructions, CDN URLs, workflow steps, and DO NOT rules returned by the tool.

  const SETUP_PROJECT = `# Elegant 1.0 — Build Instructions
  
  ## How This Works
  You are connected to the Elegant Agent MCP server. ALL component HTML, wiki documentation, page blueprints, icons, and screenshots are available ONLY through the MCP tools listed below. There are NO local files to read — everything comes from this server.
  
  ## CDN Base URL
  \`\`\`
  ${CDN_BASE}
  \`\`\`
  
  ## Workflow (follow this order)
  1. ✅ You already called setup_project — good
  2. Call \`get_page_blueprint(page)\` — get exact layout for the target page
  3. Call \`get_screenshot(query)\` — see what the real page looks like
  4. Call \`get_recipe(shell)\` — get shell type (A/B/C/D) instructions
  5. Call \`get_shell(shell)\` — get the HTML skeleton with CDN links
  6. Call \`get_component(name)\` — get HTML for each component you need
  7. Call \`get_topnavbar()\` — get the complete TopNavBar HTML
  8. Call \`get_chart_snippet(chart_type)\` — get chart JS code
  9. Write a SINGLE index.html file — that's your only output
  
  ## Output Rules
  - Output = **ONE index.html file** — nothing else
  - ALL CSS via CDN: \`<link href="${CDN_BASE}/components/FILENAME.css">\`
  - ALL JS via CDN: \`<script src="${CDN_BASE}/components/FILENAME.js">\`
  - ALL icons via CDN: \`<img src="${CDN_BASE}/assets/icons/ICON.svg">\`
  - Logo: \`<img src="${CDN_BASE}/assets/icons/logo-log360.svg">\`
  - Fonts load automatically via tokens.css
  
  ## Available CSS Files
  tokens.css, layout.css, topnavbar.css, sidemenu.css, header.css, classic-tab.css, line-tab.css, table.css, table-type2.css, form-input.css, form-dropdown.css, drawer.css, rpt-chart-floater.css, widget.css, echarts-widget.css, note-container.css, notification-banner.css, responsive.css
  
  ## Available JS Files
  topnavbar.js, sidemenu.js, classic-tab.js, line-tab.js, table.js, form-input.js, form-dropdown.js, drawer.js, rpt-chart-floater.js, widget.js, echarts-widget.js, echarts-elegant-theme.js, icon-engine.js, notification-banner.js, lib/echarts.min.js
  
  ## ⛔ DO NOT
  - Do NOT search for or read any local files — no .md files, no data/ folders, no local HTML. Everything comes from MCP tools
  - Do NOT create folders or copy files
  - Do NOT write inline CSS for component styles
  - Do NOT write inline SVG when an icon file exists
  - Do NOT look for reference HTML in the user's workspace — use get_page_blueprint and get_screenshot instead
  - ALL data you need comes from the MCP tools above — you have everything`;

• api/mcp.ts:563-569 (registration)

  Registration of the setup_project tool on the MCP server via the createMcpHandler callback. It's registered as the first tool with the name 'setup_project'.

  const handler = createMcpHandler(
    (server) => {
      /* 1. setup_project */
      server.tool("setup_project", "⚠️ CALL THIS FIRST before any other tool. Returns the complete build instructions, CDN URLs, available CSS/JS files, and workflow steps. You MUST follow the workflow it returns. Output is always a SINGLE index.html file with all assets loaded from CDN.", { feature_name: z.string().describe("Name for the page being built (e.g. 'windows-startup', 'dashboard', 'alerts'). Used only as a label — no folders are created.") }, async ({ feature_name }) => {
        const name = feature_name.replace(/[^a-zA-Z0-9_-]/g, "-").toLowerCase();
        return { content: [{ type: "text" as const, text: SETUP_PROJECT.replace(/your-feature-name/g, name).replace(/\$FEATURE/g, name) }] };
      });