--- name: hcti-open-graph-images description: Create and implement HCTI dynamic Open Graph image configurations that render webpages or populate templates from page metadata. Use for persistent og:image and social-preview URLs, including webpage meta tags, HCTI templates, metadata mappings, proxies, or storage destinations. Do not use for a one-off social image. --- # HCTI Dynamic Open Graph Images Use the HCTI MCP tools to create the configuration and finish the website integration. A configuration is not complete until the website publishes its HCTI image URL and any page-specific rendering metadata. Tool names may be prefixed by the client; select them by the suffixes below. Inspect each selected tool's current input schema instead of assuming an optional parameter exists. ## Complete workflow 1. Choose the source website's HTTPS origin and a rendering mode. 2. Resolve any referenced template, proxy, or storage destination before creating the configuration. 3. Call `create_og_config` and retain both returned identifiers: - `id` manages the configuration with `get_og_config`, `update_og_config`, and `delete_og_config`. - `domain_id` belongs in the public image URL used by the website. 4. Read [references/webpage-integration.md](references/webpage-integration.md), then add the appropriate tags to every source page's server-rendered `
`. 5. Build each image URL as `https://hcti.io/v1/og/{domain_id}{pathname}`. The pathname must match the source page under the configuration's `base_url`. 6. Open the HCTI image URL directly and verify the rendered result before treating the integration as complete. For example, a configuration whose `base_url` is `https://example.com` and whose returned `domain_id` is `DOMAIN_ID` maps: ```text Source page: https://example.com/articles/product-launch Image URL: https://hcti.io/v1/og/DOMAIN_ID/articles/product-launch ``` The corresponding page tag is: ```html ``` Do not substitute the configuration `id` for `domain_id`. Query strings do not identify a new image; change `hcti:content_version` when the same pathname needs a new render because otherwise-invisible content changed. ## Choose the rendering mode ### Page screenshot Use `config_type: html_css` to render the source page itself. - Set `extract_values: true` when individual pages will provide `hcti:*` rendering options. - Put shared fallback behavior in `default_options`; extracted page values override those defaults. - Use `hcti:selector` with a unique, stable selector such as `#social-card` when only one element should become the preview. - Keep large shared CSS in the configuration's defaults. Use `hcti:css` only for page-specific overrides. ### Reusable template Use `config_type: templated` to render an existing HCTI template with values extracted from each source page. - If the user provides a template name instead of an ID, call `list_templates`, prefer a clear case-insensitive match, and ask when the match is ambiguous. - Omit `template_version` to track the latest version; set it only when the user wants the configuration pinned to a particular version. - Pages can publish values directly with `html:tv:{template_key}` tags. - `template_values_mapping` can map a standard or custom metadata field into a template key. Each mapping must supply exactly one `meta_key` or `fallback`. - Direct `html:tv:*` values override mapped values for the same template key. - The `titles` fallback checks the document `