How to Add AI-Moderated Comments to Your Astro Site

TL;DR: Install @respectify/astro, add the integration to astro.config.ts, drop <CommentSection postSlug="..." /> into your layout, and every comment is screened by Respectify before it appears. Setup takes about 20 minutes.

Astro is a great framework for blogs and content sites — and comment sections are one of the things it doesn’t give you out of the box. The usual options are embedding a third-party widget (which means someone else owns your readers’ data) or building your own (which means a lot of work).

@respectify/astro is a third option: a self-contained Astro integration that stores comments in your own Astro DB database, screens them with Respectify’s AI before they post, and renders a clean comment UI with a single component. You own the data, Respectify handles the moderation.

This is the site you’re reading right now — the Respectify blog uses this exact integration.

What you’ll need

• An Astro 5+ project with output: 'server' (or hybrid mode) and a server adapter
• @astrojs/db configured with a Turso database for production
• A Respectify account and API key

If you’re starting fresh, the Astro docs cover setting up SSR and @astrojs/db.

1. Install the packages

npm install @respectify/astro @respectify/client @astrojs/db

2. Add the integration to astro.config.ts

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import db from "@astrojs/db";
import respectify from "@respectify/astro";

export default defineConfig({
  output: "server",
  adapter: node({ mode: "standalone" }),
  integrations: [
    db(),
    respectify({
      // Optional: customise the URL Respectify uses for topic context
      getPostUrl: (slug, site) => `${site}/blog/${slug}/`,
    }),
  ],
});

3. Add the Comment table to your database schema

In db/config.ts:

import { defineDb } from "astro:db";
import { Comment } from "@respectify/astro/schema";

export default defineDb({
  tables: { Comment },
});

Then push the schema to your Turso database:

npx astro db push

4. Wire up the Astro Actions

// src/actions/index.ts
import { respectifyCommentActions } from "@respectify/astro/actions";

export const server = {
  comments: respectifyCommentActions,
};

If you already have actions defined, merge them in:

export const server = {
  comments: respectifyCommentActions,
  // ...your other actions
};

5. Add environment variables

Add these to your .env file locally, and to your hosting provider’s environment for production:

RESPECTIFY_EMAIL=you@example.com
RESPECTIFY_API_KEY=your-api-key-from-dashboard
ASTRO_DB_REMOTE_URL=libsql://your-db.turso.io
ASTRO_DB_APP_TOKEN=your-turso-token

Get your Respectify credentials from the dashboard. Get your Turso credentials from turso.tech.

6. Drop the component into your layout

---
import CommentSection from "@respectify/astro/components/CommentSection.astro";
---

<!-- At the bottom of your blog post layout -->
<CommentSection postSlug={post.slug} />

That’s it. The component handles rendering existing approved comments, the submission form, and the “your comment is under review” state after submission.

How moderation works

When a reader submits a comment, it goes to Respectify before anything is saved. Respectify checks for toxicity, spam, logical fallacies, and whether the comment is relevant to the post topic.

• If the comment passes: it’s saved to your Astro DB and appears on the page
• If it fails: the commenter sees an explanation and a suggestion for how to revise it. The comment is not posted, but they can try again.

Comments that pass moderation are saved with approved: false by default, so you can do a final human review in your database before they go public — or flip approved: true by default if you trust Respectify’s judgment on its own.

Customising the component

All styling is done via CSS variables on .rf-comments. Override them to match your site’s design:

.rf-comments {
  --rf-accent: #7c3aed;
  --rf-accent-hover: #6d28d9;
  --rf-radius: 0.5rem;
  --rf-font-size: 0.95rem;
}

The component ships with self-contained CSS — no Tailwind required, though it plays fine alongside it.

Available props:

What about prerendered pages?

Comments load at runtime via a small API route, so your blog posts can stay export const prerender = true. Only the API route and actions need server runtime — the pages themselves stay static. This keeps your build fast and your CDN happy.

Checking the integration is working

After wiring everything up, run npm run dev and navigate to a page with the comment section. Submit a test comment with benign content — it should post successfully. Then try something clearly toxic (“you’re an idiot”) — you should see Respectify’s coaching response explaining the problem and suggesting a revision.

If anything isn’t working, check that your environment variables are set and that npx astro db push completed successfully.

Further reading

• @respectify/astro on npm
• Respectify dashboard
• Astro DB docs
• Respectify pricing — usage-based, from $5