Build your first Generative UI environment.

1. Architecture first

The first objective is not to add an LLM. It is to establish a trustworthy local environment where React renders the UI, TypeScript gives compile-time safety, and Zod validates structured data before it reaches trusted components.

Browser
   │
   ▼
 React
   │
   ▼
TypeScript
   │
   ▼
  Zod

Future:
User → LLM → Structured JSON → Zod → Component Registry → React UI

2. Verify Node.js

Open PowerShell and confirm that Node.js and npm are installed.

node --version
npm --version

3. Create a workspace

mkdir generative-ui
cd generative-ui

This keeps your experiment isolated and ready for version control later.

4. Create React + TypeScript with Vite

npm create vite@latest gen-ui-lab -- --template react-ts
cd gen-ui-lab

Vite scaffolds the application. In your first experiment the local development URL was http://localhost:5173/.

5. Install project dependencies

npm install

The generated project should contain the application source, Vite configuration, TypeScript configuration and npm metadata.

gen-ui-lab/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

6. Test React + Vite

npm run dev

Open the local URL printed by Vite. Seeing the default React page confirms that the frontend environment is healthy.

7. Install Zod

Stop the server with Ctrl + C, then install Zod and verify it.

npm install zod
npm list zod

Zod will become the runtime validation boundary between external structured data and your approved React components.

8. Prepare the Generative UI folders

cd src
mkdir components
mkdir generative-ui
mkdir schemas
mkdir services

The intended structure is:

src/
├── components/
│   ├── Text.tsx
│   ├── Card.tsx
│   ├── Alert.tsx
│   ├── Table.tsx
│   └── Button.tsx
├── generative-ui/
│   ├── ComponentRegistry.ts
│   └── UIRenderer.tsx
├── schemas/
│   └── uiSchema.ts
├── services/
│   └── llm.ts
├── App.tsx
└── main.tsx

9. Verify Zod inside React

Temporarily replace src/App.tsx with:

import { z } from "zod";

const UserSchema = z.object({
  name: z.string(),
  role: z.string(),
});

function App() {
  const user = UserSchema.parse({
    name: "Victor",
    role: "Agentic Engineer",
  });

  return (
    <div>
      <h1>Generative UI Lab</h1>
      <p>Environment working successfully.</p>
      <p>{user.name} — {user.role}</p>
    </div>
  );
}

export default App;

Restart Vite:

npm run dev

You should see the environment confirmation and the validated user data in the browser.

10. Environment ready

The next experiment is to create an approved component vocabulary—Text, Card, Alert, Table and Button—and let validated JSON select what React renders.