How to Integrate Agorapulse with V0

Agorapulse's REST API uses Bearer token authentication. Your API key acts as both the identifier and the secret — it must be kept server-side at all times. To generate an API key, log in to Agorapulse at app.agorapulse.com. Click your profile avatar in the top-right corner, then go to Account Settings. Look for the Developer Settings or API section in the sidebar. If you don't see an API section, check whether your Agorapulse plan supports API access — API access is available on Medium plan and above. In the API settings page, click Generate New Token or Create API Key. Give it a descriptive name like 'V0 Dashboard' so you can identify and revoke it later. Copy the API key immediately — it may not be shown again in full. Also note your Agorapulse workspace's profile IDs — you can find these by browsing the Agorapulse API documentation or by making a test request to the /social-profiles endpoint after setup. The API base URL is https://api.agorapulse.com. Your API key goes in the Authorization header as 'Bearer YOUR_API_KEY' on every request. Keep this key private and never include it in client-side code or commit it to your repository.

Open V0 at v0.dev and describe the social media dashboard you want to build. Social inbox UIs share a common pattern — a three-panel layout: a left sidebar for social profiles and filter categories, a center panel listing conversation items, and a right panel showing the selected conversation thread. Describe this layout in detail and ask V0 to generate it with mock data. The mock data should mirror the structure you'll receive from the Agorapulse API: each inbox item has a platform name (facebook/instagram/twitter/linkedin), an author with a name and avatar URL, a message preview, a timestamp, and a status. Each conversation thread has an array of messages with author, content, and timestamp. Using these field names in mock data means wiring up real API data later is straightforward. Use V0's Design Mode to apply brand colors, adjust spacing, and refine the conversation list styling. The platform icons (Facebook's blue, Instagram's gradient, LinkedIn's blue, Twitter/X's black) add important visual context — ask V0 to include them as colored dots or emoji indicators in the mock data view.

