How to Integrate Coschedule with V0

CoSchedule API access is available on Marketing Calendar plans and above. To find your API key, log into CoSchedule and navigate to Settings (gear icon, top right) → API. If you do not see an API section, your plan may not include API access — check CoSchedule's plan comparison or contact their support. Once you locate your API key, copy it immediately and store it somewhere secure (like a password manager) before closing the page. This key authenticates all API requests, so treat it like a password. If it is ever exposed, regenerate it immediately from the same Settings → API page. CoSchedule's REST API base URL is https://api.coschedule.com. All requests require the api_key parameter either as a query string or Authorization header — we will use the query string approach in this guide, though appending it as a header is more secure for production. The API follows REST conventions: GET for reading data, POST for creating items, PUT/PATCH for updating, and DELETE for removing items. Note that CoSchedule's API documentation is available at coschedule.com/api but the depth of documentation varies by endpoint. The most commonly used and well-documented endpoints are for calendar items, projects, and social profiles — which cover the majority of marketing dashboard use cases.

Create app/api/coschedule/route.ts as your main API proxy for CoSchedule requests. This route handles GET requests for fetching calendar items and POST requests for creating new scheduled content. The proxy pattern keeps your API key server-side so it is never sent to the browser. The GET handler fetches calendar items for a date range, which is the most common use case for marketing dashboards. CoSchedule's calendar endpoint accepts from and to date parameters in ISO 8601 format (YYYY-MM-DD). The response includes all scheduled items in that range: blog posts, social messages, events, and tasks. The POST handler creates new social messages or calendar items. The request body structure depends on the item type — social messages require a message, social_profile_ids array, and scheduled_date; blog posts require title and publish_date. Validate the request body before forwarding to CoSchedule to return helpful errors when required fields are missing. Error handling is important here because CoSchedule returns different HTTP status codes depending on the error type: 401 for invalid API key, 403 for insufficient permissions, 404 for items that do not exist, and 422 for validation errors with a JSON body describing what failed. Surface these errors clearly in your route response so your frontend can display meaningful messages rather than generic 'Something went wrong' messages.

1import { NextRequest, NextResponse } from 'next/server';
2
3const COSCHEDULE_API_URL = 'https://api.coschedule.com';
4
5function getApiKey() {
6  const key = process.env.COSCHEDULE_API_KEY;
7  if (!key) throw new Error('COSCHEDULE_API_KEY environment variable not set');
8  return key;
9}
10
11export async function GET(request: NextRequest) {
12  const { searchParams } = new URL(request.url);
13  const from = searchParams.get('from') || new Date().toISOString().split('T')[0];
14  const to = searchParams.get('to') || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
15
16  try {
17    const apiKey = getApiKey();
18    const url = new URL(`${COSCHEDULE_API_URL}/calendar_items`);
19    url.searchParams.set('api_key', apiKey);
20    url.searchParams.set('from', from);
21    url.searchParams.set('to', to);
22
23    const response = await fetch(url.toString(), {
24      headers: { 'Content-Type': 'application/json' },
25      next: { revalidate: 60 }, // Cache for 60 seconds
26    });
27
28    if (!response.ok) {
29      const error = await response.json().catch(() => ({ message: 'CoSchedule API error' }));
30      return NextResponse.json(
31        { error: error.message || `CoSchedule API returned ${response.status}` },
32        { status: response.status }
33      );
34    }
35
36    const data = await response.json();
37    return NextResponse.json(data);
38  } catch (error) {
39    console.error('CoSchedule API error:', error);
40    return NextResponse.json({ error: 'Failed to fetch calendar data' }, { status: 500 });
41  }
42}
43
44export async function POST(request: NextRequest) {
45  const body = await request.json();
46
47  const { type, message, social_profile_ids, scheduled_date, title } = body;
48
49  if (!type) {
50    return NextResponse.json({ error: 'Item type is required (social_message or calendar_item)' }, { status: 400 });
51  }
52
53  try {
54    const apiKey = getApiKey();
55    const endpoint = type === 'social_message' ? '/social_messages' : '/calendar_items';
56    const url = `${COSCHEDULE_API_URL}${endpoint}?api_key=${apiKey}`;
57
58    const response = await fetch(url, {
59      method: 'POST',
60      headers: { 'Content-Type': 'application/json' },
61      body: JSON.stringify({
62        message,
63        social_profile_ids,
64        scheduled_date,
65        title,
66      }),
67    });
68
69    if (!response.ok) {
70      const error = await response.json().catch(() => ({ message: 'Failed to create item' }));
71      return NextResponse.json(
72        { error: error.message || 'CoSchedule API error' },
73        { status: response.status }
74      );
75    }
76
77    const data = await response.json();
78    return NextResponse.json(data, { status: 201 });
79  } catch (error) {
80    console.error('CoSchedule POST error:', error);
81    return NextResponse.json({ error: 'Failed to create calendar item' }, { status: 500 });
82  }
83}

