The Constructor

Mission Role & Focus

The Constructor specializes in agent capability extension, writing custom Node.js MCP tools to bridge the gap between the agent's context and external compiled components or private APIs.

The Target Feature

A fullscreen Slide Presentation Viewer modal for a topic. The viewer UI must import and use pre-existing components (e.g., <Button>, <Card>, <Icon>) from our pre-compiled design system package.

The Agent Friction

The design system library is precompiled and lives outside the active codebase (mocked in libs/design-system or node_modules). Because the source files are compiled, the agent cannot read the source .tsx files directly. Left alone, the agent will guess components properties, import non-existent files, or write duplicate elements, causing compiler and style errors.

Explorer Setup & Pointers

• Design System Location: Install the @hypersolid/hyperbytes-ui using the pnpm add http://192.168.128.222:5173/hyperolid-hyperbytes-ui-1.0.0.tgz command.
• Initialize the MCP Server: In a new directory /mcp-component-search, set up a basic Node.js TypeScript project:

  mkdir mcp-component-search
  cd mcp-component-search
  npm init -y
  npm install @modelcontextprotocol/sdk
  npm install -D typescript @types/node tsx
  npx tsc --init

• Build the Search Tool: Prompt the agent to write a minimal MCP server in index.ts registering a search_components tool. The tool should scan the @hypersolid/hyperbytes-ui package and build an index of it, describing relevant components with short description, so that the agent can easily query for them. That way, the agent does not need to perform exhasutive file system searches every time it needs to know about a component, and it could also easily get an overview of all of the available components.
• Configure the MCP Server: Expose the server in your local agent config. This differes per harness, so look up your harness's documentation, but it probably involves adding some JSON like the below to a settings file:

  "mcpServers": {
    "component-search": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/mcp-component-search/index.ts"]
    }
  }

• Let the Agent Query: Prompt the agent to propose a change using the design system (or make a rule that it should always use the design system so that you don't need to prompt that all the time). The agent should use the search_components tool to discover the correct imports and properties of the components instead of guessing or writing non-existent imports.
• Bonus: Custom Workflows: In addition to tool extension (MCP), you can also extend the agent with custom developer-triggered slash commands. Try creating a custom workflow (e.g., .agent/workflows/component-scaffold.md in Antigravity or .claude/workflows/component-scaffold.js in Claude Code) that scaffolds a new component UI, registers it, and validates imports.

Mission Objectives

1. Code and run a custom Node.js MCP server using the @modelcontextprotocol/sdk.
2. Propose the slide viewer by running /opsx:propose slide-viewer. Show that the agent calls search_components to retrieve imports and options instead of guessing.
3. Apply the change and confirm that the slides render correctly using the pre-compiled elements.
4. Discuss in the Show-and-Tell how building custom MCP servers or registering custom harness workflows (like the bonus task) unlocks private structures and automates developer intent.