Note: This blog post was written with the help of AI tools and reviewed by the author to ensure quality and accuracy.

*generated with AI

Adding AI Disclosure to Blog Posts in AstroJS

Transparency is key when creating content, especially when using AI tools for writing or generating visuals. In this post, we’ll walk through how to add custom madeWithAi and previewIsAi metadata properties to blog posts, and display disclosure messages when either property is set to true. This ensures readers are informed about AI assistance in both the article text and its preview image.

This implementation is tailored for AstroJS sites, but with small adjustments it can be adapted to other frameworks.

Table of contents

Why disclose AI involvement?

Transparency builds trust. Whether AI assists with writing or image creation, readers deserve clarity about how content is produced. A short disclosure helps set reader expectations, makes editorial practices explicit, and aligns the site with responsible AI-use norms. The changes below add unobtrusive notes to posts that had AI assistance in either the article or its visuals, while keeping non-AI posts unchanged.

Step 1: Update the Metadata Schema

First, we need to add both madeWithAi and previewIsAi properties to the metadata schema. These properties will be booleans and default to false.

In the src/content/config.ts file, update the blog schema as follows:

export const blogSchema = z.object({
  // ...existing properties...
  madeWithAi: z.boolean().default(false), // Indicates AI-assisted writing
  previewIsAi: z.boolean().default(false), // Indicates AI-generated preview image
});

This ensures posts have values for both properties. Important: using .default(false) provides a value when missing; using .optional() lets the field be absent. If your validation requires the field and a post is missing it, some build-time checks may fail—choose the behavior that fits your migration strategy.

Step 2: Add Properties to Blog Posts

Next, add both madeWithAi and previewIsAi properties to the frontmatter of your blog posts. For example:

---
title: My WFH Setup
pubDate: 2026-02-28T16:49:37.298Z
draft: false
fmContentType: blog
madeWithAi: true
previewIsAi: true
description: A detailed breakdown of my work from home setup.
preview: ../../../public/placeholders/blog-placeholder-4.jpg
---

Set madeWithAi to true for posts created with AI assistance, and previewIsAi to true for posts whose preview image was generated with AI tools.

  • madeWithAi: true — set to true when the post was substantially assisted by AI tools.
  • previewIsAi: true — set to true when the preview image was generated by AI.
  • draft: false — keep your normal draft/publish flag.

Step 3: Displaying AI Disclosure Messages

To make disclosures consistent and integrated, display a message for AI-written content and a caption for AI-generated images, both styled similarly and placed thoughtfully.

Wrap the hero image block in a figure and surface a subtle caption when previewIsAi is true. That keeps the disclosure close to the visual content it describes:

{
  preview && (
    <figure class="hero-image">
      <img width={1020} height={510} src={preview} alt="" />
      {previewIsAi && (
        <figcaption
          class="ai-preview-note"
          style="text-align: right; font-style: italic; color: rgb(var(--gray-dark));"
        >
          Preview image generated with AI tools.
        </figcaption>
      )}
    </figure>
  );
}

For the article text, display a disclosure message when madeWithAi is true:

{
  madeWithAi && (
    <p style="text-align: center; font-style: italic; color: rgb(var(--gray-dark));">
      Note: This blog post was written with the help of AI tools and reviewed by
      the author to ensure quality and accuracy.
    </p>
  );
}

Use similar styling for both messages so they feel integrated and unobtrusive. Place the image caption near the image, and the text disclosure above the article content.

Step 4: Update the BlogPost Layout

Modify the BlogPost layout to display both disclosure messages in a consistent and integrated way. In src/layouts/BlogPost.astro, add the following:

<body>
  <Header />
  <main>
    <article>
      {madeWithAi && (
        <p style="text-align: center; font-style: italic; color: rgb(var(--gray-dark));">
          Note: This blog post was written with the help of AI tools and
          reviewed by the author to ensure quality and accuracy.
        </p>
      )}
      {preview && (
        <figure class="hero-image">
          <img width={1020} height={510} src={preview} alt="" />
          {previewIsAi && (
            <figcaption
              class="ai-preview-note"
              style="text-align: right; font-style: italic; color: rgb(var(--gray-dark));"
            >
              Preview image generated with AI tools.
            </figcaption>
          )}
        </figure>
      )}
      <div class="prose">
        <div class="title">
          <div class="date">
            <FormattedDate date={pubDate} />
            {updatedDate && (
              <div class="last-updated-on">
                Last updated on <FormattedDate date={updatedDate} />
              </div>
            )}
          </div>
          <h1>{title}</h1>
          <hr />
        </div>
        <slot />
        <BlogComment />
        <CodeCopyButton />
        <BlogImageEnhancer />
      </div>
    </article>
  </main>
  <Footer />
</body>

This ensures both messages appear in their appropriate places and are styled consistently.

Step 5: Test the Feature

Run your development server and verify the following:

  • Blog posts with madeWithAi: true display the text disclosure message.
  • Blog posts with previewIsAi: true display the image caption disclosure.
  • Posts with either property set to false do not display the respective message.

If you use a local dev server, a quick check is to toggle each field in a single post and refresh the page.

Appendix: Agent Usage (optional)

If you use a coding agent or Copilot-style assistant, consider instructing it to set madeWithAi when appropriate. A minimal agent instruction can live in your agent config (or internal guidelines) and say: “If you substantially author or edit content using AI, set madeWithAi: true in frontmatter.” For details on Copilot agents, see the GitHub docs: https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/create-custom-agents

Conclusion

By adding both madeWithAi and previewIsAi properties, and displaying integrated disclosure messages, you make your editorial choices explicit for both text and visuals. This helps build reader trust and supports responsible publishing practices. The approach is lightweight, reversible, and portable to other frameworks.