[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fai":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":330,"links":331,"dates":380},"\u002Fexamples\u002Fcomponents\u002Fai","collection","components",true,{"example_count":9,"app_count":10},317,110,{"id":12,"title":13,"description":14},294,"Artificial intelligence","Explore how interfaces make AI features available within a task. Look at prompt controls, suggested actions, and response areas as individual components within the surrounding product design.",{"title":16,"description":17,"og_image":18},"Artificial intelligence UI examples - Nicelydone","Artificial intelligence UI design examples from SaaS apps. Explore how interfaces make AI features available within a task. Look at prompt controls,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F61600957-a92f-4a0c-a0b4-19b36fc4cef7.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Artificial intelligence UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Artificial intelligence UI design examples from SaaS apps. Explore how interfaces make AI features available within a task. Look at prompt controls, suggested actions, and response areas as individual components…",[32],{"title":33,"description":14,"links":34},"About Artificial intelligence",[],[36],"317 UI components",[38,68,94,124,150,172,202,224,247,266,293,312],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"95e7140b-6d58-48d5-b747-0cde659217b9","Alloy UI component","A user interface for starting a product session with options for theme selection and various integrations.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",1576,938,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"ai",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},86,"Product management","product-management",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"38889243-554b-4c62-b263-7d4c8c5242c0","Origin Financial UI component","A modal dialog presenting an AI financial advisor interface with suggested queries and a text input field for user interaction.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F981c647a-2b3a-43c4-b12d-435b7b2e82a6.png",1272,1029,"UI component from Origin Financial",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[85,89,93],{"id":86,"title":87,"slug":88},36,"Finance","finance",{"id":90,"title":91,"slug":92},56,"Accounting","accounting",{"id":61,"title":62,"slug":63},{"uuid":95,"title":96,"description":97,"canonical_path":98,"image":99,"width":100,"height":101,"image_alt":102,"kind":46,"categories":103,"app":105},"909fd847-4339-4930-98f3-405e1df8e341","Zaro UI component","A user interface displaying a sequence of completed and ongoing automated tasks, with controls for queuing new actions.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F089c36f8-007d-4b14-9954-c57734a22a3b.png",1448,889,"UI component from Zaro",[104],{"id":12,"title":13,"slug":49},{"slug":106,"title":107,"logo":108,"baseline":109,"categories":110},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[111,115,116,120],{"id":112,"title":113,"slug":114},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},{"id":117,"title":118,"slug":119},22,"Knowledge Management","knowledge-management",{"id":121,"title":122,"slug":123},46,"Analytics","analytics",{"uuid":125,"title":126,"description":127,"canonical_path":128,"image":129,"width":130,"height":131,"image_alt":132,"kind":46,"categories":133,"app":135},"73ee1828-856a-47e8-8bc5-5ca4aa402f84","Lithic UI component","A modal interface for an AI rule assistant, displaying a chat conversation with a suggested code rule and its explanation.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F219ac3a9-9436-4546-9dca-c0b34db63626.png",826,1758,"UI component from Lithic",[134],{"id":12,"title":13,"slug":49},{"slug":136,"title":137,"logo":138,"baseline":139,"categories":140},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[141,142,146],{"id":86,"title":87,"slug":88},{"id":143,"title":144,"slug":145},39,"Payments","payments",{"id":147,"title":148,"slug":149},37,"Developer APIs","developer-apis",{"uuid":151,"title":152,"description":153,"canonical_path":154,"image":155,"width":156,"height":157,"image_alt":158,"kind":46,"categories":159,"app":161},"b8f69c95-ab85-4924-9da4-79a52018706a","Dock UI component","A document-like interface presenting a business brief with measurable outcomes, accompanied by an AI chat input field at the bottom.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9f947ab8-f7d6-4ce4-8c9b-ebca939de4bc.png",1716,1809,"UI component from Dock",[160],{"id":12,"title":13,"slug":49},{"slug":162,"title":163,"logo":164,"baseline":165,"categories":166},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[167,168],{"id":112,"title":113,"slug":114},{"id":169,"title":170,"slug":171},29,"Task Management","task-management",{"uuid":173,"title":174,"description":175,"canonical_path":176,"image":177,"width":178,"height":179,"image_alt":180,"kind":46,"categories":181,"app":183},"913864c3-ed1a-4eda-8d3b-41d929ac7442","Bloom UI component","An interface displaying a project's activity log, including file edits, executed commands, and a detailed todo list, with an option to reply.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fea474bdc-8b61-41f1-81e6-fd6456381af4.png",894,1840,"UI component from Bloom",[182],{"id":12,"title":13,"slug":49},{"slug":184,"title":185,"logo":186,"baseline":187,"categories":188},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[189,190,194,198],{"id":61,"title":62,"slug":63},{"id":191,"title":192,"slug":193},3,"Shopping","shopping",{"id":195,"title":196,"slug":197},7,"Web Development","web-development",{"id":199,"title":200,"slug":201},96,"No code","no-code",{"uuid":203,"title":204,"description":205,"canonical_path":206,"image":207,"width":208,"height":209,"image_alt":210,"kind":46,"categories":211,"app":213},"bab55264-a3b6-49af-9116-0637f48c2c73","Script Input Card","Primary input area for entering video script text and configuring avatar, motion, voice, and resolution settings.","\u002Fexamples\u002Fapps\u002Fheygen\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb4472538-52ac-4da1-95d7-ccbc49814228.png",2108,1002,"Script Input Card from HeyGen",[212],{"id":12,"title":13,"slug":49},{"slug":214,"title":215,"logo":216,"baseline":217,"categories":218},"heygen","HeyGen","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd8cda81f-5b21-444e-8401-676a6cf2f817.png","AI video generator that turns ideas into professional videos in minutes",[219,223],{"id":220,"title":221,"slug":222},100,"Video","video",{"id":61,"title":62,"slug":63},{"uuid":225,"title":226,"description":227,"canonical_path":228,"image":229,"width":230,"height":231,"image_alt":232,"kind":46,"categories":233,"app":235},"683aa255-ca66-4e4d-b8e5-6eed41b4bc6d","Flora UI component","A chat interface with a greeting, suggested prompts, and a text input field for user interaction.","\u002Fexamples\u002Fapps\u002Fflora\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0975823e-2c3f-4c31-8105-ec70edfb6845.png",968,1756,"UI component from Flora",[234],{"id":12,"title":13,"slug":49},{"slug":236,"title":237,"logo":238,"baseline":239,"categories":240},"flora","Flora","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5c3c6f99-7e88-4853-9e21-6fd175f2aa62.png","Your creative environement",[241,242,246],{"id":61,"title":62,"slug":63},{"id":243,"title":244,"slug":245},8,"Design","design",{"id":112,"title":113,"slug":114},{"uuid":248,"title":249,"canonical_path":250,"image":251,"width":252,"height":253,"image_alt":254,"kind":46,"categories":255,"app":257},"e90df966-351c-49f4-a950-5f96397ad436","Lovable UI component","\u002Fexamples\u002Fapps\u002Flovable\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F111c1071-ec84-464d-85ce-a244ab18864e.png",2229,1169,"UI component from Lovable",[256],{"id":12,"title":13,"slug":49},{"slug":258,"title":259,"logo":260,"baseline":261,"categories":262},"lovable","Lovable","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F371498a3-d8de-4908-8af8-e73a603ffa34.png","Create apps and websites by chatting with AI",[263,264,265],{"id":61,"title":62,"slug":63},{"id":195,"title":196,"slug":197},{"id":199,"title":200,"slug":201},{"uuid":267,"title":268,"description":269,"canonical_path":270,"image":271,"width":272,"height":273,"image_alt":274,"kind":46,"categories":275,"app":277},"61e44042-b00f-4db2-a53a-fd665c92a5c5","Amie UI component","A chat input field with action icons and a notification chip for a new changelog.","\u002Fexamples\u002Fapps\u002Famie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff84e5182-28a3-4680-a822-be43d1d73291.png",1279,224,"UI component from Amie",[276],{"id":12,"title":13,"slug":49},{"slug":278,"title":279,"logo":280,"baseline":281,"categories":282},"amie","Amie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Famie-929f0269.png","The joyful productivity app",[283,287,288,292],{"id":284,"title":285,"slug":286},101,"Calendar","calendar",{"id":169,"title":170,"slug":171},{"id":289,"title":290,"slug":291},30,"Productivity","productivity",{"id":61,"title":62,"slug":63},{"uuid":294,"title":295,"description":296,"canonical_path":297,"image":298,"width":299,"height":300,"image_alt":301,"kind":46,"categories":302,"app":304},"a32884d2-6eef-4d21-acc7-48ac0015a3ce","Elevenlabs UI component","A modal interface for managing and customizing generated audio soundscapes, featuring playback controls, download options, and credit usage display.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F084961b8-dc85-410a-abda-2352455767ae.png",1521,976,"UI component from Elevenlabs",[303],{"id":12,"title":13,"slug":49},{"slug":305,"title":306,"logo":307,"baseline":308,"categories":309},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[310,311],{"id":61,"title":62,"slug":63},{"id":147,"title":148,"slug":149},{"uuid":313,"title":314,"description":315,"canonical_path":316,"image":317,"width":318,"height":319,"image_alt":320,"kind":46,"categories":321,"app":323},"ded9e82d-a126-4e19-b967-1d347a0a995a","Poolside UI component","An interface displaying development-related actions, progress, and a message input with a selection.","\u002Fexamples\u002Fapps\u002Fpoolside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F160b2427-7a0b-4309-be17-ad3ee8bd8b84.png",1497,853,"UI component from Poolside",[322],{"id":12,"title":13,"slug":49},{"slug":324,"title":325,"logo":326,"baseline":327,"categories":328},"poolside","Poolside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fde1e48e8-a8ea-49fc-a7ae-809596fc1bd8.png","Iterate on web apps, APIs, and CLIs from scratch, in a single workspace",[329],{"id":61,"title":62,"slug":63},[],[332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377],{"label":333,"to":334},"AI Editing","\u002Fexamples\u002Fscreens\u002Fai-editing",{"label":336,"to":337},"AI Assistant","\u002Fexamples\u002Fscreens\u002Fai-assistant",{"label":339,"to":340},"AI Chat","\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":342,"to":343},"AI Generation","\u002Fexamples\u002Fscreens\u002Fai-generation",{"label":345,"to":346},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":348,"to":349},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":351,"to":352},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":354,"to":355},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":357,"to":358},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":360,"to":361},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":363,"to":364},"HeyGen design examples","\u002Fexamples\u002Fapps\u002Fheygen",{"label":366,"to":367},"Flora design examples","\u002Fexamples\u002Fapps\u002Fflora",{"label":369,"to":370},"Lovable design examples","\u002Fexamples\u002Fapps\u002Flovable",{"label":372,"to":373},"Amie design examples","\u002Fexamples\u002Fapps\u002Famie",{"label":375,"to":376},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":378,"to":379},"Poolside design examples","\u002Fexamples\u002Fapps\u002Fpoolside",{"published_at":381,"updated_at":382},"2023-03-29T17:02:41.000Z","2026-09-17T10:44:16.000Z"]