How to Integrate Bolt.new with SocialBee

SocialBee's REST API requires an API key for authentication. Log in to your SocialBee account and navigate to your account settings — look for an API or Integrations section. The API key is typically available on Pro and Agency plans; if you don't see it, contact SocialBee support or check your plan's features. Once you have the API key, store it in your Bolt project's .env file as SOCIALBEE_API_KEY. Before building any API routes, it's worth understanding SocialBee's core data model: Profiles (connected social media accounts — Facebook, Instagram, Twitter, LinkedIn, Pinterest, TikTok), Categories (content buckets that cycle through posting schedules), and Posts (individual pieces of content assigned to a category and profile combination). The API is organized around these entities. All API requests use Bearer token authentication with your API key in the Authorization header. SocialBee's API uses standard REST conventions with JSON request and response bodies. Rate limits depend on your plan — Pro plans typically allow several hundred requests per hour. Build token-efficient API routes that fetch only the data you need and cache responses where appropriate. The base API URL is typically https://app.socialbee.com/api/v1 — verify this in SocialBee's developer documentation or by contacting support, as API URLs can change.

1// lib/socialbee.ts
2const SOCIALBEE_BASE = 'https://app.socialbee.com/api/v1';
3
4async function socialBeeRequest<T>(
5  endpoint: string,
6  method: string = 'GET',
7  body?: Record<string, unknown>
8): Promise<T> {
9  const response = await fetch(`${SOCIALBEE_BASE}/${endpoint}`, {
10    method,
11    headers: {
12      Authorization: `Bearer ${process.env.SOCIALBEE_API_KEY}`,
13      'Content-Type': 'application/json',
14    },
15    ...(body ? { body: JSON.stringify(body) } : {}),
16  });
17
18  if (!response.ok) {
19    throw new Error(`SocialBee API error: ${response.status} ${response.statusText}`);
20  }
21
22  return response.json();
23}
24
25export const getProfiles = () => socialBeeRequest('profiles');
26export const getCategories = () => socialBeeRequest('categories');
27export const getPosts = (status?: string, profileId?: string) => {
28  const params = new URLSearchParams();
29  if (status) params.set('status', status);
30  if (profileId) params.set('profile_id', profileId);
31  const query = params.toString();
32  return socialBeeRequest(`posts${query ? '?' + query : ''}`);
33};
34
35export const createPost = (data: Record<string, unknown>) =>
36  socialBeeRequest('posts', 'POST', data);

With the SocialBee API utility ready, build the core scheduling interface — a form where users can compose a post, select which content category to assign it to, choose target social profiles, optionally upload an image, and submit it to SocialBee. The SocialBee API accepts new posts via a POST request to the posts endpoint with the post content, category ID, and profile IDs. Fetch available categories and profiles on component mount so users can select from dropdowns populated with their actual SocialBee data. When a post is created via the API, SocialBee adds it to the selected category's queue. The post will be published according to the category's posting schedule — SocialBee manages the timing automatically based on your category schedule configuration. For image attachments, SocialBee's API typically accepts image URLs rather than file uploads — host images on a CDN or Supabase Storage and pass the URL in the API request. If your Bolt app uses Supabase, you can upload images to Supabase Storage and pass the resulting public URL to SocialBee. Implementing the scheduling form with proper error handling is important — SocialBee may reject posts that are too long for certain platforms (Twitter's 280 character limit vs. Facebook's longer limit), so add character count validation per platform. A character counter that shows remaining characters based on the most restrictive platform in the selected targets is a useful UX addition.

1// app/api/socialbee/schedule/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createPost } from '@/lib/socialbee';
4
5export async function POST(request: NextRequest) {
6  const { caption, image_url, category_id, profile_ids } = await request.json();
7
8  if (!caption || !category_id || !profile_ids?.length) {
9    return NextResponse.json(
10      { error: 'caption, category_id, and profile_ids are required' },
11      { status: 400 }
12    );
13  }
14
15  if (caption.length > 2200) {
16    return NextResponse.json(
17      { error: 'Caption exceeds maximum length' },
18      { status: 400 }
19    );
20  }
21
22  try {
23    const result = await createPost({
24      content: caption,
25      ...(image_url ? { media: [{ url: image_url }] } : {}),
26      category_id,
27      profile_ids,
28    });
29
30    return NextResponse.json(result);
31  } catch (error) {
32    console.error('SocialBee post creation failed:', error);
33    return NextResponse.json(
34      { error: 'Failed to create post in SocialBee' },
35      { status: 500 }
36    );
37  }
38}

