Getting Started
Get up and running with Solar Beam CMS in four steps. By the end of this guide, you'll have content flowing from the CMS to your frontend.
Create an account
Head to the signup page and create your account using your email address.
After verifying, you'll be prompted to create your first workspace. A workspace is your project's home for all content — blog posts, collections, and leads.
Generate your API key
Go to Settings in your workspace. In the API Configuration section, click Generate to create an API key.
The API key is sent in the x-api-key header to authenticate all requests to the public API. Keep it server-side — never expose it in client code.
Security note: Store your API key in environment variables (e.g. CMS_API_KEY) and only use it from your server or API routes. Never put it in NEXT_PUBLIC_* variables.
Fetch collections
Collections are custom content types — products, team members, FAQs, anything you need. Create a collection in the dashboard, add items, then fetch them:
export async function getCollectionItems(slug: string) {
const res = await fetch(
`${CMS_URL}/api/public/collections/${slug}`,
{
headers: { "x-api-key": CMS_API_KEY! },
next: { revalidate: 60 },
}
);
if (!res.ok) return { items: [], pagination: null };
const data = await res.json();
return {
items: data.items,
pagination: data.pagination,
};
}export async function getCollectionItems(slug: string) {
const res = await fetch(
`${CMS_URL}/api/public/collections/${slug}`,
{
headers: { "x-api-key": CMS_API_KEY! },
next: { revalidate: 60 },
}
);
if (!res.ok) return { items: [], pagination: null };
const data = await res.json();
return {
items: data.items,
pagination: data.pagination,
};
}{
"collection": {
"slug": "team",
"name": "Team Members"
},
"items": [
{
"slug": "john-doe",
"data": {
"name": "John Doe",
"role": "CEO",
"photo": "https://..."
},
"publishedAt": "2025-01-15T12:00:00Z"
}
],
"pagination": {
"total": 5,
"limit": 20,
"offset": 0
}
}{
"collection": {
"slug": "team",
"name": "Team Members"
},
"items": [
{
"slug": "john-doe",
"data": {
"name": "John Doe",
"role": "CEO",
"photo": "https://..."
},
"publishedAt": "2025-01-15T12:00:00Z"
}
],
"pagination": {
"total": 5,
"limit": 20,
"offset": 0
}
}Receive leads
Submit contact form data from your site to the leads API. Leads appear in the CMS dashboard and trigger notifications via Discord, email, and webhooks.
curl -X POST https://cms.solarbeam.studio/api/public/leads \
-H "x-api-key: your-api-key" \
-H "Content-Type: application/json" \
-d '{
"email": "visitor@example.com",
"firstName": "Jane",
"lastName": "Doe",
"source": "contact-form",
"message": "I would like to learn more about your services."
}'curl -X POST https://cms.solarbeam.studio/api/public/leads \
-H "x-api-key: your-api-key" \
-H "Content-Type: application/json" \
-d '{
"email": "visitor@example.com",
"firstName": "Jane",
"lastName": "Doe",
"source": "contact-form",
"message": "I would like to learn more about your services."
}'// app/api/contact/route.ts
// Proxy to keep your CMS API key server-side
export async function POST(request: Request) {
const body = await request.json();
const res = await fetch(
`${process.env.CMS_URL}/api/public/leads`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"x-api-key": process.env.CMS_API_KEY!,
},
body: JSON.stringify({
email: body.email,
firstName: body.firstName,
lastName: body.lastName,
source: "contact-form",
message: body.message,
}),
}
);
if (!res.ok) {
return Response.json(
{ error: "Failed to submit" },
{ status: 400 }
);
}
return Response.json({ success: true });
}// app/api/contact/route.ts
// Proxy to keep your CMS API key server-side
export async function POST(request: Request) {
const body = await request.json();
const res = await fetch(
`${process.env.CMS_URL}/api/public/leads`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"x-api-key": process.env.CMS_API_KEY!,
},
body: JSON.stringify({
email: body.email,
firstName: body.firstName,
lastName: body.lastName,
source: "contact-form",
message: body.message,
}),
}
);
if (!res.ok) {
return Response.json(
{ error: "Failed to submit" },
{ status: 400 }
);
}
return Response.json({ success: true });
}