skills.rest
armanisadeghi
armanisadeghiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-tool-renderer

Create hardcoded MCP tool renderers with inline and overlay views for the AI Matrx chat interface.

2|1|Updated Aug 24, 2024
Search Tags:#frontend#react#rendering#MCP#registry#tool-output#tool-renderer
One-click install
npx skills add https://github.com/armanisadeghi/ai-matrx --skill create-tool-renderer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-tool-renderer
Source: https://github.com/armanisadeghi/ai-matrx/tree/main/.cursor/skills/create-tool-renderer
Command: npx skills add https://github.com/armanisadeghi/ai-matrx --skill create-tool-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the creation of hardcoded MCP tool renderers to reliably visualize tool outputs inside the chat interface, ensuring consistent UI and registry integration.

Core Features & Use Cases

  • Inline previews and full-screen overlay components that consume ToolLifecycleEntry
  • Registry integration with standardized headers via getHeaderSubtitle/getHeaderExtras
  • Supports both deterministic and dynamic content via paired Inline/Overlay patterns

Quick Start

Provide the MCP tool name and a sample ToolLifecycleEntry to generate a production-ready inline and overlay renderer.

Frequently Asked Questions about create-tool-renderer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create custom React renderers for MCP tool outputs in a chat interface?▼

To create custom React renderers for MCP tool outputs, you need components that consume ToolLifecycleEntry data to generate inline previews and full-screen overlays, enforcing the ToolRendererProps contract for consistent UI integration.

How do I render tool output headers with custom subtitles and extras in a React chat UI?▼

Rendering tool output headers with custom subtitles and extras requires using getHeaderSubtitle and getHeaderExtras functions within your renderer components to standardize header display while maintaining registry integration.

How do I style MCP tool renderers to support dark mode using Tailwind?▼

Styling MCP tool renderers for dark mode using Tailwind involves applying semantic Tailwind classes to your inline preview and overlay components, ensuring visual consistency across light and dark themes without hardcoding color values.

What is the best way to structure inline previews and full-screen overlays for tool lifecycle data?▼

The best way to structure inline previews and full-screen overlays for tool lifecycle data is using paired Inline and Overlay component patterns, which support both deterministic and dynamic content consumption from a single ToolLifecycleEntry source.

How do I integrate custom tool renderers into an existing component registry?▼

Integrating custom tool renderers into an existing component registry requires adhering to the ToolRendererProps contract and using standardized header rendering functions, ensuring your hardcoded renderers are properly registered and discoverable by the chat interface.

Can I generate a production-ready tool renderer from a sample ToolLifecycleEntry?▼

Yes, you can generate production-ready inline and overlay renderers by providing the MCP tool name and a sample ToolLifecycleEntry, which serves as the input template for the component generation process.

Related Skills

Explore More Software Engineering Skills→
cshyangcshyang

trigger-setup

Initialize Trigger.dev with npx trigger init and generate trigger.config.ts.

Community
Intermediate
Probably-GroupProbably-Group
3

tailwindcss

Generate Tailwind CSS configuration and UI components with static class names.

Official
Advanced
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
jg-chalk-iojg-chalk-io

moai-domain-figma

Orchestrate MCP-enabled Figma-to-code workflows for design-system integration.

Community
Advanced