How to Integrate Bolt.new with Sendible

Start by accessing your Sendible API credentials. Log in to Sendible and navigate to your account settings — look for a Developer or API section. Sendible provides an API key that you include in every request header. If you can't find the API key in settings, contact Sendible support, as API access details may be provided differently depending on your plan tier. Store the key in your Bolt project's .env file as SENDIBLE_API_KEY. Before writing any API routes, spend a few minutes understanding Sendible's data hierarchy — this will save significant debugging time. Sendible organizes data in a specific way: your account contains multiple Client Profiles (representing each of your agency clients), each Profile contains Services (individual social media accounts — a Twitter handle, a Facebook page, an Instagram profile are each separate services), and Posts are created and assigned to one or more services. When you call the API to schedule a post, you specify the service IDs (not profile IDs) that the post should go to. This means your integration usually needs two API calls to start: first fetch all profiles to show a client list, then fetch services for a selected profile to show which social accounts are available. Sendible's API base URL is typically https://api.sendible.com/api/v1 — always confirm the current base URL in Sendible's developer documentation as it may be versioned. All requests use an API key passed in the Authorization header or as a query parameter, depending on the endpoint.

1// lib/sendible.ts
2const SENDIBLE_BASE = 'https://api.sendible.com/api/v1';
3
4async function sendibleRequest<T>(
5  endpoint: string,
6  method: string = 'GET',
7  body?: Record<string, unknown>
8): Promise<T> {
9  const response = await fetch(`${SENDIBLE_BASE}/${endpoint}`, {
10    method,
11    headers: {
12      Authorization: `Bearer ${process.env.SENDIBLE_API_KEY}`,
13      'Content-Type': 'application/json',
14      Accept: 'application/json',
15    },
16    ...(body ? { body: JSON.stringify(body) } : {}),
17  });
18
19  if (!response.ok) {
20    const errorText = await response.text();
21    throw new Error(`Sendible API ${response.status}: ${errorText}`);
22  }
23
24  return response.json();
25}
26
27export const getProfiles = () => sendibleRequest('profiles');
28
29export const getServices = (profileId?: string) => {
30  const query = profileId ? `?profile_id=${profileId}` : '';
31  return sendibleRequest(`services${query}`);
32};
33
34export const getAnalytics = (serviceId: string, startDate: string, endDate: string) =>
35  sendibleRequest(`analytics?service_id=${serviceId}&start_date=${startDate}&end_date=${endDate}`);
36
37export const schedulePost = (
38  serviceIds: string[],
39  content: string,
40  scheduledAt: string,
41  mediaUrl?: string
42) =>
43  sendibleRequest('messages', 'POST', {
44    message: content,
45    service_ids: serviceIds,
46    scheduled_at: scheduledAt,
47    ...(mediaUrl ? { media_url: mediaUrl } : {}),
48  });

The multi-client dashboard is the core of a Sendible-based agency tool. It shows all clients in a sidebar or dropdown, and when a client is selected, loads their connected social services and key metrics. Build this as a two-panel layout: the left panel lists all client profiles fetched from Sendible, the right panel shows the selected client's services with their posting stats and recent activity. Fetch client profiles on component mount and store them in React state. When a user clicks a client, fetch that client's services and their recent posts. Display services as cards with the social network icon, account name, follower count, and last post date. Add a quick-schedule button on each service card that opens a compose modal. For the analytics section, show the last 30 days' post count, average engagement rate, and a sparkline chart of daily engagement. Cache the profile list in React state to avoid re-fetching when switching between clients — profile data rarely changes during a session. The service data (follower counts, recent posts) should refresh each time a client is selected since it's the live current data. Implementing a loading skeleton while data fetches improves the perceived performance for agencies managing large client lists. Important: all of these Sendible API calls are outbound requests, so they work in Bolt's WebContainer preview during development without needing to deploy first.

1// app/api/sendible/schedule/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { schedulePost } from '@/lib/sendible';
4
5export async function POST(request: NextRequest) {
6  const { service_ids, content, scheduled_at, media_url } = await request.json();
7
8  if (!service_ids?.length || !content || !scheduled_at) {
9    return NextResponse.json(
10      { error: 'service_ids, content, and scheduled_at are required' },
11      { status: 400 }
12    );
13  }
14
15  const scheduledDate = new Date(scheduled_at);
16  if (scheduledDate <= new Date()) {
17    return NextResponse.json(
18      { error: 'Scheduled time must be in the future' },
19      { status: 400 }
20    );
21  }
22
23  try {
24    const result = await schedulePost(
25      service_ids,
26      content,
27      scheduledDate.toISOString(),
28      media_url || undefined
29    );
30    return NextResponse.json(result);
31  } catch (error) {
32    console.error('Sendible schedule post failed:', error);
33    return NextResponse.json(
34      { error: 'Failed to schedule post in Sendible' },
35      { status: 500 }
36    );
37  }
38}