Marketing dashboards need to know which social profiles are available for scheduling. Create app/api/coschedule/profiles/route.ts to fetch the list of connected social profiles from CoSchedule. This endpoint is used to populate the social profile selector in your post creation forms. CoSchedule's social profiles endpoint returns each profile with its id, type (twitter, facebook, linkedin, etc.), name, username, and avatar URL. Cache this data aggressively — social profiles rarely change — using Next.js's built-in fetch cache with a long revalidation window. This separate endpoint pattern keeps concerns clean: your main calendar route handles scheduling data, while the profiles route handles authentication-related account configuration. If you need to add other lookup endpoints later (tag lists, project templates), the same pattern extends naturally. For the frontend, V0 can generate a multi-select component that calls /api/coschedule/profiles on mount and displays the connected social accounts with their icons and usernames. Users select which profiles to schedule to, and the IDs are submitted with the post creation request.

1import { NextResponse } from 'next/server';
2
3export async function GET() {
4  const apiKey = process.env.COSCHEDULE_API_KEY;
5  if (!apiKey) {
6    return NextResponse.json({ error: 'CoSchedule API key not configured' }, { status: 500 });
7  }
8
9  try {
10    const response = await fetch(
11      `https://api.coschedule.com/social_profiles?api_key=${apiKey}`,
12      {
13        headers: { 'Content-Type': 'application/json' },
14        next: { revalidate: 3600 }, // Cache profiles for 1 hour
15      }
16    );
17
18    if (!response.ok) {
19      return NextResponse.json(
20        { error: `CoSchedule API returned ${response.status}` },
21        { status: response.status }
22      );
23    }
24
25    const profiles = await response.json();
26    return NextResponse.json({ profiles });
27  } catch (error) {
28    console.error('CoSchedule profiles error:', error);
29    return NextResponse.json({ error: 'Failed to fetch social profiles' }, { status: 500 });
30  }
31}

Add your CoSchedule API key to Vercel environment variables so your deployed API routes can authenticate with CoSchedule. The key must stay server-side — never use the NEXT_PUBLIC_ prefix for API keys like this one. In Vercel Dashboard → your project → Settings → Environment Variables, click Add. Set the name as COSCHEDULE_API_KEY and paste your API key as the value. Select all three environment scopes (Production, Preview, Development) unless you want to use different CoSchedule workspaces per environment. After adding the variable, redeploy your project. In Vercel, go to Deployments → click the three dots on your latest deployment → Redeploy. Environment variables only take effect after a redeployment — this is a common source of confusion where developers add a variable but it appears as undefined because the deployment is still using the old build. Once deployed, test your integration by navigating to your deployed URL and checking the marketing calendar dashboard. Open your browser's Network tab and confirm that requests go to /api/coschedule (your API route) and not directly to coschedule.com — this confirms the API key is properly proxied server-side and not exposed in the browser. For complex integrations requiring custom CoSchedule workflows or permission structures, RapidDev's team can help configure multi-workspace setups and advanced content scheduling automations.