Quickstart
Create, generate, and preview your first TailorKit app.
Create a small app for the / screen and preview it in your host product.
Before you start
Complete Installation and keep your host app running. Its TailorKit handler
must be available at /api/tailorkit.
Scaffold the app
Create the app beside your host project. Replace the host URL if your app uses a different port or handler path.
pnpm dlx @tailorkit/cli init . \
--name hello-tailorkit \
--host http://localhost:3000/api/tailorkit
cd hello-tailorkitThis creates a separate app project with a default screen.
Generate host bindings
Keep the host app running, then fetch its current schema:
pnpm generateThis creates src/tailorkit.gen.ts, which contains typed bindings for the
screens and capabilities exposed by the host. Do not edit this file.
Implement the screen
Replace src/screens/default.tsx with:
import { createScreen } from "@tailorkit/app";
import { Box } from "#tailorkit";
const screen = createScreen("/", {
component: HomeScreen,
});
function HomeScreen() {
return <Box padding="md">Hello from TailorKit!</Box>;
}
export default screen;Box is rendered by the host, so it uses the host product's implementation and
styles. The generated src/client.ts already registers this screen.
Preview the app
Start the local app server:
pnpm exec tailorkit experimental-previewWhile developing, point the host client's baseUrl at
http://127.0.0.1:4175. The host discovers the local app and renders it in an
AppView on the / screen.
You now have a sandboxed app rendering a host-owned component. When the host
contract changes, rerun pnpm generate before continuing development.
Next steps
- Add a typed route and context with Screens.
- Learn about generated components and actions in Writing apps.
- Expose trusted server-side behavior with Actions.
- Review the production checklist before loading third-party apps.