Framework Guidesframework-guides
Framework Guides
Use route and runtime examples tailored to the host framework instead of adapting a generic snippet by hand.
Next.jsTanStack StartRemix + Nuxt
Framework route recipes
The docs work better when framework-specific scaffolding is on its own route instead of being buried in one huge page.
Next.js
App Router handlers under `app/api/clivly/*`.
TanStack Start
API file routes plus `clivly/vite` during dev.
SvelteKit
`+server.ts` route handlers under `src/routes/api/clivly/*`.
Vue + Vite
Use your own server layer, or prefer Nuxt when available.
Next.js
These examples now match the current scaffolded route shapes and SDK guidance.
app/api/clivly/tick/route.ts
import clivly from "../../../../clivly.config";
const handler = clivly.createClivlyHandler();
export const POST = (request: Request) => handler(request);app/api/clivly/auth/verify/route.ts
import clivly from "../../../../../clivly.config";
import { auth } from "@/auth";
const handler = clivly.createAuthVerifyHandler(async (request) => {
const session = await auth.api.getSession({ headers: request.headers });
return session?.user
? {
id: session.user.id,
email: session.user.email,
name: session.user.name ?? undefined,
}
: null;
});
export const POST = (request: Request) => handler(request);- `/clivly/auth/verify` is optional today and only belongs in your app if you explicitly configure `verifyToken`.
- Without `verifyToken`, `createAuthVerifyHandler()` fails closed with HTTP 503 rather than exposing host sessions.
TanStack Start
TanStack Start uses file routes from `@tanstack/react-router` plus `clivly/vite` for the long-lived dev flow.
src/routes/api/clivly/tick.ts
import { createFileRoute } from "@tanstack/react-router";
import clivly from "../../../../clivly.config";
const handler = clivly.createClivlyHandler();
export const Route = createFileRoute("/api/clivly/tick")({
server: {
handlers: {
POST: ({ request }) => handler(request),
},
},
});SvelteKit, Remix, and Nuxt
SvelteKit, Remix, and Nuxt are all scaffolded by `clivly init` — each mounts the same handler behind its own router's export shape.
src/routes/api/clivly/tick/+server.ts
import clivly from "../../../../clivly.config";
import type { RequestHandler } from "./$types";
const handler = clivly.createClivlyHandler();
export const POST: RequestHandler = ({ request }) => handler(request);app/routes/api.clivly.tick.ts
import type { ActionFunctionArgs } from "@remix-run/node";
import clivly from "../../clivly.config";
const handler = clivly.createClivlyHandler();
export const action = ({ request }: ActionFunctionArgs) => handler(request);server/api/clivly/tick.ts
import { toWebRequest } from "h3";
import clivly from "../../../clivly.config";
const handler = clivly.createClivlyHandler();
export default defineEventHandler((event) => handler(toWebRequest(event)));Everything else
Anything else — Vue with a custom server, Hono, Express — mounts the same fetch handler by hand. It is a plain `(Request) => Promise<Response>`, so any runtime that speaks Web standards works.
server/app.ts
import { Hono } from "hono";
import { clivly } from "./clivly";
const app = new Hono();
const tick = clivly.createClivlyHandler();
// Optional: only add this when you explicitly configure verifyToken on the host.
const verify = clivly.createAuthVerifyHandler(async (request) => {
const session = await mySessionFromRequest(request);
return session
? { id: session.userId, email: session.email, name: session.name }
: null;
});
app.post("/api/clivly/tick", (c) => tick(c.req.raw));
app.get("/api/clivly/auth/verify", (c) => verify(c.req.raw));
export default app;- `clivly init` scaffolds only the five frameworks above; anywhere else, mount the handler yourself.
- Keep the path at `/api/clivly/tick`, or set `syncTrigger.path` to whatever you chose.
Previous
Keys & Environment
Next
Chat Widget