The content calendar view is the centerpiece of most social media management dashboards — it shows all scheduled posts in a visual grid so your team can spot gaps in coverage, check the content mix across categories, and plan ahead. Build the calendar using scheduled post data from the SocialBee API combined with React state management. Fetch scheduled posts for the current month on load. Each post has metadata including the content, category, target profiles, and the scheduled publication time (which SocialBee calculates based on the category schedule). Group posts by day and display them in a monthly grid layout. Use category colors to visually distinguish content types — assign a color to each category name in your app's configuration. A useful addition is a category distribution bar or pie chart showing the current month's post count per category — teams managing content for multiple brands or products benefit from seeing whether categories are balanced. For the calendar itself, you can build a simple grid with CSS grid or use a React calendar library. Each day cell shows the post count and category badges. Clicking a day expands a detail panel showing all posts for that day with edit or delete options. Real-time updates (polling every few minutes) keep the calendar current if multiple team members are adding content. Important: the SocialBee API call to fetch posts works in Bolt's WebContainer preview since it's an outbound HTTP call — no deployment needed to build and test the dashboard.

1// app/api/socialbee/posts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getPosts } from '@/lib/socialbee';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const status = searchParams.get('status') || undefined;
8  const profileId = searchParams.get('profile_id') || undefined;
9
10  try {
11    const data = await getPosts(status, profileId);
12    return NextResponse.json(data);
13  } catch (error) {
14    console.error('SocialBee posts fetch failed:', error);
15    return NextResponse.json({ error: 'Failed to fetch posts' }, { status: 500 });
16  }
17}
18
19// app/api/socialbee/categories/route.ts
20import { NextResponse } from 'next/server';
21import { getCategories } from '@/lib/socialbee';
22
23export async function GET() {
24  try {
25    const data = await getCategories();
26    return NextResponse.json(data);
27  } catch (error) {
28    return NextResponse.json({ error: 'Failed to fetch categories' }, { status: 500 });
29  }
30}

After deploying your Bolt app to Netlify or Bolt Cloud, you can configure SocialBee webhooks to receive real-time notifications when posts are published, content categories are updated, or team members make changes. This enables your dashboard to show live status updates without polling. Deploy your Bolt app using Bolt's built-in publish feature (click Publish → Bolt Cloud) or by connecting your GitHub repository to Netlify. Once deployed, you'll have a stable public URL like https://your-app.netlify.app or https://your-project.bolt.host. In your Bolt project settings or Netlify's environment variables panel, add SOCIALBEE_API_KEY to the production environment. In SocialBee's account settings, find the Webhooks section and register your deployed URL as the webhook endpoint (e.g., https://your-app.netlify.app/api/socialbee/webhook). SocialBee will send POST requests to this URL whenever configured events occur. The webhook handler should parse the incoming payload, identify the event type, and update your Bolt app's state accordingly — for example, marking a post as published in your calendar view or triggering a re-fetch of the post list. During Bolt development in the WebContainer, incoming webhooks from SocialBee cannot reach the preview URL because WebContainers have no public-facing port. This is a fundamental constraint of the browser-based runtime. Your outbound API calls to SocialBee work fine in development, but webhook receipt requires a deployed environment.

1// app/api/socialbee/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  let payload: Record<string, unknown>;
6
7  try {
8    payload = await request.json();
9  } catch {
10    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
11  }
12
13  const { event, data } = payload as { event: string; data: Record<string, unknown> };
14
15  switch (event) {
16    case 'post.published':
17      console.log('SocialBee post published:', data?.post_id);
18      // Optionally: invalidate cache, send notification, update DB
19      break;
20    case 'post.failed':
21      console.error('SocialBee post failed:', data?.post_id, data?.error);
22      break;
23    case 'category.updated':
24      console.log('SocialBee category updated:', data?.category_id);
25      break;
26    default:
27      console.log('Unhandled SocialBee webhook event:', event);
28  }
29
30  return NextResponse.json({ received: true });
31}