UIGEN-X-32B-0727

110
157
32.0B
1 language
license:apache-2.0
by
Tesslate
Language Model
OTHER
32B params
New
110 downloads
Early-stage
Try on Hugging FaceAdd to Compare
Edge AI:
Mobile
Laptop
Server
72GB+ RAM
Mobile
Laptop
Server
Quick Summary

UIGEN-X-32B-0727 Reasoning Only UI Generation Model > Tesslate's Reasoning Only UI generation model built on Qwen3-32B architecture.

Device Compatibility

Mobile
4-6GB RAM
Laptop
16GB RAM
Server
GPU
Minimum Recommended
30GB+ RAM

Code Examples

Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Examplestext
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates  
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])
Complete Agentic Workflow Examplepython
# 1. Plan the application
response = model.chat([
    {"role": "user", "content": "Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}
], tools=[fetch_unsplash_image, generate_content])

# 2. The model will reason through the requirements and call tools:
# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 
# - generate_content(type="destinations", count=10, theme="popular travel")
# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")

# 3. Generate complete implementation with real assets
final_response = model.chat([
    {"role": "user", "content": "Now implement the complete website with the fetched images and content"}
])

Deploy This Model

Production-ready deployment in minutes

Together.ai

Instant API access to this model

Fastest API

Production-ready inference API. Start free, scale to millions.

Try Free API

Replicate

One-click model deployment

Easiest Setup

Run models in the cloud with simple API. No DevOps required.

Deploy Now

Disclosure: We may earn a commission from these partners. This helps keep LLMYourWay free.