# CyberUI templates

> Ready-made React starter apps built with the cyberui-2045 component library. Each template is a complete, self-contained app: fork just that one with `npx --yes tiged`, then change it with your AI coding assistant. Needs Node 20.19 or newer.

This is the plain-text version of the Templates page at https://patrickkuei.github.io/cyberui-templates/, which needs JavaScript to render.

## Templates

### AI Product Monitoring

Request volume, latency percentiles, error rate, and a live alerts feed for a production AI API.

- Use it if you're building: a screen to keep an eye on something: orders, usage, errors, support tickets; anything made of charts, a table and a list of things that need attention; a dashboard for yourself or your team.
- Heads-up: The data is made up, and a few buttons (time range, Acknowledge, Export CSV, Download) only change how the screen looks: nothing is exported or saved. You get the screens, not the data connection. Your AI can help you hook up yours.
- Probably not for you if you need live data out of the box. The numbers are simulated, and you connect your own.
- Fork it: `npx --yes tiged patrickkuei/cyberui-templates/packages/monitoring my-app`, then `cd my-app`, `npm install`, `npm run dev`
- Start prompt to paste into an AI coding assistant: Start a new project from the AI Product Monitoring template. Run `npx --yes tiged patrickkuei/cyberui-templates/packages/monitoring my-app`, then `cd my-app`, `npm install`, and `npm run dev`. It needs Node 20.19 or newer, so tell me if I need to install it. Tell me when it's running and what address to open. Then run `npx cyberui-2045 init` with the flag for your tool (`--claude`, `--cursor`, `--gemini` or `--copilot`, or `--agents` for any other tool) so you know how to use the component library from now on.
- [Source](https://github.com/patrickkuei/cyberui-templates/tree/main/packages/monitoring)
- [Live demo](https://patrickkuei.github.io/cyberui-templates/live/monitoring/index.html)

### Agent Control Panel

A conversation, a task queue, live status and a reasoning trace for an AI assistant, with a human approval step.

- Use it if you're building: a screen to watch and steer an AI assistant: what it is doing, what is waiting, and why; a chat where a person has to approve risky steps before the agent goes ahead; an internal tool for a support, ops or content team that works alongside an agent.
- Heads-up: This is a demo: the agent is just a script, so no AI model is running behind it. You get the screens, not the agent. Your AI can help you connect yours.
- Probably not for you if you need a real model or login. The agent is a script, and a chat window for your customers is fine.
- Fork it: `npx --yes tiged patrickkuei/cyberui-templates/packages/agent-panel my-app`, then `cd my-app`, `npm install`, `npm run dev`
- Start prompt to paste into an AI coding assistant: Start a new project from the Agent Control Panel template. Run `npx --yes tiged patrickkuei/cyberui-templates/packages/agent-panel my-app`, then `cd my-app`, `npm install`, and `npm run dev`. It needs Node 20.19 or newer, so tell me if I need to install it. Tell me when it's running and what address to open. Then run `npx cyberui-2045 init` with the flag for your tool (`--claude`, `--cursor`, `--gemini` or `--copilot`, or `--agents` for any other tool) so you know how to use the component library from now on.
- [Source](https://github.com/patrickkuei/cyberui-templates/tree/main/packages/agent-panel)
- [Live demo](https://patrickkuei.github.io/cyberui-templates/live/agent-panel/index.html)

### Landing Page

A hero, features, pricing with a working billing toggle, FAQ and a signup form for a product launch.

- Use it if you're building: a launch page for a product or side project; a pricing page with plans to compare; a one-screen "join the waitlist" page.
- Heads-up: This is a demo: the product and numbers are made up and the signup sends nothing. You get the page, not the backend. Your AI can help you connect yours.
- Probably not for you if you need several pages, a blog or a real signup backend. It's one scrolling page with a mock form.
- Fork it: `npx --yes tiged patrickkuei/cyberui-templates/packages/landing my-app`, then `cd my-app`, `npm install`, `npm run dev`
- Start prompt to paste into an AI coding assistant: Start a new project from the Landing Page template. Run `npx --yes tiged patrickkuei/cyberui-templates/packages/landing my-app`, then `cd my-app`, `npm install`, and `npm run dev`. It needs Node 20.19 or newer, so tell me if I need to install it. Tell me when it's running and what address to open. Then run `npx cyberui-2045 init` with the flag for your tool (`--claude`, `--cursor`, `--gemini` or `--copilot`, or `--agents` for any other tool) so you know how to use the component library from now on.
- [Source](https://github.com/patrickkuei/cyberui-templates/tree/main/packages/landing)
- [Live demo](https://patrickkuei.github.io/cyberui-templates/live/landing/index.html)

### Mobile App

A home device controller built for a phone: rooms, a glowing glyph for every device, a full page to control each one and a scan-and-link flow to add more.

- Use it if you're building: a small control app people will use on their phone; the front end of an app you will later connect to real devices or a backend; something with rooms, things you switch and dim, a connect flow and a few settings.
- Heads-up: This is a demo: the home and its devices are made up, and nothing is controlled or sent. You get the screens, not the hub. Your AI can help you connect yours.
- Probably not for you if you need to find or talk to real devices, or install it on a phone. The devices and the scan are made up, and it's a web page with no saved data.
- Fork it: `npx --yes tiged patrickkuei/cyberui-templates/packages/mobile-app my-app`, then `cd my-app`, `npm install`, `npm run dev`
- Start prompt to paste into an AI coding assistant: Start a new project from the Mobile App template. Run `npx --yes tiged patrickkuei/cyberui-templates/packages/mobile-app my-app`, then `cd my-app`, `npm install`, and `npm run dev`. It needs Node 20.19 or newer, so tell me if I need to install it. Tell me when it's running and what address to open. Then run `npx cyberui-2045 init` with the flag for your tool (`--claude`, `--cursor`, `--gemini` or `--copilot`, or `--agents` for any other tool) so you know how to use the component library from now on.
- [Source](https://github.com/patrickkuei/cyberui-templates/tree/main/packages/mobile-app)
- [Live demo](https://patrickkuei.github.io/cyberui-templates/live/mobile-app/index.html)

## The library

- [cyberui-2045 on npm](https://www.npmjs.com/package/cyberui-2045)
- [CyberUI on GitHub](https://github.com/patrickkuei/CyberUI)
- [CyberUI docs](https://patrickkuei.github.io/CyberUI/)
- [CyberUI Storybook](https://patrickkuei.github.io/CyberUI/storybook/)
- After forking, run `npx cyberui-2045 init` with the flag for your tool (`--claude`, `--cursor`, `--gemini` or `--copilot`, or `--agents` for any other tool): it writes how to use the library into your assistant's rules file.