React Router
There is no React Router source plugin. The SDK call matches the Remix guide.
npm i @cosmicjs/sdk
// app/routes/home.tsx
import { createBucketClient } from '@cosmicjs/sdk';
export async function loader() {
const cosmic = createBucketClient({
bucketSlug: process.env.BUCKET_SLUG,
readKey: process.env.BUCKET_READ_KEY,
});
const { objects } = await cosmic.objects
.find({ type: 'posts' })
.props('title,slug,metadata');
return { objects };
}
Set BUCKET_SLUG and BUCKET_READ_KEY in the server environment. Do not send the write key to the browser.
FAQ
Is there a React Router plugin?
No. Call @cosmicjs/sdk from a framework-mode loader so the read key stays on the server.
Does this cover the old data APIs?
The loader below is React Router 7 framework mode. A Remix loader is the same SDK call. See the Remix guide.
How much does Cosmic cost?
Project plans are Free ($0), Builder ($99/mo), Team ($299/mo), Business ($499/mo), Enterprise (custom pricing). Yearly billing saves 10%. Workspace plans are Small Workspace ($999/mo) and Large Workspace ($2,999/mo), and they start with a 30-day free trial. Allowances, add-on rates, and the rest of the pricing FAQ are plain text at https://www.cosmicjs.com/pricing.md.
Are API keys required, and is content private?
Each Bucket has a read key and a write key in Bucket Settings > API Access. GET requests use the read key. POST, PATCH, and DELETE use the write key as Authorization: Bearer. Do not put the write key in a browser bundle, a mobile app, or a NEXT_PUBLIC_ variable. SAML single sign-on is on Large Workspace and Enterprise. The audit log is append-only. Text versions: https://www.cosmicjs.com/security.md and https://www.cosmicjs.com/docs/dashboard/audit-log.md.
Can an agent create a Cosmic project without an existing account?
Yes. POST https://dapi.cosmicjs.com/v3/agents/sign-up provisions a free-tier project and bucket tied to a human email, with no existing Cosmic account. The human claims it with the emailed one-time code. The playbook is https://www.cosmicjs.com/docs/ai-onboarding.md.