Goal: a working /blog index on your destination site, pulling from Mentionwell, in under 5 minutes.

Fastest path: open the Connect-destination wizard in the dashboard (Integration → Connect with guided wizard). Pick your architecture, copy-paste the generated receiver, paste the env vars, hit Save & test. The wizard validates the connection live before you commit. The steps below show what the wizard does manually if you'd rather wire it up yourself.

1. Get your credentials

Open your site in the dashboard, click Integration, then Connect with guided wizard. The Setup step shows the per-site values with copy buttons:

MENTIONWELL_API_URL=https://app.mentionwell.com
MENTIONWELL_SITE_SLUG=your-site-slug
MENTIONWELL_API_KEY=mw_read_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MENTIONWELL_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Paste those into your destination site's environment (.env.local for local dev, your hosting provider's env settings for prod). The MENTIONWELL_WEBHOOK_SECRET is only needed if you're using a push architecture (static_deploy_hook, nextjs_isr, cms_adapter) — pull-only sites (dynamic_reader) can omit it.

Important: MENTIONWELL_API_KEY is a server-side key. Never expose it via NEXT_PUBLIC_, VITE_, or any client-visible env. The dashboard issues a per-site key with read-only scope, but treat it like any secret.

2. Install the SDK (recommended)

npm install mentionwell

The SDK is a tiny wrapper around fetch. You can skip it and call the API directly — see the API reference — but the SDK gives you typed responses and HTML cleanup helpers.

3. Fetch posts

// lib/blog.ts
import { getBlogPostsViaApi, getBlogPostViaApi } from "mentionwell/api";

const config = {
  apiUrl: process.env.MENTIONWELL_API_URL!,
  siteSlug: process.env.MENTIONWELL_SITE_SLUG!,
  apiKey: process.env.MENTIONWELL_API_KEY!
};

export const listPosts = (page = 1, perPage = 12) =>
  getBlogPostsViaApi(config, page, perPage);

export const getPost = (slug: string) =>
  getBlogPostViaApi(config, slug);

4. Render /blog

// app/blog/page.tsx (Next.js App Router)
import { listPosts } from "@/lib/blog";

export const revalidate = 300;

export default async function BlogIndex() {
  const { posts } = await listPosts(1, 12);
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
          <p>{post.excerpt}</p>
        </li>
      ))}
    </ul>
  );
}

5. Verify

1. Approve a draft in the Mentionwell dashboard so at least one post is published.
2. Visit /blog on your site.
3. You should see the post.

If it's empty, check that all required env vars are set on the running deployment and that the API key matches the one in your Mentionwell dashboard.

What's next

• Pick your delivery architecture → Connect wizard walks you through the right mode for your stack (static / ISR / SSR / git / CMS).
• Add post detail pages → Next.js App Router or your framework's quickstart.
• Wire instant publishing → Webhooks.
• Publish a breaking-news article on demand → Custom articles.
• Make it look good → Styling & theming.
• Stuck? → How it works explains the data model so you can debug from first principles.