How to Integrate Bolt.new with Later

Instagram media publishing requires a specific setup path through Facebook's developer platform — Instagram's own app API is separate from this. First, ensure you have a Facebook Page and an Instagram Business or Creator account connected to it (in Instagram Settings → Account → Linked Accounts). Both must be managed by the same Facebook account. In Facebook Developer Portal (developers.facebook.com), create a new app or use an existing one, then add the Instagram Graph API product. Generate a Long-Lived Page Access Token using the Graph API Explorer: select your app, request the pages_manage_posts, instagram_content_publish, instagram_basic, and pages_read_engagement permissions, generate a User Access Token, then exchange it for a Long-Lived Token (valid for 60 days) using the token exchange endpoint. From the Page Access Token, you can access the connected Instagram Business Account ID by calling GET /me/accounts, then GET /{page-id}?fields=instagram_business_account. Store the Instagram Business Account ID and the access token in your .env file as INSTAGRAM_BUSINESS_ACCOUNT_ID and INSTAGRAM_ACCESS_TOKEN. The Instagram Graph API for media publishing uses a two-step process: first create a media container (POST /{user-id}/media), then publish it (POST /{user-id}/media_publish). For images, provide the image URL directly in the container creation. For videos, Instagram needs to download the video from a public URL — host videos on Supabase Storage or another CDN before submitting to the API. Important: long-lived access tokens expire after 60 days — implement a token refresh mechanism or set a calendar reminder to regenerate the token. In Bolt's WebContainer preview, the Instagram API calls work fine since they're outbound HTTP requests.

1// lib/instagram.ts
2const GRAPH_BASE = 'https://graph.facebook.com/v19.0';
3
4export async function getInstagramFeed(userId: string) {
5  const token = process.env.INSTAGRAM_ACCESS_TOKEN;
6  const fields = 'id,caption,media_type,media_url,thumbnail_url,timestamp,like_count,comments_count';
7  const res = await fetch(
8    `https://graph.instagram.com/${userId}/media?fields=${fields}&access_token=${token}`
9  );
10  if (!res.ok) throw new Error(`Instagram API error: ${res.status}`);
11  return res.json();
12}
13
14export async function createImageContainer(userId: string, imageUrl: string, caption: string) {
15  const token = process.env.INSTAGRAM_ACCESS_TOKEN;
16  const res = await fetch(`${GRAPH_BASE}/${userId}/media`, {
17    method: 'POST',
18    headers: { 'Content-Type': 'application/json' },
19    body: JSON.stringify({
20      image_url: imageUrl,
21      caption,
22      access_token: token,
23    }),
24  });
25  if (!res.ok) throw new Error(`Container creation failed: ${await res.text()}`);
26  return res.json(); // { id: 'creation_id' }
27}
28
29export async function publishMedia(userId: string, creationId: string) {
30  const token = process.env.INSTAGRAM_ACCESS_TOKEN;
31  const res = await fetch(`${GRAPH_BASE}/${userId}/media_publish`, {
32    method: 'POST',
33    headers: { 'Content-Type': 'application/json' },
34    body: JSON.stringify({
35      creation_id: creationId,
36      access_token: token,
37    }),
38  });
39  if (!res.ok) throw new Error(`Publish failed: ${await res.text()}`);
40  return res.json(); // { id: 'post_id' }
41}

