How to Integrate Bolt.new with Planoly

Before writing any code, it is important to understand why Planoly cannot be directly integrated with Bolt.new and what the realistic options are. Planoly intentionally does not offer a public API. Their product is a closed SaaS platform where all content planning, grid visualization, and scheduling happens within their interface. There are no webhook endpoints, no OAuth app registration, and no developer documentation for external access. This is not an oversight — Planoly's business model depends on users staying in their platform. Attempts to reverse-engineer their API or use browser automation to interact with Planoly from external code violate their Terms of Service. Given this reality, you have three practical paths. Path A is using Instagram's Graph API directly. Meta provides official API access for Instagram Business and Creator accounts, supporting post publishing, scheduling via content publishing APIs, media management, and analytics. This gives you everything Planoly does (and more) but requires building the UI yourself. Path B is using Buffer's API. Buffer is a social media scheduling platform with a proper developer API, access token authentication, and endpoints for scheduling posts across Instagram, Facebook, Twitter, and LinkedIn. Buffer's API is cleaner and more developer-friendly than Instagram's Graph API. Path C is using Planoly as a standalone tool alongside your Bolt app without integration — this is the zero-code-effort option for teams that do not need the tools to be connected programmatically. For most Bolt.new developers, the question is whether the content calendar needs to be inside the Bolt app (choose Path A or B) or can remain in Planoly as a separate tool (choose Path C). If team members need to manage scheduled content from the same interface as other business operations, Path A or B makes sense. If content planning is a separate workflow from the rest of the app, Path C avoids unnecessary complexity. This guide proceeds with Path A (Instagram Graph API) as the primary approach, with Buffer as the secondary option. The Instagram Graph API requires setting up a Facebook App and generating an access token — a one-time setup that takes about 15 minutes.

1# .env
2# Instagram Graph API credentials — server-side only, never NEXT_PUBLIC_
3# Access token: generated via Facebook Developer console or Graph API Explorer
4# Long-lived tokens are valid for 60 days; use token refresh before expiry
5INSTAGRAM_ACCESS_TOKEN=your_long_lived_access_token_here
6
7# Instagram Business Account ID
8# Find in Meta Business Manager or via GET /me/accounts?access_token={token}
9INSTAGRAM_ACCOUNT_ID=your_instagram_account_id
10
11# Buffer access token (optional alternative to direct Instagram API)
12# Get from buffer.com/developers/apps after creating a Buffer developer app
13BUFFER_ACCESS_TOKEN=your_buffer_access_token_here

Create the Instagram Graph API service module for fetching posts and publishing content. Instagram's Graph API for Business accounts uses Meta's Graph API v18.0+ endpoints with an access token that is specific to your Instagram Business or Creator account. To get your Instagram Account ID: make a GET request to https://graph.facebook.com/v18.0/me/accounts?access_token={your_token}. This returns the Facebook pages connected to your account. For each page, call GET /v18.0/{page_id}?fields=instagram_business_account&access_token={token} to get the Instagram account ID linked to that page. This ID is a numeric string you store as INSTAGRAM_ACCOUNT_ID. The key Instagram API endpoints for a content calendar are: GET /{account_id}/media (retrieve published posts with media URLs, captions, timestamps, and engagement metrics), POST /{account_id}/media (create a media container for an image or video to publish), POST /{account_id}/media_publish (publish a previously created media container), and GET /{media_id}/insights (per-post performance metrics). Publishing to Instagram via the Graph API is a two-step process: first create a media container with the image URL and caption (step 1 returns a container ID), then publish the container (step 2 makes it live on Instagram). Image media must be hosted at a publicly accessible URL — you cannot upload a file from a local path. This is where Supabase Storage fits in: upload the image to a public Supabase bucket and use the resulting URL in the media container creation call. Outbound calls to graph.facebook.com work in Bolt's WebContainer preview since they use standard HTTPS. You can test fetching posts and retrieving analytics in the Bolt preview during development.

1// lib/instagram.ts
2const IG_BASE = 'https://graph.facebook.com/v18.0';
3
4function getToken(): string {
5  const token = process.env.INSTAGRAM_ACCESS_TOKEN;
6  if (!token) throw new Error('INSTAGRAM_ACCESS_TOKEN not configured');
7  return token;
8}
9
10function getAccountId(): string {
11  const id = process.env.INSTAGRAM_ACCOUNT_ID;
12  if (!id) throw new Error('INSTAGRAM_ACCOUNT_ID not configured');
13  return id;
14}
15
16async function igFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
17  const url = new URL(`${IG_BASE}${path}`);
18  url.searchParams.set('access_token', getToken());
19
20  const res = await fetch(url.toString(), {
21    ...options,
22    headers: { 'Content-Type': 'application/json', ...options.headers },
23  });
24
25  const json = await res.json();
26  if (json.error) {
27    throw Object.assign(new Error(json.error.message), { code: json.error.code, type: json.error.type });
28  }
29  return json as T;
30}
31
32export interface InstagramPost {
33  id: string;
34  caption?: string;
35  media_url: string;
36  thumbnail_url?: string;
37  timestamp: string;
38  like_count?: number;
39  comments_count?: number;
40}
41
42export async function getPosts(limit = 20): Promise<InstagramPost[]> {
43  const accountId = getAccountId();
44  const fields = 'id,caption,media_url,thumbnail_url,timestamp,like_count,comments_count';
45  const data = await igFetch<{ data: InstagramPost[] }>(
46    `/${accountId}/media?fields=${fields}&limit=${limit}`
47  );
48  return data.data;
49}
50
51export async function createMediaContainer(
52  imageUrl: string,
53  caption: string
54): Promise<{ id: string }> {
55  const accountId = getAccountId();
56  return igFetch(`/${accountId}/media`, {
57    method: 'POST',
58    body: JSON.stringify({ image_url: imageUrl, caption }),
59  });
60}
61
62export async function publishContainer(containerId: string): Promise<{ id: string }> {
63  const accountId = getAccountId();
64  return igFetch(`/${accountId}/media_publish`, {
65    method: 'POST',
66    body: JSON.stringify({ creation_id: containerId }),
67  });
68}

