📌Overview

Purpose: To enhance React components with semantic metadata, making them understandable by AI agents and automation tools.

Overview: Agentify Components provides a framework that adds a semantic layer to UI components, allowing AI assistants to understand their functions, interactions, and data handling. It achieves this by registering metadata through decorators, which enables components to become "self-describing" without modifying their behavior.

Key Features:

Component Metadata Registration: Allows developers to define what a component does and how it behaves, enhancing the component's description for AI systems.
Standardized Schema Provision: Establishes consistent metadata structures across different component types, facilitating better integration with AI tools.
MCP Server Generation: Automatically generates configuration files for a Model Context Protocol (MCP) server at build time, streamlining the integration of AI models with external data sources.

Agentify Components

A framework for adding semantic metadata to React components, making them "agent-aware" for AI systems and automation tools.

Overview

Agentify Components addresses the challenge of making UI components understandable to AI agents. AI assistants interacting with web applications generally lack context about component functions, interactions, and data handled.

This framework adds a semantic layer to your components via decorators that:

Register component metadata – Define what a component does and how it behaves
Provide a standardized schema – Create consistent metadata structures for different component types
Generate configuration files – Create an MCP server at build time

🚀 Note: This framework focuses on component metadata rather than behavior modification. It makes your components "self-describing" to AI systems without changing their functionality.

Installation

npm install @anvosio/agentify-components

Roadmap

The current feature is MCP server generation. The next milestone is enabling the building of local tools that can be passed to LLMs alongside other tools, supporting both frontend and backend tool integration.

Core Concepts

Model Context Protocol (MCP)

MCP is an open standard developed by Anthropic that connects AI models with external data sources and tools. It uses a client-server architecture that allows AI assistants to access live data from systems like Google Drive, Slack, or databases, enhancing responses with up-to-date context. MCP simplifies integrations with a universal protocol for secure, standardized connections, replacing custom API connectors with reusable MCP servers.

Framework Architecture

The framework has four main parts:

Decorator (@AgentConfig) – Attaches metadata to components, including common fields and protocol-specific configurations.
Transformers – Adapt generic metadata into protocol-specific formats (currently MCP, with plans for more protocols).
Generators – Produce server file content based on transformed configurations, tailored to each protocol.
CLI Tool – Processes components, applying the appropriate transformer and generator to output the server file.

This design enables developers to define components once and support multiple protocols by adding new transformers and generators as needed.

Usage

Component Agentification Examples

Agentifying a Search Bar

import React from 'react';
import { AgentConfig } from '@anvos/agentify-components';

@AgentConfig({
  type: 'search',
  behavior: {
    type: 'api',
    endpoint: '/api/products/search',
    method: 'GET',
    queryParam: 'term'
  },
  description: 'Search for products in the catalog',
})
export class ProductSearch extends React.Component {
  render() {
    return (
      <input 
        type="search" 
        onChange={(e) => this.props.onSearch?.(e.target.value)}
        placeholder="Search..."
      />
    );
  }
}

Agentifying a Form

import React from 'react';
import { AgentConfig } from '@anvos/agentify-components';

@AgentConfig({
  type: 'form',
  behavior: {
    type: 'api',
    endpoint: '/api/auth/login',
    method: 'POST'
  },
  fields: [
    { name: 'username', type: 'text', required: true },
    { name: 'password', type: 'password', required: true }
  ],
  purpose: 'user-authentication',
  description: 'User login form for account access'
})
export class LoginForm extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.onSubmit}>
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">Login</button>
      </form>
    );
  }
}

Agentifying a Button

import React from 'react';
import { AgentConfig } from '@anvos/agentify-components';

@AgentConfig({
  type: 'button',
  behavior: {
    type: 'navigation',
    href: '/checkout'
  },
  label: 'Proceed to Checkout',
  description: 'Navigate to checkout page to complete purchase'
})
export class CheckoutButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.children}
      </button>
    );
  }
}

Generic Component Agentification Examples

Example 1: Functional Component with HOC

import { withAgentConfig } from '@anvos/agentify-components';

export const LoginButton = withAgentConfig({
  type: 'button',
  behavior: { type: 'api', endpoint: '/api/login', method: 'POST' },
  label: 'Login Button',
  selector: '#login-btn',
  description: 'Submits login form via API'
})(() => {
  return <button id="login-btn">Login</button>;
});

Example 2: Functional Component with Direct Property Assignment

import { AgentComponent } from '@anvos/agentify-components';

export const LoginButton2: AgentComponent = () => {
  return <button id="login-btn">Login</button>;
};

LoginButton2.agentConfig = {
  type: 'button',
  behavior: { type: 'api', endpoint: '/api/login', method: 'POST' },
  label: 'Login Button',
  description: 'Submits login form via API'
};

Example 3: Class Component with Decorator

import { AgentConfig } from '@anvos/agentify-components';

@AgentConfig({
  type: 'button',
  behavior: { type: 'navigation', href: '/home' },
  label: 'Home Button',
  description: 'Navigates to the home page'
})
class HomeButton extends React.Component {
  render() {
    return <button id="home-btn">Home</button>;
  }
}

export { HomeButton };

When to Use Each Approach

HOC Pattern (Example 1): Use to apply agent configuration to existing functional components or to maintain separation between component and config.
Direct Property Assignment (Example 2): Simplest for functional components defined and configured in the same file.
Decorator Pattern (Example 3): Cleanest for class components with TypeScript decorators.

MCP Tool Schema Type Mappings

The following JSON Schema to Zod type mappings apply when generating the MCP server:

JSON Schema Type	Zod Schema Type
`string`	`z.string()`
`number`	`z.number()`
`boolean`	`z.boolean()`
`array`	`z.array(z.string())`
`object`	`z.object({})`
`integer`	`z.number()`
`float`	`z.number()`
`date`	`z.date()`
`datetime`	`z.date()`
`time`	`z.date()`

Generating MCP Server

Create a generate.ts file in your project root with the following:

import { generateMCPServer } from '@anvos/agentify-components';
import * as components from './components/ButtonExample';

const componentList = Object.values(components);

console.log(componentList);
generateMCPServer(componentList, './mcpServer');

Add these scripts to your package.json:

"scripts": {
  "build:mcp": "ts-node ./generate.ts",
  "deploy:mcp": "echo 'STILL WORKING ON IT'"
}

Run the build script to generate the MCP server in /mcpServer directory:

npm run build:mcp

To deploy your MCP server (when ready):

npm run deploy:mcp

This deployment will make your MCP server available via a unique URL for AI systems and tools supporting MCP.

The project plans to optimize this process to return only needed tools to clients, avoiding unnecessary data overload.

Component Configuration Options

See the setup guide for detailed configuration options for each component type.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License. See the LICENSE file for details.