split out MCP guides

Author: jsneedles

_includes/mcp_tools.md

@@ -0,0 +1,30 @@
+## Available tools
+
+HTML/CSS to Image (HCTI) exposes the same MCP tools in every supported client. Ask your assistant to use HCTI by name when you want it to render HTML/CSS or capture a website.
+
+### Account usage
+
+| Tool | What it does |
+|:-----|:------------|
+| **check_usage** | Check images used, the account's image allowance, the next reset date, and whether overages are enabled. Does not render an image. |
+
+### Screenshots and rendering
+
+| Tool | What it does |
+|:-----|:------------|
+| **create_image** | Render HTML and CSS as PNG, JPG, WebP, or PDF. Accepts rendering options such as `device_scale`, `viewport_width`, `viewport_height`, and `ms_delay`. |
+| **create_url_image** | Capture a public webpage or a specific element using a CSS selector. Supports viewport settings and cookie banner blocking. |
+| **create_templated_image** | Render a saved template using its `template_id` and a `template_values` object. |
+| **create_batch_images** | Render multiple variations in one request, with shared `default_options` and per-image `variations`. |
+| **get_max_batch_size** | Check the authorized account's current batch limit before preparing a batch. |
+
+### Template management
+
+| Tool | What it does |
+|:-----|:------------|
+| **create_template** | Save HTML and CSS as a reusable template with variables. |
+| **update_template** | Update an existing template by ID. |
+| **list_templates** | Find templates in the connected HCTI account. |
+| **list_template_versions** | Inspect the version history of a template. |
+
+See the [rendering parameters](/integrations/mcp/#image-parameters) for available options and the [Template Editor guide](/template-editor/) for designing reusable templates.

_includes/nav.html

@@ -16,6 +16,7 @@
         <li class="nav-list-item {% if node.expanded or page.url == node.url or page.parent == node.title or page.grand_parent == node.title or page.great_grand_parent == node.title %} active{% endif %}">
           {%- if page.parent == node.title or page.grand_parent == node.title or page.great_grand_parent == node.title -%}
             {%- assign first_level_url = node.url | absolute_url -%}
+            {%- assign first_level_title = node_nav_title -%}
           {%- endif -%}
           {%- if node.has_children -%}
             {%- if node.expanded != true -%}
@@ -34,6 +35,7 @@
                 <li class="nav-list-item {% if page.url == child.url or page.parent == child.title or page.grand_parent == child.title %} active{% endif %}">
                   {%- if page.url == child.url or page.parent == child.title or page.grand_parent == child.title -%}
                     {%- assign second_level_url = child.url | absolute_url -%}
+                    {%- assign second_level_title = child_nav_title -%}
                   {%- endif -%}
                   {%- if child.has_children -%}
                     <a href="#" class="nav-list-expander" aria-label="Expand {{ child_nav_title }}"><svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg></a>
@@ -47,6 +49,7 @@
                       <li class="nav-list-item {% if page.url == grand_child.url or page.parent == grand_child.title %} active{% endif %}">
                         {%- if page.url == grand_child.url or page.parent == grand_child.title -%}
                           {%- assign third_level_url = grand_child.url | absolute_url -%}
+                          {%- assign third_level_title = grand_child_nav_title -%}
                         {%- endif -%}
                         {%- if grand_child.has_children -%}
                           <a href="#" class="nav-list-expander" aria-label="Expand {{ grand_child_nav_title }}"><svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg></a>

_layouts/default.html

@@ -86,16 +86,16 @@
             <nav aria-label="Breadcrumb" class="breadcrumb-nav">
               <ol class="breadcrumb-nav-list">
                 {% if page.great_grand_parent %}
-                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.great_grand_parent }}</a></li>
-                  <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.grand_parent }}</a></li>
-                  <li class="breadcrumb-nav-list-item"><a href="{{ third_level_url }}">{{ page.parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ first_level_title | default: page.great_grand_parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ second_level_title | default: page.grand_parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ third_level_url }}">{{ third_level_title | default: page.parent }}</a></li>
                 {% elsif page.grand_parent %}
-                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
-                  <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ first_level_title | default: page.grand_parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ second_level_title | default: page.parent }}</a></li>
                 {% else %}
-                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ first_level_title | default: page.parent }}</a></li>
                 {% endif %}
-                <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
+                <li class="breadcrumb-nav-list-item"><span>{{ page.nav_title | default: page.title }}</span></li>
               </ol>
             </nav>
             {% include copy_page.html %}
@@ -117,7 +117,7 @@
       {% endcapture %}
 
       <div class="content-with-toc">
-        <div id="main-content" class="main-content" role="main">
+        <div id="main-content" class="main-content {{ page.content_class | escape }}" role="main">
           {{ rendered_content }}
 
           {% if page.has_children == true and page.has_toc != false %}

_sass/custom/custom.scss

@@ -1234,3 +1234,37 @@ details.te-property[open] > .te-property__summary {
 .main-content > h1:first-of-type{
   margin-top: 0 !important;
 }
+
+// Give client walkthroughs a quieter title and clear separation between steps.
+.main-content.mcp-client-guide {
+  > h1 { font-size: 2rem; line-height: 1.25; margin-bottom: 1rem; }
+  > .mcp-lead { font-size: 1.125rem; line-height: 1.6; }
+  > h2 { margin-top: 3rem; margin-bottom: 1rem; }
+  > ol > li { margin-bottom: 0.75rem; }
+
+  .mcp-config {
+    margin: 1.5rem 0 2rem;
+    padding: 1rem 1.25rem;
+    border: 1px solid $grey-lt-200;
+    border-radius: 6px;
+
+    summary { cursor: pointer; font-weight: 500; }
+    &[open] summary { margin-bottom: 1rem; }
+  }
+
+  @media (max-width: 600px) {
+    > h1 { font-size: 1.625rem; }
+  }
+}
+
+// Prose prompts should stay readable at every viewport width.
+.main-content .language-text.highlighter-rouge {
+  .highlight { min-width: 0; }
+
+  pre,
+  pre code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+}