Configures and integrates Agentation into a web application for visual annotations via MCP. Use when setting up agentation, visual annotations, or MCP-based browser interaction in a React/Next.js app.
Scanned 9/12/2026
Install to Claude Code
Skills Directorynpx -y skills add skeletorflet/opencode-supreme-setup --skill agentation-web --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Agentation Web?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/skeletorflet-agentation-web)More formats (shields.io, HTML) on the badges page.
---
name: agentation-web
description: Configures and integrates Agentation into a web application for visual annotations via MCP. Use when setting up agentation, visual annotations, or MCP-based browser interaction in a React/Next.js app.
---
# Agentation Web App Integration Skill
Use this skill to configure and integrate **Agentation** into a web application. Agentation allows you (the agent) to visually interact with the web app through the Agentation MCP server.
## 1. Prerequisites
1. **Agentation MCP Server:** Ensure the `agentation-mcp` server is running or configured in the `opencode.json` of the user.
2. **Environment:** Determine if the project is using React (Vite/CRA) or Next.js (Pages/App Router).
## 2. Installation
Install the required Agentation client package.
*If a specific package isn't provided by the user, assume standard integration scripts or `@agentation/client` if applicable. (Adjust according to the official documentation).*
```bash
npm install @agentation/client
```
## 3. Integration
Add the `<Agentation />` provider/component to the root of the application so it wraps the entire app and can capture the DOM.
### For Next.js (App Router - `app/layout.tsx`):
```tsx
import { Agentation } from '@agentation/client';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Agentation />
{children}
</body>
</html>
);
}
```
### For React (Vite - `src/main.tsx` or `src/App.tsx`):
```tsx
import { Agentation } from '@agentation/client';
function App() {
return (
<>
<Agentation />
<YourMainComponent />
</>
);
}
```
## 4. Verification
1. Ensure no build errors are introduced.
2. Remind the user to run the app (`npm run dev`) and ensure the visual annotations appear on interactive elements.
3. The agent can now use the `agentation` MCP tools to inspect and interact with the UI.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
