Find your style

Find Your Style is an AI agent that studies 500 years of art history and generates
production-ready UI components for your brand at runtime — no templates, no designer required.

You type a company description (“I run a fintech startup, clean and trustworthy”).
The boss agent classifies your brand against 8 curated art movements (Bauhaus, Minimalism,
Art Nouveau, Abstract Expressionism, Dutch Golden Age, Memphis, De Stijl, Japanese Woodblock),
then sequences four specialized worker agents:

• Worker 1 fetches 3 real artworks from the Metropolitan Museum API matching your movement
• Worker 2 extracts a 5-color palette from the actual painting images via vision AI
• Worker 3 generates production Tailwind CSS components (header, hero, footer) styled with
  that movement’s visual DNA — real code, immediately usable
• Worker 4 generates a CSS/JS animation component where art movement motifs dissolve
  into your brand mark, auto-playing on screen

Every decision — movement selection, palette extraction, animation placement, component
generation — is made autonomously by the agent and rendered as interactive UI cards
streaming live onto a CopilotKit canvas as the agent works. The user never sees a text
description of what their design could look like. They see the actual design being built
in front of them, card by card, in real time.

This would have been impossible with a chat interface. A chat interface can describe
a Bauhaus color palette in words. It cannot stream a live Bauhaus-styled header component
onto screen as it’s being generated, show an animation playing in real time, and deliver
production-ready Tailwind code — all as a live canvas being assembled while you watch.

Stack: CopilotKit (live canvas streaming, useCopilotAction for each card type),
LangChain LangGraph (boss + 4 worker agent orchestration), TokenRouter (AI gateway),
Metropolitan Museum Open API (art data), Three.js via CDN (Abstract Expressionism
animations), Manufact MCP server (exposes generate_style as a callable tool),
LangSmith (agent tracing and debugging).

This project was built entirely during the hackathon. The initial product concept
was developed during the hackathon planning session. No prior codebase exists —
The starting point was the Generative UI Global Hackathon Starter Kit provided
by the organizers (github.com/jerelvelarde/Generative-UI-Global-Hackathon-Starter-Kit),
which was then fully customized for this project. All agent architecture,
art movement data, design guidance files, and component generation logic
were created during the hackathon.