Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Rework templates into a component gallery

Open
#55 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
42/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start by reading .chalk/plans/demo-gallery.md and the existing template drawer it describes, then review related issues #14 and #42 for the export scope. Done means replacing the raw-template approach with curated gallery items showing one prompt and one interactive generated component, with component download support and the plan updated to match.

Written by the indexing model from the issue text.

Description

Problem

The current template system doesn't make sense from a UX perspective or for showcasing what Open Generative UI can do. Templates are a drawer of raw HTML strings — they don't communicate the value of agent-generated UI.

Proposal

Replace templates with a gallery of curated, saved conversation outputs. Each gallery item is a snapshot: 1 user message → 1 generated component. This lets visitors immediately see what the agent produces and interact with real outputs.

Gallery items should showcase two axes:

1. Explainers & Visualizations
Educational/explanatory generated components — things like:

  • "How a Plane Flies" — interactive pitch/roll/yaw 3D explainer
  • Binary search step-through
  • Solar system model
  • Neural network forward pass animation

These demonstrate the agent's ability to generate rich, interactive educational content from a simple prompt.

2. Custom UI & Styled Components
Generated components that match a specific design language or brand style:

  • Clippy / paperclip-style assistant UI
  • Spotify-inspired music dashboard
  • Invoice card in a specific design system
  • Themed dashboards

These demonstrate that generated UI isn't generic — the agent can produce components that feel intentionally designed.

Each gallery item includes:
  • The original user prompt (1 message)
  • The generated component output (rendered, interactive)
  • Ability to download the generated component
Download capability

Users should be able to download generated components from the gallery. This connects to the broader artifact export story.

Related issues

  • #14 — "Save / Download Rendered Asset" — downloading rendered visuals as PNG/SVG
  • #42 — "Add copy-as-code and download options for generated artifacts" — copy-as-code and download as standalone HTML

Replaces

This supersedes the template drawer approach. The existing gallery plan (.chalk/plans/demo-gallery.md) should be updated to reflect this direction.

Dominant language
TypeScript
Stars
1.6k
Forks
202
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CopilotKit/OpenGenerativeUI

All issues in CopilotKit/OpenGenerativeUI

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.