You probably haven't audited your MCP servers or AI agent skills. This tool does it for you.

Naufal Afif — Mon, 23 Mar 2026 10:15:57 +0000

New MCP servers and AI agent tools ship every week. Cursor rules, Claude skills, agent instructions — the ecosystem is moving faster than anyone can manually review.

Even if you check things before installing, updates can introduce new behavior. And with tools being forked, modified, and reshared — you want something watching continuously.

That's why I built AgentGuard — a macOS menu bar app that runs security scanners in the background and flags anything suspicious.

The risk

MCP servers register tools that your AI assistant calls. Those tools can read files, run commands, make HTTP requests. A malicious or compromised tool can:

Exfiltrate your SSH keys or credentials to an external endpoint
Inject prompts that override your instructions
Chain tool calls to escalate access

Same with agent skills and rules (.cursorrules, Claude skills, agent instructions). They're mostly markdown files — but they control what the AI does on your machine.

The scanners

Cisco AI Defense maintains two open-source security scanners:

Scanner	What it scans
mcp-scanner	MCP server configs — Claude Desktop, Cursor, VS Code, Windsurf, Zed
skill-scanner	Agent skill packages — Cursor rules, Claude skills, and other agent instruction files

YARA rules + static analysis. Everything runs locally, nothing leaves your machine.

They work great — but they're CLI tools. You have to remember to run them manually after every install or update.

AgentGuard

AgentGuard puts both scanners behind a menu bar icon. It scans on a schedule, shows findings in a popover, and lets you act on them.

Click a finding to see full details — what was detected, which rule flagged it, and the option to mute it:

Install:

brew tap naufalafif/tap
brew install --cask agent-guard

The app handles everything — installs the scanners, scans your configs, runs in the background. No manual setup.

What it scans:

MCP configs are picked up automatically — claude_desktop_config.json, .cursor/mcp.json, VS Code settings.json, Windsurf, Zed.

Skill directories default to common locations — ~/.cursor/skills, ~/.cursor/rules, ~/.claude/skills, ~/.agents/skills, and more. Add your own from Settings.

Open source

AgentGuard is a native Swift app — open source under MIT.

GitHub: github.com/naufalafif/agent-guard

If you use MCP servers or AI coding tools, give it a scan. You might find something you didn't expect.

Dynamic Permissions in React using CASL: A Guide to Secure Your App🔒

Naufal Afif — Mon, 05 Jun 2023 14:25:34 +0000

As web applications become more complex, it's important to ensure that users have the appropriate permissions to access certain features and data. In this article, we'll explore how to implement dynamic permissions in React using CASL, a powerful authorization library.

CASL, or "Class-based Authorization System for React and Node.js", provides a simple and intuitive way to define permissions and check them at runtime. With CASL, you can easily manage permissions for different roles and users, and ensure that your app is secure and compliant with data protection regulations.

Installing Packages

To get started with CASL, you'll need to install the library and its dependencies:



npm install @casl/react @casl/ability

Define Permissions

Once you've installed CASL, you can define your permissions using the defineAbility function. Here's an example of how to define permissions for a blog app:



// ability.js
import { defineAbility } from "@casl/ability";

export default defineAbility((can, cannot) => {
  can("read", "Post");
  can("add", "Post");
  cannot("update", "Post");
  cannot("delete", "Post");
});

In this example, we're defining permissions for a Post model. Users can read and create posts, but can't update and delete them.

We can use permission directly by invoking the function can or using Can component.



import ability from "./ability.js";

console.log(ability.can("read", "Post")); // true
console.log(ability.can("delete", "Post")); // false

Permission on React Component

Once you've defined your permissions, you can use the Can component from @casl/react to check if a user has permission to perform a certain action. Here's an example of how to use the Can component in a React component:



import { createContext } from "react";
import { createContextualCan } from "@casl/react";
import ability from "./ability.js";

export const AbilityContext = createContext();
export const Can = createContextualCan(AbilityContext.Consumer);

function App() {
  const post = { title: "example-title", content: "example-content" };

  return (
    <AbilityContext.Provider value={ability}>
      <Can I="add" a="Post">
        <button>Add</button>
      </Can>
      <Can I="read" a="Post">
        <Post post={post} />
      </Can>
    </AbilityContext.Provider>
  );
}

function Post({ post }) {
  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      <Can I="update" a="Post">
        <button>Edit</button>
      </Can>
      <Can I="delete" a="Post">
        <button>Delete</button>
      </Can>
    </div>
  );
}

In this example, we're rendering a Post component and checking if the current user has permission to update & delete the post. If the user has permission, we're rendering the buttons.

We're providing the ability to our entire app using the AbilityContext.Provider. This allows us to check permissions in any component using the Can component or the useAbility hook from @casl/react.

Overall, CASL provides a powerful and flexible way to manage permissions in your React app. By defining permissions using the defineAbility function and checking them at runtime using the Can component or the useAbility hook, you can ensure that your app is secure and compliant with data protection regulations.

I hope this article has been helpful in getting started with dynamic permissions in React using CASL. If you have any questions or feedback, feel free to leave a comment below!

Demo

Check out the demo below where you can edit permissions and see how the feature is enabled or disabled based on changes to the permission data.

Demo URL: https://react-with-casl.vercel.app/
Source Code: https://github.com/naufalafif/react-with-casl

DEV Community: Naufal Afif