Bot Template Showcase React component
A gallery of ready-made AI bots: search and filter by team, open one to see what it does and connects to, and add it to your workspace.
About the Bot Template Showcase component
Bot Template Showcase gets people from an empty workspace to a working bot in a couple of clicks. Each template says plainly what it does, how many teams use it and how much time it saves.
Filter by team or search by tool, then open one to see its steps and connections before adding it.
When to use it
Use it as the first screen of an agent builder or a marketplace of automations.
Keep the promises honest. A saving people can't reach loses their trust quickly.
Installation
Add the Bot Template Showcase component to your project with the shadcn CLI. It lands in components/bot-template-showcase.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/bot-template-showcaseProps
<BotTemplateShowcase /> accepts 5 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Start from a template" |
| subtitle | string | "Ready-made bots for the work your team repeats." |
| templates | { id: string; name: string; category: string; summary: string; uses: number; saves: string; tools: string[]; steps: string[] }[] | DEFAULT_TEMPLATES |
| onUse | (template: BotTemplate) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Start from a template"
- subtitlestringDefault: "Ready-made bots for the work your team repeats."
- templates{ id: string; name: string; category: string; summary: string; uses: number; saves: string; tools: string[]; steps: string[] }[]Default: DEFAULT_TEMPLATES
- onUse(template: BotTemplate) => void
Bot Template Showcase FAQ
- Does Use this template create a bot?
- No. onUse gives you the template, and your app creates it.
- What can people search?
- Names, summaries and connected tools.
- Does filtering change the height?
- No. Hidden cards keep their space, so nothing below jumps.
- How does the panel work on a phone?
- It covers the whole block, and closes with the X or Escape.
