ionic-framework-mcp

Search the official Ionic Framework documentation from ionicframework.com by keyword. Use this first for any question about Ionic Framework itself — a UI component and its properties, events and CSS custom properties, theming and layout, the Angular, React and Vue integrations, navigation and routing, the Ionic CLI, or upgrading to a newer major version — because guessing a component property or a CSS variable produces markup that silently does nothing. Returns the best matching page sections with `title`, `url`, `snippet`, `section` and `version`, plus the `parentTitle` and `parentUrl` of the page a section belongs to. The same results are attached as structured content. Do not use this to read a whole page (call `get_doc_page` with a `url` from these results), for Capacitor core, Capacitor plugins or native iOS and Android configuration (use the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp instead), or for Capawesome plugins and Capawesome Cloud services such as Live Updates, Native Builds and App Store Publishing (use the Capawesome MCP server at https://mcp.capawesome.io/mcp instead).

{
  "type": "object",
  "properties": {
    "query": {
      "type": "string",
      "minLength": 1,
      "description": "The search terms, e.g. \"modal dismiss\" or \"dark mode css variables\". Plain keywords work best; no search operators are supported."
    },
    "section": {
      "description": "Restrict the search to one part of the documentation, e.g. \"components\" for the component reference, \"theming\" for colors, CSS variables and layout, or \"angular\" for the Angular integration. Defaults to searching every section.",
      "type": "string",
      "enum": [
        "components",
        "angular",
        "react",
        "vue",
        "theming",
        "guides",
        "updating",
        "cli"
      ]
    },
    "version": {
      "description": "Optional. 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.",
      "type": "string",
      "enum": [
        "v9",
        "v8"
      ]
    },
    "limit": {
      "description": "The maximum number of items to return, e.g. 5. Defaults to 10, maximum 25.",
      "type": "integer",
      "minimum": 1,
      "maximum": 25
    }
  },
  "required": [
    "query"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

{
  "type": "object",
  "properties": {
    "results": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "title": {
            "type": "string"
          },
          "url": {
            "type": "string"
          },
          "snippet": {
            "type": "string"
          },
          "section": {
            "type": "string"
          },
          "version": {
            "type": "string"
          },
          "parentTitle": {
            "type": "string"
          },
          "parentUrl": {
            "type": "string"
          }
        },
        "required": [
          "title",
          "url",
          "snippet",
          "section",
          "version"
        ],
        "additionalProperties": false
      }
    }
  },
  "required": [
    "results"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "additionalProperties": false
}

Read the full markdown of a single page of the official Ionic Framework documentation. Use this after `search_docs` to read a page end to end before writing markup against a component, because search snippets are deliberately short and regularly omit required setup steps. A component page carries the complete API reference of that component: its properties with types and defaults, events, methods, CSS shadow parts, CSS custom properties and slots. Returns the page title, its URL, the documentation version and the complete page markdown including code samples. Do not use this to find a page: it needs an exact URL or path, so run `search_docs` first. Do not use it for pages outside ionicframework.com — Capacitor and native plugins are covered by the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp, Capawesome plugins and Capawesome Cloud by the Capawesome MCP server at https://mcp.capawesome.io/mcp.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "minLength": 1,
      "description": "The page URL or site-relative path, e.g. \"https://ionicframework.com/docs/api/button\", \"api/button\", \"angular/navigation\" or \"v8/api/button\". An anchor is ignored; the whole page is returned."
    },
    "version": {
      "description": "Optional. 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.",
      "type": "string",
      "enum": [
        "v9",
        "v8"
      ]
    }
  },
  "required": [
    "url"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

List the UI components of Ionic Framework, optionally filtered by a keyword. Use this to find the component that fits a piece of UI before building it by hand, and to learn the custom element name it is used under. Use limit 100 to list every component. Returns `tag`, `description` and `url` per component, where `url` is the documentation page carrying its full API reference. Do not use this to read a component's API: call `get_doc_page` with the returned `url`. Do not use it for Capacitor plugins or native capabilities, which are covered by the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp.

{
  "type": "object",
  "properties": {
    "query": {
      "description": "A free-text filter matching the tag or the description, e.g. \"modal\". Defaults to no filter. Optional.",
      "type": "string",
      "minLength": 1
    },
    "version": {
      "description": "Optional. 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.",
      "type": "string",
      "enum": [
        "v9",
        "v8"
      ]
    },
    "limit": {
      "description": "The maximum number of items to return, e.g. 5. Defaults to 25, maximum 100.",
      "type": "integer",
      "minimum": 1,
      "maximum": 100
    }
  },
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

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.

{
  "type": "object",
  "properties": {
    "component": {
      "type": "string",
      "minLength": 1,
      "description": "The component to read the examples of, e.g. \"button\". The tag is accepted too, e.g. \"ion-button\"."
    },
    "example": {
      "description": "The 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.",
      "type": "string",
      "minLength": 1
    },
    "framework": {
      "description": "Optional. 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.",
      "type": "string",
      "enum": [
        "angular",
        "react",
        "vue",
        "javascript"
      ]
    },
    "version": {
      "description": "Optional. 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.",
      "type": "string",
      "enum": [
        "v9",
        "v8"
      ]
    }
  },
  "required": [
    "component"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

List the 10 most recent posts from the official Ionic blog, newest first. Use this when the question is about what is new — recent releases, announcements or deprecations. The blog covers both Ionic Framework and Capacitor. Returns `title`, `date`, `tags`, `url` and `excerpt` per post. Do not use this to answer a documentation question: the feed only carries the newest posts, so search the documentation with `search_docs` instead.

{
  "type": "object",
  "properties": {},
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}