How to Integrate Sendible with V0

Sendible provides API access on Creator and Agency plans. To get your API key, log into Sendible, go to Settings (gear icon) → API & Webhooks, and copy your API key. Sendible uses HTTP Basic authentication where the API key is the username and the password can be any non-empty string — though some Sendible API versions accept a Bearer token format. Check your Sendible account's API documentation section for the exact authentication method your plan uses. The Sendible REST API base URL is https://api.sendible.com/api/v1/ for v1 endpoints. Key endpoints include: /application.json for account info, /services.json for the list of connected social profiles and client accounts, /profile_posts.json for fetching posts for a specific service, /posts.json for the content queue, and /reports.json for analytics data. Before building in V0, test your API key using a tool like curl or a REST client. A basic test request is GET https://api.sendible.com/api/v1/application.json with your key as Basic auth username. A successful response returns your account details. This confirms your API key is valid and your plan includes API access. Take note of your service IDs (social profile IDs) — you'll need these to fetch data for specific client accounts. The /services.json endpoint lists all connected profiles with their IDs, names, and types (Facebook Page, Twitter, Instagram, etc.).

Before creating API routes, generate your dashboard UI components in V0 so you have a clear picture of what data fields you need to fetch. Open V0 at v0.dev and prompt it to generate the social media dashboard layout. Describe the specific components: a client/service selector, a post list or queue view, engagement metric cards, and any chart components you need. V0 generates React components using Tailwind CSS and shadcn/ui by default. Use V0's Design Mode (Option+D) to adjust the white-label branding — colors, logo placement, typography — to match your agency's style. This is free in Design Mode and doesn't consume credits. When V0 generates components with data fetching, it typically uses placeholder data or mock API calls. Review the generated components to understand the data shape they expect: what fields does the post card component need? What format does the chart expect for engagement data? This shapes how you structure your API route responses in the next step. For a white-label dashboard, prompt V0 to include a client selector component that stores the selected client in React state and passes the serviceId to child components as a prop. This creates the multi-client switching behavior without complex state management.

Create Next.js API routes that proxy requests to the Sendible REST API. Because Sendible API keys grant full account access — including all client data and posting permissions — they must never appear in client-side JavaScript. Create a flexible proxy route at app/api/sendible/route.ts that accepts GET requests with an endpoint query parameter, then forwards the request to the appropriate Sendible API endpoint. This design lets your frontend call /api/sendible?endpoint=services to fetch client profiles, /api/sendible?endpoint=posts&service_id=123 to fetch posts for a specific client, and so on — without needing a separate route file for each Sendible endpoint. For the authentication header, Sendible v1 uses HTTP Basic auth with the API key as the username and a placeholder (like 'x') as the password. Base64 encode the credential string in your route handler rather than hardcoding it. Add response caching with next: { revalidate: 60 } for data that doesn't change frequently (services list, profile info). For real-time data like post queues, use no-store to always fetch fresh data. Forward query parameters from your frontend to Sendible by building the URL dynamically from the incoming request's search params, excluding your own 'endpoint' parameter. For the services endpoint specifically — which returns connected social profiles — Sendible returns both individual profiles (Twitter account, Facebook page) and team/client groupings depending on your account structure. Parse the response to organize profiles by client for the client selector component.

1import { NextRequest, NextResponse } from 'next/server';
2
3const SENDIBLE_API_BASE = 'https://api.sendible.com/api/v1';
4
5// Allowed Sendible endpoints to prevent SSRF
6const ALLOWED_ENDPOINTS = new Set([
7  'application',
8  'services',
9  'profile_posts',
10  'posts',
11  'reports',
12  'contacts',
13]);
14
15export async function GET(request: NextRequest) {
16  const apiKey = process.env.SENDIBLE_API_KEY;
17
18  if (!apiKey) {
19    return NextResponse.json(
20      { error: 'Sendible API key not configured' },
21      { status: 500 }
22    );
23  }
24
25  const { searchParams } = new URL(request.url);
26  const endpoint = searchParams.get('endpoint');
27
28  if (!endpoint || !ALLOWED_ENDPOINTS.has(endpoint)) {
29    return NextResponse.json(
30      { error: 'Invalid or missing endpoint parameter' },
31      { status: 400 }
32    );
33  }
34
35  // Forward all query params except 'endpoint'
36  const forwardParams = new URLSearchParams();
37  searchParams.forEach((value, key) => {
38    if (key !== 'endpoint') forwardParams.set(key, value);
39  });
40
41  const url = `${SENDIBLE_API_BASE}/${endpoint}.json${
42    forwardParams.toString() ? `?${forwardParams.toString()}` : ''
43  }`;
44
45  const authHeader = `Basic ${Buffer.from(`${apiKey}:x`).toString('base64')}`;
46
47  try {
48    const response = await fetch(url, {
49      headers: {
50        Authorization: authHeader,
51        Accept: 'application/json',
52      },
53      next: {
54        revalidate: endpoint === 'services' ? 300 : 60,
55      },
56    });
57
58    if (!response.ok) {
59      const errorText = await response.text();
60      return NextResponse.json(
61        { error: `Sendible API error: ${response.status}`, details: errorText },
62        { status: response.status }
63      );
64    }
65
66    const data = await response.json();
67    return NextResponse.json(data);
68  } catch (error) {
69    const message = error instanceof Error ? error.message : 'Unknown error';
70    return NextResponse.json({ error: message }, { status: 500 });
71  }
72}

Store your Sendible API key in Vercel's environment variables. The API key must not have the NEXT_PUBLIC_ prefix since it's a server-only secret that grants full account access including client data and posting permissions. Push your V0 project to GitHub using V0's Git panel. Open your Vercel project at vercel.com/dashboard, go to Settings → Environment Variables. Click Add New, set key = SENDIBLE_API_KEY, paste your API key as the value, and check all three environment scopes: Production, Preview, and Development. Click Save, then go to Deployments and click Redeploy. For local development, create a .env.local file at your project root with SENDIBLE_API_KEY=your_key_here and add it to .gitignore. Now connect your V0-generated dashboard components to the API routes. Update the components to fetch from /api/sendible?endpoint=services for the client list and /api/sendible?endpoint=profile_posts&service_id={id} for post data. Use React's useEffect or Server Component fetch calls depending on your component structure. For the multi-client selector, store the selected serviceId in React state and re-fetch post and metrics data whenever the selection changes. Pass the serviceId as a query parameter to your API routes, which forward it to Sendible. This creates the real-time client switching behavior your agency clients expect.

1# .env.local — never commit this file to git
2SENDIBLE_API_KEY=your_sendible_api_key_here

Deploy your V0 project to Vercel. If connected to GitHub, a push triggers automatic deployment. Otherwise use V0's Publish button or the Vercel Dashboard → Deployments → Redeploy. After deployment (30–60 seconds), open the production URL. The dashboard should load with your real Sendible client accounts in the selector. Test each client to confirm their posts, metrics, and scheduled content load correctly. Compare the numbers to what you see in Sendible's own interface to verify the data is accurate. To verify the proxy is working correctly, open your browser's Developer Tools → Network tab while clicking between clients. You should see requests to /api/sendible?endpoint=... that return JSON — no requests should go directly to api.sendible.com from the browser (this would indicate the API key is being used client-side). Vercel's Dashboard → Functions tab shows your API route's invocation count and any errors. For agency deployments where multiple team members or clients access the dashboard, consider adding authentication — Clerk or Supabase Auth integrate cleanly with V0-generated Next.js apps. Add role-based access so clients can only see their own account's data, not all accounts. RapidDev can help you design the multi-tenant access control layer that maps users to their Sendible service IDs.