First, add the MDX integration:

  npx astro add mdx

// src/components/LiveCounter.jsx
import { useState } from 'react';

export default function LiveCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

<!-- src/content/blog/islands-intro.mdx (renamed from .md) -->
---
title: Getting Started with Islands
publishDate: 2026-08-06
---

import LiveCounter from '../../components/LiveCounter.jsx';

## Why Islands Matter

Astro ships zero JavaScript by default. Try the live example below —
it's a real, interactive React component embedded directly in this
Markdown content.

<LiveCounter client:visible />

Interactivity is opt-in, component by component, even inside content
like this post.

<!--
  Notes:
  - The file was renamed from .md to .mdx specifically to allow the
    import statement and the <LiveCounter /> tag - plain .md files
    can't do either.
  - client:visible is still required on <LiveCounter /> - being
    inside MDX content doesn't hydrate a component automatically,
    exactly as the chapter's own warning states.
  - The surrounding Markdown text (## heading, paragraphs) renders
    normally around the live component, with no special handling
    needed to mix the two.
-->