The core UI of any Instagram planning tool is the 3-column grid that mimics the Instagram profile layout. This visual preview shows content creators how their posts will look on their Instagram profile before publishing — the primary reason Planoly is popular. Build the grid using CSS Grid with 3 equal columns. Each cell displays a post thumbnail as a square (1:1 aspect ratio). Scheduled posts (not yet published) should be visually distinguished from published posts — use a semi-transparent overlay or a 'Scheduled' badge on planned content. Drag-and-drop reordering lets creators rearrange the planned sequence. The content calendar has two views: a grid view (the Instagram profile preview) and a calendar view (showing scheduled posts by date). Toggle between views using tabs. The calendar view uses a standard monthly calendar layout with post thumbnails in the corresponding date cells. For storing scheduled posts, create a Supabase table with columns for image_url (the Supabase Storage URL), caption, scheduled_at (timestamp), status (draft/scheduled/published), and instagram_post_id (populated after publishing). The dashboard fetches both published posts from the Instagram API and scheduled-but-not-yet-published posts from Supabase, merging them into a single sorted feed. For media uploads, use Supabase Storage to host images at publicly accessible URLs. Bolt.new's WebContainer cannot handle file uploads to local disk (the file system is ephemeral), so all media must go to an external storage service. Supabase Storage is the natural choice since it integrates with the same Supabase project you are likely using for the posts database.

1// app/api/instagram/posts/route.ts
2import { NextResponse } from 'next/server';
3import { getPosts } from '@/lib/instagram';
4
5export async function GET() {
6  try {
7    const posts = await getPosts(30);
8    return NextResponse.json({
9      posts: posts.map((p) => ({
10        id: p.id,
11        imageUrl: p.media_url,
12        thumbnailUrl: p.thumbnail_url ?? p.media_url,
13        caption: p.caption ?? '',
14        publishedAt: p.timestamp,
15        likes: p.like_count ?? 0,
16        comments: p.comments_count ?? 0,
17        status: 'published',
18      })),
19    });
20  } catch (error) {
21    const message = error instanceof Error ? error.message : 'Unknown error';
22    return NextResponse.json({ error: message }, { status: 500 });
23  }
24}

If you need to schedule content across multiple social platforms (not just Instagram) or prefer a simpler developer experience than the Instagram Graph API, Buffer's API is an excellent alternative. Buffer supports Instagram, Facebook, Twitter/X, LinkedIn, Pinterest, and TikTok from a single API endpoint. Buffer uses OAuth 2.0 for authentication, but for single-user access to your own Buffer account, you can get a personal access token directly from Buffer's developer portal at buffer.com/developers/apps without building a full OAuth flow. Create a Buffer application, authorize it for your account, and copy the access token. Buffer's API is notably simpler than Instagram's. Creating a scheduled post requires a single POST to https://api.bufferapp.com/1/updates/create.json with the text content, scheduled_at timestamp (Unix timestamp or ISO string), profile_ids (array of Buffer profile IDs for the platforms to post on), and optional media object with photo URLs. Buffer handles all platform-specific formatting, image sizing, and API calls to each platform. To get your profile IDs, call GET https://api.bufferapp.com/1/profiles.json?access_token={token}. This returns your connected social profiles with their IDs — a short alphanumeric string like '5baf5a8c512b1c6c3cdc8e57' for each connected account. One important note about Buffer in Bolt's WebContainer: outbound calls to api.bufferapp.com work fine in the preview since they use standard HTTPS. The only limitation is if Buffer implements OAuth callbacks that need a stable redirect URI — but for personal access token authentication, you can test the full scheduling workflow directly in the Bolt preview without deploying.

1// lib/buffer.ts
2const BUFFER_BASE = 'https://api.bufferapp.com/1';
3
4export async function bufferFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
5  const token = process.env.BUFFER_ACCESS_TOKEN;
6  if (!token) throw new Error('BUFFER_ACCESS_TOKEN not configured');
7
8  const url = new URL(`${BUFFER_BASE}${endpoint}`);
9  if (options.method !== 'POST') {
10    url.searchParams.set('access_token', token);
11  }
12
13  const res = await fetch(url.toString(), {
14    ...options,
15    ...(options.method === 'POST' && {
16      body: (() => {
17        const form = new URLSearchParams();
18        form.append('access_token', token);
19        if (options.body) {
20          const body = JSON.parse(options.body as string);
21          for (const [k, v] of Object.entries(body)) {
22            if (Array.isArray(v)) {
23              v.forEach((item) => form.append(`${k}[]`, String(item)));
24            } else {
25              form.append(k, String(v));
26            }
27          }
28        }
29        return form;
30      })(),
31      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
32    }),
33  });
34
35  return res.json();
36}
37
38export async function getProfiles() {
39  return bufferFetch<Array<{ id: string; service: string; formatted_username: string }>>(
40    '/profiles.json'
41  );
42}
43
44export async function schedulePost(
45  profileIds: string[],
46  text: string,
47  scheduledAt: string,
48  photoLink?: string
49) {
50  return bufferFetch<{ success: boolean; updates: Array<{ id: string }> }>(
51    '/updates/create.json',
52    {
53      method: 'POST',
54      body: JSON.stringify({
55        profile_ids: profileIds,
56        text,
57        scheduled_at: scheduledAt,
58        ...(photoLink && { 'media[photo]': photoLink }),
59      }),
60    }
61  );
62}