Example Clients ↗

Documentation Index#

Fetch the complete documentation index at: https://modelcontextprotocol.io/llms.txt Use this file to discover all available pages before exploring further.

A list of applications that support MCP integrations

export const FEATURES = [“Resources”, “Prompts”, “Tools”, “Discovery”, “Instructions”, “Sampling”, “Roots”, “Elicitation”, “CIMD”, “DCR”, “Tasks”, “Apps”];

export const FEATURE_COLORS = { Resources: “blue”, Prompts: “blue”, Tools: “blue”, Instructions: “purple”, Discovery: “purple”, Sampling: “green”, Roots: “green”, Elicitation: “green”, Tasks: “orange”, Apps: “orange”, DCR: “yellow”, CIMD: “yellow” };

export const FeatureBadge = ({feature}) => { const color = FEATURE_COLORS[feature.split(" (")[0]] || “gray”; return {feature}; };

export const filterStore = { state: { selectedFeatures: [], searchText: “”, visibleCount: 0, totalCount: 0 }, listeners: new Set(), setState(updater) { if (typeof updater === “function”) { this.state = { …this.state, …updater(this.state) }; } else { this.state = { …this.state, …updater }; } this.listeners.forEach(fn => fn(this.state)); }, subscribe(fn) { this.listeners.add(fn); return () => this.listeners.delete(fn); } };

export const useFilterStore = () => { const [state, setState] = useState(filterStore.state); useEffect(() => filterStore.subscribe(setState), []); return state; };

export const useFilter = ({name, supports}) => { const {selectedFeatures, searchText} = useFilterStore(); const isVisible = name.toLowerCase().includes(searchText.toLowerCase()) && selectedFeatures.every(feature => supports?.includes(feature)); useEffect(() => { filterStore.setState(s => ({ totalCount: s.totalCount + 1 })); return () => filterStore.setState(s => ({ totalCount: s.totalCount - 1 })); }, []); useEffect(() => { if (isVisible) { filterStore.setState(s => ({ visibleCount: s.visibleCount + 1 })); return () => filterStore.setState(s => ({ visibleCount: s.visibleCount - 1 })); } }, [isVisible]); return isVisible; };

export const ClientFilter = () => { const {selectedFeatures, searchText, visibleCount, totalCount} = useFilterStore(); useEffect(() => { filterStore.setState({ selectedFeatures: [], searchText: "" }); }, []); const toggleFeature = feature => { const newFeatures = selectedFeatures.includes(feature) ? selectedFeatures.filter(f => f !== feature) : […selectedFeatures, feature]; filterStore.setState({ selectedFeatures: newFeatures }); }; const clearFilters = () => { filterStore.setState({ selectedFeatures: [], searchText: "" }); }; const hasFilters = selectedFeatures.length > 0 || searchText.length > 0; return

<span className="font-bold text-gray-700 dark:text-gray-300">
  Showing {visibleCount} of {totalCount} clients
</span>
{hasFilters && <button onClick={clearFilters} className="text-sm cursor-pointer px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
    <Icon icon="xmark" iconType="solid" size={16} /> Clear filters
  </button>}


<input type="text" placeholder="Search clients by name..." value={searchText} onChange={e => filterStore.setState({

searchText: e.target.value })} className=“w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent” />

  Filter by features:


  {FEATURES.map(feature => <button key={feature} onClick={() => toggleFeature(feature)}`}>
      <Icon icon={selectedFeatures.includes(feature) ? "square-check" : "square"} iconType={selectedFeatures.includes(feature) ? "solid" : "regular"} size={16} />
      {feature}
    </button>)}

; };

export const McpClient = ({name, homepage, supports, sourceCode, instructions, children}) => { const slug = name.toLowerCase().replace(/[().\s-]+/g, “-”).replace(/^-|-$/g, “”); if (homepage?.match(/^https://github.com/[^/]+/[^/]+/)) { sourceCode ??= homepage; } const features = (supports ?? “”).split(", “).sort((a, b) => { const featureA = a.split(” (")[0]; const featureB = b.split(" (")[0]; return FEATURES.indexOf(featureA) - FEATURES.indexOf(featureB); }); const instructionsLinks = Array.isArray(instructions) ? <> Configuration instructions: {instructions.map(([text, url], i) => [i > 0 && “, “, {text}])} </> : Configuration instructions ; const [expanded, setExpanded] = useState(false); const [hasOverflow, setHasOverflow] = useState(false); const contentRef = useRef(null); const isVisible = useFilter({ name, supports }); useEffect(() => { const el = contentRef.current; if (el) { setHasOverflow(el.scrollHeight > el.clientHeight); } }, []); if (!isVisible) return null; return

    <a href={homepage} className="border-0 text-xl font-semibold text-primary underline" target="_blank" rel="noopener noreferrer">
      {name}
    </a>
    <a href={`#${slug}`} className="ml-auto border-0 opacity-0 group-hover:opacity-100 text-xl text-gray-400 hover:text-gray-600" aria-label={`Link to ${name}`}>
      #
    </a>
  
  {features.length > 0 && 
      <span className="inline-flex items-center h-[1lh]">
        {'\u200B'}<Icon icon="check" iconType="solid" size={18} />
      </span>
      <strong>Supports:</strong>
      <span className="flex flex-wrap gap-1">
        {features.map(feature => <FeatureBadge key={feature} feature={feature} />)}
      </span>
    }
  {sourceCode && 
      <span className="inline-flex items-center h-[1lh]">
        {'\u200B'}<Icon icon="code" iconType="solid" size={18} />
      </span>
      <span>
        <a href={sourceCode} target="_blank" rel="noopener noreferrer">
          Open source
        </a>
      </span>
    }
  {instructions && 
      <span className="inline-flex items-center h-[1lh]">
        {'\u200B'}<Icon icon="gear" iconType="solid" size={18} />
      </span>
      <span>
        {instructionsLinks}
      </span>
    }


  
    {children}
  
  {hasOverflow && <button onClick={() => setExpanded(!expanded)}`}>
      <span bg-white/60 dark:bg-gray-900/60 rounded-full`}>
        <Icon icon="chevron-down" iconType="solid" size={18} />
      </span>
    </button>}

; };

This page showcases applications that support the Model Context Protocol (MCP). Each client may support different MCP features:

This list is maintained by the community. If you notice any inaccuracies or would like to add or update information about MCP support in your application, please submit a pull request.

Client details#

brew install amazon-q