Analytics reporting is where a custom Bolt-based Sendible dashboard provides the most value over Sendible's built-in interface — you can present exactly the metrics clients care about, in the visual format your agency prefers, with your branding. Sendible's analytics API provides engagement data by service for configurable date ranges. Build an analytics section that fetches data for each of the client's services and aggregates it into a unified report view. The key metrics for social media reporting are: total post count, total reach (people who saw posts), total engagements (likes + comments + shares), engagement rate (engagements / reach), top performing posts (highest individual engagement), follower count over time (growth trajectory), and best day/time to post (based on historical performance patterns). Fetch analytics in parallel for all services using Promise.all() to minimize loading time. Present the data using Recharts components: a line chart for follower growth, a bar chart comparing engagement across platforms, and a table of top performing posts. For white-label purposes, remove any references to Sendible from the visible UI — use your agency's branding, colors, and terminology. Add an export-to-PDF button using the browser's print API (window.print() with print-specific CSS) so clients can download their monthly report. The PDF export approach requires no additional libraries and works with Bolt's generated React components. Cache analytics responses for at least 15 minutes since the data doesn't change in real-time and analytics fetches are typically slower API calls.

1// app/api/sendible/analytics/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getAnalytics } from '@/lib/sendible';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const serviceId = searchParams.get('service_id');
8  const startDate = searchParams.get('start');
9  const endDate = searchParams.get('end');
10
11  if (!serviceId || !startDate || !endDate) {
12    return NextResponse.json(
13      { error: 'service_id, start, and end are required' },
14      { status: 400 }
15    );
16  }
17
18  try {
19    const data = await getAnalytics(serviceId, startDate, endDate);
20    return NextResponse.json(data);
21  } catch (error) {
22    console.error('Sendible analytics fetch failed:', error);
23    return NextResponse.json({ error: 'Failed to fetch analytics' }, { status: 500 });
24  }
25}
26
27// In your React component — fetch analytics for all services in parallel
28// const analyticsResults = await Promise.all(
29//   services.map(service =>
30//     fetch(`/api/sendible/analytics?service_id=${service.id}&start=${startDate}&end=${endDate}`)
31//       .then(r => r.json())
32//   )
33// );

Deploying your Sendible dashboard to Netlify or Bolt Cloud makes it accessible to your agency team and clients. The deployment process also enables Sendible webhooks for real-time post status updates. Start by deploying: in Bolt, click the Publish button to deploy to Bolt Cloud, or connect your GitHub repository to Netlify for automated CI/CD. Once deployed, set the SENDIBLE_API_KEY environment variable in your hosting platform — in Netlify, go to Site Configuration → Environment Variables and add the key. In Bolt Cloud, use the Secrets panel in your project settings. Never commit your API key to a git repository. After deployment, your app runs server-side API routes on real infrastructure instead of the WebContainer. If your dashboard requires user authentication (to restrict which clients or team members can see data), add auth using Supabase Auth or Clerk — both integrate well with Bolt apps. For agencies wanting to give clients their own login to view their reports, Supabase Auth with row-level security on a client profiles table is a clean approach. Custom domain setup (e.g., reports.youragency.com) makes the portal feel native to your brand rather than a generic app URL. Both Netlify and Bolt Cloud support custom domains with automatic SSL. The WebContainer limitation for incoming requests also applies here: if Sendible offers webhooks for post status notifications, these webhooks can only be tested and used on your deployed URL, not the Bolt preview.

1// .env.example — copy to .env and fill in your values
2// SENDIBLE_API_KEY=your_sendible_api_key_here
3//   Get this from: Sendible Dashboard → Settings → API
4//   Required plan: Pro or Agency
5//
6// NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
7//   Get this from: Supabase Dashboard → Settings → API
8//
9// NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
10//   Get this from: Supabase Dashboard → Settings → API
11//   Safe to use in client-side code (protected by Row Level Security)
12
13// IMPORTANT: Never commit your .env file to git
14// Add .env to your .gitignore file