Generative UI Agent ⚡️

Generative UI Agent is a small React + Vite project that demonstrates a composable UI for generating dynamic components via an LLM-backed service. It includes a lightweight component runner, example UI components, and a service wrapper for Google Gemini-like APIs.

---

Features ✅

• Minimal React + Vite setup (TypeScript-ready)
• Dynamic component rendering via componentRunner and DynamicComponent
• Input UI component (InputArea) for interacting with the agent
• geminiService wrapper to integrate with Google GenAI / Gemini client
• Ready-to-run dev and build scripts

---

Prerequisites ⚙️

• Node.js (16+ recommended)
• npm, pnpm or yarn
• API credentials for your LLM provider (if you intend to use the geminiService)

---

Quickstart 🚀

Install dependencies:

npm install
# or
# pnpm install
# yarn install

Run the development server:

npm run dev

Build for production:

npm run build

Preview a production build:

npm run preview

The app runs on Vite (default http://localhost:5173). See package.json for scripts.

---

Project Structure 🔧

• index.html, index.tsx, App.tsx — app entry and layout
• components/ — UI components
  • DynamicComponent.tsx — wrapper that renders dynamic component definitions
  • InputArea.tsx — input box / form for user prompts
• services/ — external services and API clients
  • geminiService.ts — thin wrapper around Google GenAI / Gemini SDK
• utils/
  • componentRunner.ts — logic for transforming LLM responses into UI components
• types.ts — shared TypeScript types
• vite.config.ts, tsconfig.json — tooling config

---

Development Notes 💡

• The geminiService uses @google/genai (see package.json). Configure API keys in your environment (for example GOOGLE_API_KEY or similar) before using it.

• componentRunner contains the mapping from LLM responses to React elements. If you extend or change the component schema from your LLM prompts, update the runner accordingly.

---

How to Use

1. Start the dev server (npm run dev).
2. Open the app in the browser and enter prompts in the input area. The app will call the service and attempt to render dynamic components returned by the model.

Note: Model outputs may require sanitization and validation before being rendered in production. This project is intended for experimentation and proof-of-concept only.

---

Contributing 🤝

Contributions are welcome. Please open issues or pull requests to improve documentation, tests, or features.

---

License

This project is released under the MIT License. See LICENSE for details (add if needed).

---

Acknowledgements

Built as a small starter to experiment with LLM-driven UI generation.

If you'd like, I can also add operating instructions for any specific LLM provider or a sample .env example for local development.