# 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.

## 1. Get your credentials

In the Mentionwell dashboard, open your site and click **Ship**. You'll see three values:

```bash
MENTIONWELL_API_URL=https://mentionwell.com
MENTIONWELL_SITE_SLUG=your-site-slug
MENTIONWELL_API_KEY=bgo_read_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

Paste those into your destination site's environment (`.env.local` for local dev, your hosting provider's env settings for prod).

> **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-reader
```

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-reader/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 three env vars are set on the running deployment and that the API key matches the one in your Mentionwell dashboard.

## What's next

- **Add post detail pages** → [Next.js App Router](/docs/frameworks/nextjs) or your framework's quickstart.
- **Wire instant publishing** → [Webhooks](/docs/webhooks).
- **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