HTML

HTML Embed

Embed MCPSafe security badges in websites, documentation sites, and web applications.

Basic HTML

Simple Image with Link

Basic badge embed with clickable link to your security report

HTML

<a href="https://mcpsafe.org/registry/your-server-slug">
  <img src="https://api.mcpsafe.org/api/badge/your-server-slug" alt="MCPSafe Security Grade">
</a>

MCPSafeA (92)

With Style and Size

Styled Badge

Use style parameter and set explicit height

HTML

<a href="https://mcpsafe.org/registry/your-server-slug">
  <img
    src="https://api.mcpsafe.org/api/badge/your-server-slug?style=for-the-badge"
    alt="MCPSafe Security Grade"
    height="28"
  >
</a>

MCPSafeA (92)

Dark/Light Mode Support

Responsive to Color Scheme

Use the picture element for automatic dark/light mode switching

HTML

<a href="https://mcpsafe.org/registry/your-server-slug" style="display: inline-block;">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://api.mcpsafe.org/api/badge/your-server-slug?theme=dark">
    <source media="(prefers-color-scheme: light)" srcset="https://api.mcpsafe.org/api/badge/your-server-slug?theme=light">
    <img src="https://api.mcpsafe.org/api/badge/your-server-slug" alt="MCPSafe Security Grade">
  </picture>
</a>

Note

The theme parameter is optional. The default badge works well on most backgrounds.

React Component

Reusable React Component

A simple component for React applications

SecurityBadge.jsx

function SecurityBadge({ serverSlug, style = 'flat' }) {
  return (
    <a
      href={`https://mcpsafe.org/registry/${serverSlug}`}
      target="_blank"
      rel="noopener noreferrer"
    >
      <img
        src={`https://api.mcpsafe.org/api/badge/${serverSlug}?style=${style}`}
        alt="MCPSafe Security Grade"
      />
    </a>
  );
}

// Usage
<SecurityBadge serverSlug="your-server-slug" style="for-the-badge" />

Vue Component

Vue 3 Component

A component for Vue 3 applications using Composition API

SecurityBadge.vue

<template>
  <a
    :href="`https://mcpsafe.org/registry/${serverSlug}`"
    target="_blank"
    rel="noopener noreferrer"
  >
    <img
      :src="`https://api.mcpsafe.org/api/badge/${serverSlug}?style=${style}`"
      alt="MCPSafe Security Grade"
    />
  </a>
</template>

<script setup>
defineProps({
  serverSlug: {
    type: String,
    required: true
  },
  style: {
    type: String,
    default: 'flat'
  }
});
</script>

Accessibility

Always include alt text

Use descriptive alt text like "MCPSafe Security Grade" for screen readers

Make badges clickable

Wrap in an anchor tag so users can view the full report

Use rel="noopener noreferrer"

For security when using target="_blank"

Documentation Sites

Docusaurus

Use in MDX files or React components. Works with both dark and light themes.

VitePress

Embed in markdown with raw HTML or use in Vue components.

GitBook

Use the embed block or inline HTML to add badges.

Notion

Use the /embed command with the badge URL.