The visual content calendar is the core feature — a drag-and-drop grid showing scheduled posts with their image thumbnails. Build this using Supabase as the storage layer and React for the interactive UI. Create a Supabase table called scheduled_posts with columns: id (uuid, primary key), caption (text), media_url (text, the image or video URL), platform (text, e.g., 'instagram', 'tiktok', 'pinterest'), scheduled_at (timestamp with time zone), status (text: 'draft', 'scheduled', 'published', 'failed'), sort_order (integer for drag-drop reordering), created_at (timestamp with time zone). For the visual calendar UI, use a CSS grid layout — a 3-column grid for the Instagram feed preview, or a weekly calendar grid showing posts per day. Each cell in the grid shows the media thumbnail, platform badge, and scheduled time. Implement drag-and-drop to reorder posts within the grid using @hello-pangea/dnd (the actively maintained fork of react-beautiful-dnd). When a post is dragged to a new position, update the sort_order values in Supabase. Add a Media Library section where users can add image URLs (or upload files to Supabase Storage) to have a pool of assets ready for scheduling. The visual calendar UI works entirely in Bolt's WebContainer preview since it reads from and writes to Supabase — no deployment needed to build and test the core features. Deploy to Netlify or Bolt Cloud when you're ready to publish actual posts through the Instagram API.

1// app/api/instagram/publish/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createImageContainer, publishMedia } from '@/lib/instagram';
4
5export async function POST(request: NextRequest) {
6  const { caption, media_url, post_id } = await request.json();
7  const userId = process.env.INSTAGRAM_BUSINESS_ACCOUNT_ID;
8
9  if (!caption || !media_url || !userId) {
10    return NextResponse.json(
11      { error: 'caption, media_url, and INSTAGRAM_BUSINESS_ACCOUNT_ID are required' },
12      { status: 400 }
13    );
14  }
15
16  try {
17    // Step 1: Create media container
18    const container = await createImageContainer(userId, media_url, caption);
19    const creationId = container.id;
20
21    if (!creationId) {
22      return NextResponse.json({ error: 'Failed to create media container' }, { status: 500 });
23    }
24
25    // Wait briefly for Instagram to process the media (recommended)
26    await new Promise((resolve) => setTimeout(resolve, 2000));
27
28    // Step 2: Publish the container
29    const published = await publishMedia(userId, creationId);
30
31    // Update status in Supabase if post_id provided
32    // (Update your Supabase record here using the Supabase client)
33
34    return NextResponse.json({ success: true, instagram_id: published.id });
35  } catch (error) {
36    console.error('Instagram publish error:', error);
37    return NextResponse.json({ error: String(error) }, { status: 500 });
38  }
39}

TikTok's Content Posting API allows apps to upload and publish videos to TikTok on behalf of users. This is the native TikTok equivalent to Later's scheduling feature. To get access: create a developer account at developers.tiktok.com, create an app, and apply for the 'Content Posting API' scope — TikTok reviews these applications. Once approved, you'll have a client key and secret for OAuth authentication. TikTok uses a user-specific OAuth flow: each creator authorizes your app through a redirect to TikTok's auth page, which returns a refresh token that you exchange for access tokens. This OAuth flow requires a deployed redirect URI — it cannot be tested in Bolt's WebContainer preview. For development with your own TikTok account, you can test using a direct token from TikTok's sandbox environment. TikTok video publishing via API uses a multi-step upload process: initialize an upload (POST /v2/post/publish/video/init/), upload the video in chunks to the provided upload URL, then publish the completed upload. The video file must be accessible for upload — for Bolt apps, upload videos to Supabase Storage first (generating a public URL), then pass that URL to TikTok's upload initialization. TikTok's Content Posting API also supports 'PUBLISH_CONTENT_DIRECTLY' and 'UPLOAD_TO_INBOX' modes — the inbox mode creates a draft that the creator reviews before posting, which is often more appropriate for third-party tools. Build the TikTok publishing route to use the inbox mode by default, giving creators control over the final post.