Build the Next.js API routes that call the Agorapulse REST API. Start by creating a utility at lib/agorapulse.ts that provides an authenticated fetch wrapper — it adds the Authorization: Bearer header on every request to the Agorapulse API base URL (https://api.agorapulse.com). The Agorapulse API is organized around social profiles. Most inbox operations require a profileId parameter. Your first route should be GET /api/agorapulse/profiles — this returns all social profiles connected to your Agorapulse account with their IDs, names, and platforms. Your frontend can use these IDs for subsequent inbox and metrics requests. The main inbox route GET /api/agorapulse/inbox takes optional query parameters for profileId, status (inbox/done/assigned), and cursor for pagination. It returns an array of conversation items. Each item includes the author details, message content, platform, timestamp, and current status. For posting, create POST /api/agorapulse/posts to schedule content to a social profile. The request body should include the profileId, message text, scheduled time (ISO 8601 format), and optionally media URLs. Agorapulse's API uses cursor-based pagination for inbox results — the response includes a nextCursor value you pass as a query parameter to fetch the next page. Handle this in your API route by forwarding the cursor parameter from your frontend query string.

1// lib/agorapulse.ts
2const AGORAPULSE_BASE_URL = 'https://api.agorapulse.com';
3
4export async function agorapulseFetch(path: string, options?: RequestInit) {
5  const res = await fetch(`${AGORAPULSE_BASE_URL}${path}`, {
6    ...options,
7    headers: {
8      Authorization: `Bearer ${process.env.AGORAPULSE_API_KEY}`,
9      'Content-Type': 'application/json',
10      Accept: 'application/json',
11      ...options?.headers,
12    },
13  });
14  if (!res.ok) {
15    throw new Error(`Agorapulse API error: ${res.status} ${res.statusText}`);
16  }
17  return res.json();
18}
19
20// app/api/agorapulse/profiles/route.ts
21import { NextResponse } from 'next/server';
22import { agorapulseFetch } from '@/lib/agorapulse';
23
24export async function GET() {
25  try {
26    const data = await agorapulseFetch('/social-profiles');
27    return NextResponse.json({ profiles: data.data || data });
28  } catch (error) {
29    return NextResponse.json({ error: 'Failed to fetch profiles' }, { status: 500 });
30  }
31}
32
33// app/api/agorapulse/inbox/route.ts
34import { NextRequest, NextResponse } from 'next/server';
35import { agorapulseFetch } from '@/lib/agorapulse';
36
37export async function GET(req: NextRequest) {
38  const profileId = req.nextUrl.searchParams.get('profileId');
39  const status = req.nextUrl.searchParams.get('status') || 'inbox';
40  const cursor = req.nextUrl.searchParams.get('cursor');
41
42  try {
43    const queryParts = [`status=${status}`, 'limit=20'];
44    if (profileId) queryParts.push(`profile_id=${profileId}`);
45    if (cursor) queryParts.push(`cursor=${cursor}`);
46
47    const data = await agorapulseFetch(`/inbox?${queryParts.join('&')}`);
48    return NextResponse.json({
49      items: data.data || [],
50      nextCursor: data.meta?.next_cursor || null,
51    });
52  } catch (error) {
53    return NextResponse.json({ error: 'Failed to fetch inbox' }, { status: 500 });
54  }
55}
56
57// app/api/agorapulse/posts/route.ts
58import { NextRequest, NextResponse } from 'next/server';
59import { agorapulseFetch } from '@/lib/agorapulse';
60
61export async function POST(req: NextRequest) {
62  try {
63    const body = await req.json();
64    const post = await agorapulseFetch('/publications', {
65      method: 'POST',
66      body: JSON.stringify({
67        profile_id: body.profileId,
68        text: body.message,
69        scheduled_at: body.scheduledAt, // ISO 8601
70        type: 'scheduled',
71      }),
72    });
73    return NextResponse.json({ id: post.data?.id }, { status: 201 });
74  } catch (error) {
75    return NextResponse.json({ error: 'Failed to schedule post' }, { status: 500 });
76  }
77}

Update the V0-generated inbox component to fetch real data from your API routes. Since the inbox requires interactive selection — clicking a profile in the sidebar, selecting a conversation, switching status tabs — mark the inbox component as a client component with 'use client'. On mount, fetch /api/agorapulse/profiles to populate the left sidebar. When a profile is selected or a status tab is clicked, fetch /api/agorapulse/inbox with the relevant profileId and status parameters. The Agorapulse API uses cursor-based pagination — when the user scrolls to the bottom of the inbox list or clicks Load More, pass the nextCursor value from the previous response as a cursor query parameter to append the next page of results to the existing list. For the conversation thread view, clicking an inbox item should open the thread. If Agorapulse's API provides thread detail via a separate endpoint, create a GET /api/agorapulse/inbox/[id] route. For the post scheduling form, collect the message text, select the target profile(s), and set a scheduled date/time. POST this to /api/agorapulse/posts. Show a success toast with the scheduled post's link after a successful response. For complex multi-profile campaigns or inbox moderation workflows, RapidDev can help architect efficient data fetching and caching strategies for high-volume social accounts.

1'use client';
2
3import { useEffect, useState, useCallback } from 'react';
4
5interface InboxItem {
6  id: string;
7  author: { name: string; avatar?: string };
8  message: string;
9  platform: string;
10  created_at: string;
11  status: string;
12}
13
14interface Profile {
15  id: string;
16  name: string;
17  network: string;
18}
19
20export default function SocialInbox() {
21  const [profiles, setProfiles] = useState<Profile[]>([]);
22  const [selectedProfileId, setSelectedProfileId] = useState<string | null>(null);
23  const [items, setItems] = useState<InboxItem[]>([]);
24  const [nextCursor, setNextCursor] = useState<string | null>(null);
25  const [loading, setLoading] = useState(false);
26  const [status, setStatus] = useState('inbox');
27
28  useEffect(() => {
29    fetch('/api/agorapulse/profiles')
30      .then((r) => r.json())
31      .then((d) => setProfiles(d.profiles || []));
32  }, []);
33
34  const fetchInbox = useCallback(async (cursor?: string) => {
35    setLoading(true);
36    const params = new URLSearchParams({ status });
37    if (selectedProfileId) params.set('profileId', selectedProfileId);
38    if (cursor) params.set('cursor', cursor);
39
40    const data = await fetch(`/api/agorapulse/inbox?${params}`).then((r) => r.json());
41    setItems((prev) => cursor ? [...prev, ...data.items] : data.items);
42    setNextCursor(data.nextCursor);
43    setLoading(false);
44  }, [selectedProfileId, status]);
45
46  useEffect(() => { fetchInbox(); }, [fetchInbox]);
47
48  return (
49    <div className="flex h-screen">
50      <div className="w-64 border-r p-4">
51        {profiles.map((p) => (
52          <button
53            key={p.id}
54            onClick={() => setSelectedProfileId(p.id)}
55            className={`w-full text-left p-2 rounded mb-1 ${selectedProfileId === p.id ? 'bg-blue-50' : ''}`}
56          >
57            {p.name}
58          </button>
59        ))}
60      </div>
61      <div className="flex-1 overflow-y-auto p-4">
62        {items.map((item) => (
63          <div key={item.id} className="border-b py-3">
64            <p className="font-medium">{item.author?.name}</p>
65            <p className="text-sm text-gray-600">{item.message}</p>
66          </div>
67        ))}
68        {nextCursor && (
69          <button onClick={() => fetchInbox(nextCursor)} className="mt-4 px-4 py-2 bg-gray-100 rounded">
70            Load more
71          </button>
72        )}
73      </div>
74    </div>
75  );
76}

Your Agorapulse API key must be stored as a server-only environment variable — no NEXT_PUBLIC_ prefix. Add AGORAPULSE_API_KEY to your Vercel project under Settings → Environment Variables. Apply it to both Production and Preview environments. For local development, add it to your .env.local file (never commit this file). After saving the variable, push your code to GitHub to trigger a Vercel deployment. Once deployed, navigate to your production URL and verify that social profiles appear in the sidebar and inbox items load correctly. Test the post scheduling form by submitting a test post scheduled for a few minutes in the future and confirming it appears in your Agorapulse publishing queue. Check the Vercel Function Logs (Dashboard → Your Project → Functions tab) for any API errors. Common issues at this stage are 401 Unauthorized (wrong API key or missing env var) and 403 Forbidden (your Agorapulse plan doesn't include API access). If you're on Agorapulse's free plan, upgrade to Medium or above to unlock API credentials.

1# .env.local — never commit this file
2# Agorapulse credentials (server-only, no NEXT_PUBLIC_ prefix)
3AGORAPULSE_API_KEY=your_agorapulse_api_key_here