Installation
Install TailorKit and wire it into your host app.
Set up TailorKit in the app that will host and render TailorKit apps.
Install TailorKit
npm install tailorkitCreate TailorKit instance
Create tailorkit.ts in your project root, lib/, utils/, src/lib/, or
app/lib/.
This file defines the screens, components, theme tokens, and actions TailorKit apps can use. Primitives provide basic layout and styling abilities. See Layouts and Styles for the full set.
import { createActions, createTailorKit } from "tailorkit";
import { primitives } from "tailorkit/zod";
import { z } from "zod";
// Define the components TailorKit apps can render.
const Button = {
fields: z.object({
variant: z.enum(["default", "secondary"]),
}),
callbacks: {
onClick: {},
},
slots: ["default"],
};
// Type the context your server passes to actions.
const action = createActions().context<{
user: { id: string; name: string };
}>();
export const tailorKit = createTailorKit({
projectKey: process.env.TAILORKIT_PROJECT_KEY,
components: {
// These provide basic layout and styling abilities.
...primitives({
tokens: {
borderColor: {
default: "var(--border)",
},
textColor: {
default: "var(--text)",
},
},
}),
Button,
},
screens: {
// Define each screen TailorKit apps can be installed on.
"/": {
context: z.object({}),
},
},
actions: {
// Actions let TailorKit apps run server-side logic in your app.
echo: action
.input(z.string())
.output(z.string())
// This runs on your server.
.handler(({ input, context }) => `${context.user.name} said '${input}'`),
},
});Treat Your TailorKit Config As Public API
TailorKit apps are built against the screens, components, actions, slots, and tokens you define here. Removing or renaming them can break existing apps.
Add the API handler
Mount the handler at your TailorKit base path. The default is /api/tailorkit.
Framework Support
TailorKit supports any backend framework that uses standard Request and Response objects, with
examples for popular frameworks below.
Pass your app's auth check as authenticate instead of blocking unauthenticated
requests before tailorKit.handler. TailorKit calls authenticate only for
routes that need your app's user context; CLI deployment routes use TailorKit's
deploy-token authentication.
import { auth } from "#lib/auth";
import { tailorKit } from "#lib/tailorkit";
async function handleRequest(request: Request) {
return tailorKit.handler(request, {
authenticate: async () => {
const session = await auth(request);
if (!session) {
return;
}
return {
actionContext: { user: session.user },
// Used to separate installed apps for each user, team, or project.
scopeId: session.user.id,
};
},
});
}
export const GET = handleRequest;
export const POST = handleRequest;Create the client
The TailorKit client connects your frontend to the TailorKit API handler and maps the components from your TailorKit config to components in your app.
Create tailorkit-client.ts in your frontend, wherever you keep client-side utilities.
import { Button } from "@/components/button";
import type { tailorKit } from "./tailorkit";
import { createTailorKitClient, primitives } from "tailorkit/react";
export const tailorKitClient = createTailorKitClient<typeof tailorKit>({
// Use your custom handler path here, for example:
// "http://localhost:3000/custom-path/tailorkit"
baseUrl: "/api/tailorkit",
components: {
...primitives,
Button: ({ props, slots }) => (
<Button variant={props.variant} onClick={props.onClick}>
{slots.default}
</Button>
),
},
});
export default tailorKitClient;Finish
Deploy the host app after tailorkit.ts, the API handler, and the React client are
in place.
🎉 TailorKit is installed.