1// lib/tiktok.ts
2const TIKTOK_BASE = 'https://open.tiktokapis.com/v2';
3
4export async function initVideoUpload(
5  accessToken: string,
6  videoSize: number,
7  title: string
8) {
9  const res = await fetch(`${TIKTOK_BASE}/post/publish/video/init/`, {
10    method: 'POST',
11    headers: {
12      Authorization: `Bearer ${accessToken}`,
13      'Content-Type': 'application/json; charset=UTF-8',
14    },
15    body: JSON.stringify({
16      post_info: {
17        title,
18        privacy_level: 'MUTUAL_FOLLOW_FRIENDS', // SELF_ONLY, MUTUAL_FOLLOW_FRIENDS, or PUBLIC_TO_EVERYONE
19        disable_duet: false,
20        disable_comment: false,
21        disable_stitch: false,
22        video_cover_timestamp_ms: 1000,
23      },
24      source_info: {
25        source: 'FILE_UPLOAD',
26        video_size: videoSize,
27        chunk_size: videoSize,
28        total_chunk_count: 1,
29      },
30    }),
31  });
32
33  if (!res.ok) {
34    throw new Error(`TikTok init failed: ${await res.text()}`);
35  }
36
37  return res.json();
38  // Returns: { data: { publish_id, upload_url } }
39}
40
41export async function publishFromInbox(accessToken: string, publishId: string) {
42  // Check upload status
43  const res = await fetch(`${TIKTOK_BASE}/post/publish/status/fetch/`, {
44    method: 'POST',
45    headers: {
46      Authorization: `Bearer ${accessToken}`,
47      'Content-Type': 'application/json',
48    },
49    body: JSON.stringify({ publish_id: publishId }),
50  });
51  return res.json();
52}

After deploying to Netlify or Bolt Cloud, you gain a stable URL that can be shared as the link in an Instagram bio, replacing Later's linkin.bio feature. A custom linkin.bio page in Bolt is straightforward: a mobile-optimized landing page that reads link data from Supabase and displays it as a list of clickable buttons. Deploy your app: click Publish in Bolt to deploy to Bolt Cloud, or push to GitHub and connect to Netlify for automated deployments. Set all environment variables on the hosting platform: INSTAGRAM_ACCESS_TOKEN, INSTAGRAM_BUSINESS_ACCOUNT_ID, TIKTOK_ACCESS_TOKEN (when available), and your Supabase credentials. Create a Supabase table called bio_links with columns: id, title, url, image_url, order_position, active, click_count. Build the /bio page as a Server Component that reads from Supabase and renders the links. Add an admin page at /admin/bio to manage link order and toggle links on/off. Implement click tracking by incrementing the click_count column when a link is clicked — use a server action or API route since direct client-side Supabase calls to update counts work but tracking is better done server-side to prevent client-side manipulation. Add your deployed URL to your Instagram bio. The /bio page is your custom linkin.bio. Unlike Later's linkin.bio, your version has no branding restrictions, is fully customizable, and has no monthly link limits. Optionally add Supabase analytics to see which links drive the most clicks over time.

1// app/bio/page.tsx
2import { createClient } from '@supabase/supabase-js';
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7);
8
9export default async function BioPage() {
10  const { data: links } = await supabase
11    .from('bio_links')
12    .select('*')
13    .eq('active', true)
14    .order('order_position');
15
16  return (
17    <main className="min-h-screen bg-white flex flex-col items-center px-4 py-8 max-w-sm mx-auto">
18      <img
19        src={process.env.NEXT_PUBLIC_BIO_AVATAR_URL || '/avatar.png'}
20        alt="Profile"
21        className="w-20 h-20 rounded-full mb-3"
22      />
23      <h1 className="font-bold text-lg">{process.env.NEXT_PUBLIC_BIO_NAME}</h1>
24      <p className="text-gray-500 text-sm text-center mb-6">{process.env.NEXT_PUBLIC_BIO_TEXT}</p>
25      <div className="w-full space-y-3">
26        {links?.map((link) => (
27          <a
28            key={link.id}
29            href={`/api/bio/click?id=${link.id}&url=${encodeURIComponent(link.url)}`}
30            className="flex items-center gap-3 w-full border rounded-xl p-3 hover:bg-gray-50 transition"
31          >
32            {link.image_url && (
33              <img src={link.image_url} alt="" className="w-10 h-10 rounded-lg object-cover" />
34            )}
35            <span className="font-medium text-center flex-1">{link.title}</span>
36          </a>
37        ))}
38      </div>
39    </main>
40  );
41}