Astro Markdown Endpoints for LLMs

Large language models love good Markdown. It’s concise, structured, and easy to feed into prompt contexts with minimal effort.

In this post, I’ll share how I set up dynamic Markdown endpoints for the documentation portal I’m building for my project at Levelogy. Using Astro’s API routes, each article in the collection can be fetched as clean, lightweight Markdown.

This post assumes you’re familiar with Astro’s content collections. If you’re not, check out the Astro documentation for more information.

Endpoint overview

Astro treats any .ts/.js file in src/pages as a route. In my setup, the file src/pages/docs/[collection]/[article].md.ts generates Markdown for each documentation entry by mapping the collection and article parameters from the URL to the corresponding content file.

1
import type { APIRoute } from 'astro';
2
import { getCollection, type CollectionEntry } from 'astro:content';
3

4
type DocumentationCollection = CollectionEntry<'documentation'>;
5

6
export const GET: APIRoute = async ({ props }) => {
7
    const { article } = props as { article: DocumentationCollection };
8

9
    // Map the collection and article parameters to the corresponding content file.
10
    // ...
11

12
    const rawContent = await fs.readFile(filePath, 'utf-8');
13
    const filteredContent = stripFrontmatter(rawContent);
14

15
    // Read the content file and strip the frontmatter and then return the Markdown.
16
    // ...
17

18
    return new Response(filteredContent, {
19
        status: 200,
20
        headers: { "Content-Type": "text/markdown; charset=utf-8" },
21
    });
22
};

Making Astro know what to build

getStaticPaths tells Astro exactly which [collection]/[article] combinations to pre-render whenever you use dynamic route segments.

During the build, Astro runs this function, expects an array of { params: { … } } objects, and emits one static file for each entry.

Without getStaticPaths, Astro wouldn’t know which docs exist, so it couldn’t generate the Markdown files. Levelogy is entirely statically generated, so this is essential.

Building the Markdown

Each documentation article is stored as an MDX file with frontmatter that defines its metadata, things like the collection it belongs to, its slug, version tags and more. This is information that’s not needed in the Markdown output, so we need to strip it out.

When the endpoint loads an article, it uses that info to find the right file and read its contents. A small helper then steps in to clean things up: it uses gray-matter to remove the frontmatter and leave just the Markdown body which is all we need.

1
import matter from 'gray-matter';
2

3
function stripFrontmatter(content: string): string {
4
    const { content: body } = matter(content);
5
    return body;
6
}

Once the Markdown content is ready, the endpoint sends it back with a standard 200 status and a key detail: the Content-Type header is set to text/markdown; charset=utf-8. This tells the client that the response is Markdown content, which is important for LLMs and even browsers to understand.

Let’s get fancy

Once you’ve got the basics working, there’s plenty of room to play. For Levelogy.com, I wanted to take it a step further and add a “Copy page” button powered by Alpine.js.

The button lets anyone browsing the docs grab the full Markdown output with one click.

1
<div
2
    x-data=`{
3
        copied: false,
4
        async copyMarkdown() {
5
            try {
6
                const response = await fetch('${markdownUrl}');
7
                if (!response.ok) throw new Error('Failed to fetch markdown');
8
                const markdown = await response.text();
9
                await navigator.clipboard.writeText(markdown);
10
                this.copied = true;
11
                setTimeout(() => { this.copied = false; }, 2000);
12
            } catch (error) {
13
                console.error('Failed to copy markdown:', error);
14
            }
15
        }
16
    }`
17
>
18
    <Button
19
        variant="outline"
20
        size="default"
21
        iconLeft="lucide:copy"
22
        aria-label="Copy page"
23
        x-on:click="copyMarkdown()"
24
    >
25
        <span x-text="copied ? 'Copied' : 'Copy page'">Copy page</span>
26
    </Button>
27
</div>

This little Alpine.js block handles the “Copy page” magic. When someone clicks the button, it fetches the Markdown from the endpoint, copies it to their clipboard, and briefly swaps the label to “Copied” for feedback.

It’s not perfect, but get’s the job done.