Agentify Components MCP Server

What is Agentify Components?

Agentify Components is a framework that adds semantic metadata to React components, making them “agent-aware” for AI systems and automation tools. It integrates with the Model Context Protocol (MCP) to generate a runnable MCP server from annotated components, enabling AI assistants to understand and interact with UI elements.

How to use Agentify Components?

Install via npm install @anvosio/agentify-components. Annotate React components using the @AgentConfig decorator, the withAgentConfig HOC, or a direct agentConfig property. Create a generate.ts script that calls generateMCPServer(componentList, './mcpServer'), then run npm run build:mcp to produce the MCP server; npm run deploy:mcp publishes it.

Key features of Agentify Components

• Adds semantic metadata to React components
• Supports three component types: search bars, forms, buttons
• Provides decorator, HOC, and property-assignment patterns
• Generates an MCP server at build time
• Architecture with Decorator, Transformers, Generators, and CLI Tool

Use cases of Agentify Components

• Make a product search component self-describing to AI agents
• Allow AI assistants to understand and submit login forms intelligently
• Enable AI to identify and trigger navigation or API buttons
• Build an MCP server that exposes frontend UI behaviors as tools for LLMs