How to Integrate Planoly with V0

Open V0 at v0.dev and describe the social media management interface you want to build. Planoly's strongest use cases involve visual content — Instagram grid previews, content calendar views, and media library browsers — so focus your V0 prompt on the visual layout rather than text-heavy interfaces. For a content calendar, describe a weekly or monthly grid where each day cell shows scheduled post thumbnails. For a grid preview tool, describe a 3-column grid showing square thumbnail images in the sequence they will appear on the Instagram profile. Include loading skeleton states for the thumbnails since image loading takes time, and describe the interaction states — what happens when a user clicks on a post card (expand to see full caption, scheduled time, and actions). V0 generates clean grid layouts with Tailwind CSS that work naturally for social media content displays. The shadcn/ui Card and Badge components V0 uses are well-suited for post cards with status indicators. Describe the API route paths your components should fetch from (/api/planoly/posts for scheduled content, /api/planoly/media for uploaded images) so V0 connects the UI to the right endpoints from the start. After generating, push to GitHub using V0's Git panel.

Create the Next.js API routes that proxy requests to the Planoly REST API. Planoly's API base URL and authentication mechanism depend on your account tier — check the Planoly Developer documentation at developers.planoly.com for the current API version and authentication headers. For most Planoly API integrations, authentication uses an API key passed as a Bearer token in the Authorization header alongside your account identifier. The primary endpoints for content management are GET /posts for retrieving scheduled and published posts (filterable by status: scheduled, published, draft), GET /media for the media library, and POST /posts for creating new scheduled posts. Planoly's API responses include post ID, media URL, caption, scheduled time, platform (Instagram, Pinterest), and status. For social media calendar displays, filter the posts response by a date range using start_date and end_date query parameters to fetch only the posts relevant to the calendar view period. For the Instagram grid preview use case, sort posts by scheduled_at ascending to get them in publication order. Cache the posts response with Next.js route revalidation since scheduled content changes infrequently — a 5-minute revalidation prevents excessive API calls while keeping the calendar reasonably fresh. Create a separate route for media uploads if your use case includes uploading new content to Planoly from your custom interface.

1// app/api/planoly/posts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const PLANOLY_API_BASE = 'https://api.planoly.com/v1';
5
6// Cache posts for 5 minutes since scheduling changes infrequently
7export const revalidate = 300;
8
9function getPlanologyHeaders() {
10  return {
11    Authorization: `Bearer ${process.env.PLANOLY_API_KEY}`,
12    Accept: 'application/json',
13    'Content-Type': 'application/json',
14  };
15}
16
17export async function GET(request: NextRequest) {
18  if (!process.env.PLANOLY_API_KEY) {
19    return NextResponse.json(
20      { error: 'Planoly is not configured' },
21      { status: 500 }
22    );
23  }
24
25  const { searchParams } = new URL(request.url);
26  const status = searchParams.get('status') ?? 'scheduled';
27  const startDate = searchParams.get('start_date');
28  const endDate = searchParams.get('end_date');
29  const accountId = process.env.PLANOLY_ACCOUNT_ID;
30
31  const params = new URLSearchParams({ status });
32  if (startDate) params.set('start_date', startDate);
33  if (endDate) params.set('end_date', endDate);
34  if (accountId) params.set('account_id', accountId);
35
36  try {
37    const response = await fetch(
38      `${PLANOLY_API_BASE}/posts?${params.toString()}`,
39      { headers: getPlanologyHeaders() }
40    );
41
42    if (!response.ok) {
43      const error = await response.text();
44      console.error('Planoly API error:', response.status, error);
45      return NextResponse.json(
46        { error: 'Failed to fetch posts from Planoly' },
47        { status: response.status }
48      );
49    }
50
51    const data = await response.json();
52    return NextResponse.json({
53      posts: data.posts ?? data.data ?? data,
54      total: data.total ?? data.count ?? 0,
55    });
56  } catch (error) {
57    const message = error instanceof Error ? error.message : 'Unknown error';
58    console.error('Planoly posts fetch failed:', message);
59    return NextResponse.json(
60      { error: 'Failed to fetch Planoly posts', details: message },
61      { status: 500 }
62    );
63  }
64}

Push your code to GitHub and configure Planoly credentials in Vercel. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add PLANOLY_API_KEY with your API key from Planoly's account settings. If Planoly uses account-scoped API calls (where the account ID determines which Instagram profiles are accessible), add PLANOLY_ACCOUNT_ID with your Planoly account identifier. Neither variable should have the NEXT_PUBLIC_ prefix — they are server-side values. Set all variables for Production, Preview, and Development environments. Click Save and trigger a redeployment. After deployment, visit your social media calendar page on the deployed app and verify that real Planoly scheduled posts appear in the calendar. Check the Vercel function logs (Vercel Dashboard → Functions) if posts do not load — the logs show the exact API error response from Planoly. For development testing, create a .env.local file in your project root with the same variable names and Vercel's vercel env pull command can sync Development-scoped variables to your local file automatically.