Install

Create a small Vite app inside the repository that uses the UI packages. The rest of the pages in this section keep filling in this app.

PreparationCopy Anchor Link

Install the dependencies from the repository root. Links named node_modules/@werft-ai/ui and node_modules/@werft-ai/react appear at the root, pointing to packages/ui and packages/react.

bun install

You need the following. Other packages in this repository already use all of them, so the install above puts them in the root node_modules.

Create the appCopy Anchor Link

Create a ui-demo directory at the repository root and put two files in it. Do not add ui-demo to the workspace. Module resolution walks up the parent directories, so its imports resolve from the root node_modules.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Werft UI demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  // The blocks call /v1 on their own origin with the login cookie.
  server: { proxy: { "/v1": "http://127.0.0.1:3000" } },
});

server.proxy forwards the app's /v1 requests to the local stack you started as in Run a development server. This is because session blocks call /v1 on their own origin with the web login cookie. The reason is in Add session blocks.

You create src/styles.css in Apply the theme and src/main.tsx in Add session blocks.

Next stepsCopy Anchor Link

• Apply the theme: import the CSS and turn on the dark theme