# Quickstart

> Get a working /blog page on your site in under 5 minutes. Three env vars, one fetch call.

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

> **Fastest path:** open the [Connect-destination wizard](/docs/connect-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:

```bash
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)

```bash
npm install mentionwell
```

The SDK is a tiny wrapper around `fetch`. You can skip it and call the API directly — see the [API reference](/docs/api) — but the SDK gives you typed responses and HTML cleanup helpers.

## 3. Fetch posts

```ts
// 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`

```tsx
// 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](/docs/connect-wizard) walks you through the right mode for your stack (static / ISR / SSR / git / CMS).
- **Add post detail pages** → [Next.js App Router](/docs/frameworks/nextjs) or your framework's quickstart.
- **Wire instant publishing** → [Webhooks](/docs/webhooks).
- **Publish a breaking-news article on demand** → [Custom articles](/docs/custom-articles).
- **Make it look good** → [Styling & theming](/docs/styling).
- **Stuck?** → [How it works](/docs/concepts) explains the data model so you can debug from first principles.


---

Canonical URL: https://mentionwell.com/docs/quickstart
Live HTML version: https://mentionwell.com/docs/quickstart
Section: Get started
Site index for AI ingestion: https://mentionwell.com/llms.txt
Full reference: https://mentionwell.com/llms-full.txt