hub / github.com/AndySpider/uicloner-extension
github.com/AndySpider/uicloner-extension @v0.1.1
Chat with this repo
828 symbols
2,802 edges
38 files
0 documented · 0%
● updated 18mo ago★ 4691 open issues
Browse by type
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
UICloner Extension
UICloner is a AI-powered browser extension that allows you to clone any UI component from any webpage with a single click and automatically generates the corresponding code implementation.
✨ Key Features
- 🎯 One-Click Selection - Select UI components to clone with a simple click on any website
- 🎨 Multiple Format Support - Generate to HTML + Tailwind CSS or HTML + pure CSS code
- 🔄 Live Preview - Real-time preview of cloned UI and generated code
Demo - clone the Facebook login form
🚀 Quick Start
Install and Setup
- Install UICloner extension from Chrome Web Store
- Click the extension icon and setup a vision LLM API (GPT-4o or Claude 3.5 recommended, your API is saved locally!)
Usage
- Open any webpage and click the extension icon
- Use the selection tool to pick UI components on the webpage
- Wait for code generation to complete
- Copy the generated code to your project
🛠️ Development Setup
Install dependencies
pnpm install
Development mode
pnpm run dev
Build for production
pnpm build
🔧 Tech Stack
- WXT (Browser Extension Development)
- React 18
- Tailwind CSS
- Shadcn UI Components
- Langchain
- TypeScript
🤝 Contributing
Contributions via Pull Requests and Issues are welcome!
📄 License
MIT
Extension points exported contracts — how you extend this code
TextareaProps (Interface)
(no doc)
components/ui/textarea.tsx
CloneTask (Interface)
(no doc)
lib/types.ts
ProviderSettings (Interface)
(no doc)
entrypoints/popup/LLMSettingsDialog.tsx
ButtonProps (Interface)
(no doc)
components/ui/button.tsx
LLMSettings (Interface)
(no doc)
entrypoints/popup/LLMSettingsDialog.tsx
BadgeProps (Interface)
(no doc)
components/ui/badge.tsx
Core symbols most depended-on inside this repo
push
called by 231
public/tailwindcss.js
r
called by 220
public/tailwindcss.js
x
called by 186
public/tailwindcss.js
map
called by 149
public/tailwindcss.js
e
called by 108
public/tailwindcss.js
replace
called by 103
public/tailwindcss.js
has
called by 100
public/tailwindcss.js
R
called by 91
public/tailwindcss.js
Shape
Languages
TypeScript100%
Modules by API surface
public/tailwindcss.js766 symbols
entrypoints/content.ts9 symbols
entrypoints/popup/LLMSettingsDialog.tsx7 symbols
entrypoints/popup/AClone.tsx5 symbols
components/ui/pagination.tsx5 symbols
lib/llm.ts4 symbols
entrypoints/background.ts4 symbols
entrypoints/popup/MainPage.tsx3 symbols
entrypoints/popup/HtmlTwRender.tsx3 symbols
entrypoints/popup/useCurrentCloneTask.ts2 symbols
entrypoints/popup/UIPreview.tsx2 symbols
entrypoints/popup/HtmlCssRender.tsx2 symbols
For agents
$ claude mcp add uicloner-extension \
-- python -m otcore.mcp_server <graph>