Skip to main content
Glama
capawesome-team

Ionic Framework MCP Server

Read component usage examples

get_component_usage
Read-only

Fetch official usage examples for an Ionic component across Angular, React, Vue, and JavaScript. List available examples first or retrieve complete code with template, class, and styles for correct implementation.

Instructions

Read the official usage examples of one Ionic Framework component, as published on its documentation page. Use this before writing markup for a component to see how it is actually used in Angular, React, Vue or vanilla JavaScript — the template, the component class and the styles that belong together. Call it without an example first to see which examples the component offers. Returns the examples of the component with the frameworks each provides, or, when an example is given, its code per framework as fenced code blocks — one section per framework, and one block per file where an example spans several files. Do not use this for the component's API reference: its properties, events, methods, CSS shadow parts, CSS custom properties and slots are on the documentation page, which get_doc_page returns.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
exampleNoThe id of one example, e.g. "basic" or the nested "presentation/date". Defaults to listing the examples of the component instead of returning code. Optional.
versionNoOptional. Ionic Framework docs version. Defaults to v9. Match the major version of @ionic/core (or @ionic/angular, @ionic/react, @ionic/vue) in the user's package.json.
componentYesThe component to read the examples of, e.g. "button". The tag is accepted too, e.g. "ion-button".
frameworkNoOptional. The framework to return the example for, e.g. "react". Match the framework of the user's project. Defaults to returning every framework the example provides.

Schema Changelog

Changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. First observedv0.0.1

TDQS

A4.9/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already mark it read-only and non-destructive; the description adds the behavior that matters for calling: two call modes (list examples vs. return code), the return structure (fenced code blocks, one section per framework, one block per file for multi-file examples), and framework filtering. This is substantive disclosure beyond the readOnlyHint.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Five sentences with no filler, logically ordered: what → when → how → return format → explicit exclusion. The purpose is front-loaded in the first sentence, and every clause earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Without an output schema, the description carries the burden of explaining return values and does so in detail (frameworks per example, fenced blocks, multi-file handling). Combined with 100% schema coverage and readOnly annotations, an agent has everything needed to call this correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and each parameter is individually well-described, so the baseline is 3. The description adds above-baseline value by wiring the parameters into a workflow — 'Call it without an `example` first to see which examples the component offers' — and by clarifying what the returned code contains (template, component class, styles).

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource — 'Read the official usage examples of one Ionic Framework component' — and explicitly differentiates from a sibling: 'Do not use this for the component's API reference... which get_doc_page returns.' An agent can tell exactly what this does and what it is not for.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives explicit when-to-use ('Use this before writing markup for a component'), an explicit workflow ('Call it without an `example` first'), and an explicit when-not with the named alternative ('Do not use this for the component's API reference... which get_doc_page returns'). Nothing is left to inference.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/capawesome-team/ionic-framework-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server