drio
Open app

Agentify Components

Source

These are the components that a user can download to create MCP servers on the fly

Catalog onlyCatalog onlySTDIO

Overview

Agentify Components is a framework designed to enhance React components by adding semantic metadata, making them "agent-aware" for AI systems and automation tools. This allows AI assistants to better understand and interact with web applications.

To use Agentify Components, install the package via npm and apply the @AgentConfig decorator to your React components to add metadata that describes their behavior and purpose.

  • Adds semantic metadata to React components for AI understanding. - Supports multiple component types including search bars, forms, and buttons. - Generates configuration files for creating MCP servers at build time.
  1. Enhancing search functionality in web applications for AI assistants.
  2. Streamlining user authentication processes through agentified forms.
  3. Improving navigation and action handling with agent-aware buttons.

Add to your AI client

Use these steps to connect Agentify Components in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "agentify-components-anvosio": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-agentify-components-anvosio"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "agentify-components-anvosio": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-agentify-components-anvosio"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "agentify-components-anvosio": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-agentify-components-anvosio"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "agentify-components-anvosio": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-agentify-components-anvosio"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "agentify-components-anvosio": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-agentify-components-anvosio"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "agentify-components-anvosio": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-agentify-components-anvosio"
      ]
    }
  }
}

FAQ

Can I use Agentify Components with any React application?

Yes! Agentify Components can be integrated into any React application to enhance component metadata.

Is there a cost associated with using Agentify Components?

No, Agentify Components is open-source and free to use under the MIT License.

How does Agentify Components improve AI interactions?

By providing a standardized schema and metadata, it allows AI systems to understand the context and functionality of UI components, leading to better interactions.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2747,"uuid":"d3b62a1c-104d-48c3-89d6-bc2822e25054","name":"agentify-components","title":"Agentify Components","description":"These are the components that a user can download to create MCP servers on the fly","avatar_url":"https://avatars.githubusercontent.com/u/202586732?v=4","created_at":"2025-03-14T00:57:35.173Z","updated_at":"2025-03-14T01:36:45.604Z","status":"created","author_name":"anvosio","author_avatar_url":"https://avatars.githubusercontent.com/u/202586732?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/anvosio/agentify-components","target":"_self","content":"$29","summary":"$2a","img_url":"https://camo.githubusercontent.com/e0186db3800308c4e129f0ca229f65371406e39a1080a921efd7e1cae9b7e7a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e706d2d76302e312e302d626c75652e737667","type":null,"metadata":"{\"star\":\"12\",\"license\":\"MIT license\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-20 14:48:49\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools