es flexibility—developers can define components once and support multiple protocols by adding new transformers and generators as needed. ## Usage ### Specific type Component Agentification Examples (NEEDS TO BE UPDATED) #### Agentifying a Search Bar ```jsx import React from 'react'; import { AgentConfig } from '@anvos/agentify-components'; // Add semantic metadata using decorator @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 ( this.props.onSearch?.(e.target.value)} placeholder="Search..." /> ); } } ``` #### Agentifying a Form ```jsx import React from 'react'; import { AgentConfig } from '@anvos/agentify-components'; // Add semantic metadata using decorator @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 ( ); } } ``` #### Agentifying a Button ```jsx import React from 'react'; import { AgentConfig } from '@anvos/agentify-components'; // Add semantic metadata using decorator @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 ( ); } } ``` ### Generic Component Agentification Examples The `@anvos/agentify-components` package provides several ways to add agent configuration to your React components: #### Example 1: Functional Component with HOC For functional components, you can use the `withAgentConfig` higher-order component to wrap your component with agent configuration: ```tsx 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 ; }); ``` #### Example 2: Functional Component with Direct Property Assignment Alternatively, you can create a functional component and directly assign the `agentConfig` property: ```tsx import { AgentComponent } from '@anvos/agentify-components'; export const LoginButton2: AgentComponent = () => { return ; }; 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 For class components, you can use the `@AgentConfig` decorator directly: ```tsx 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 ; } } export { HomeButton }; ``` ### When to Use Each Approach - **HOC Pattern (Example 1)**: Best for when you need to apply agent configuration to existing functional components or when you w

Agentify Components

Comments