Agentify Components

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

FAQ from Agentify Components

What does Agentify Components do?

It adds a semantic layer to React components so that AI agents can understand their purpose, behavior, and data handling without changing component functionality.

What component types are supported?

Search bars, forms, and buttons are supported. Currently, behaviors are limited to API and navigation actions.

How do I annotate a component?

Use the @AgentConfig decorator for class components, the withAgentConfig HOC for functional components, or assign an agentConfig property directly to a functional component.

How is the MCP server generated?

Add a generate.ts script that imports your components and calls generateMCPServer(componentList, './mcpServer'). Run npm run build:mcp to generate the server files.

Is Agentify Components only for class components?

No. Functional components can be annotated using the HOC (withAgentConfig) or the direct property assignment pattern.