Skills

kai-skills

Wraps onto as many lines as it needs, so a long tool list still fits the row.

• Shadow DOM
• Property or declarative children
• Badges wrap automatically
• 2 composition paths

Preview

When to use

Beneath an assistant message, to say which tools were active for that turn. For the calls themselves, use Tool.

Usage

Assign the skills property after the element upgrades — arrays can’t be HTML attributes:

<kai-skills id="skills"></kai-skills>
<script type="module">
  import '@kitn.ai/ui/web-components';
  document.getElementById('skills').skills = [
    { id: 'web-search', name: 'Web Search' },
    { id: 'code',       name: 'Code' },
  ];
</script>

• Declarative path — nest <kai-skill id="…">Label</kai-skill> children directly; useful for server-rendered HTML with no JS wiring.
• Mixed — when both are provided, prop items render first and declarative children are appended after.
• SolidJS — import MessageSkills from @kitn.ai/ui and pass a skills prop instead.

Child element	Attributes	Text content	Notes
<kai-skill>	id	Yes	Parse a single light-DOM `<kai-skill>` element into a `Skill` descriptor. Attribute / content mapping: - `id` → Skill.id (falls back to `name` when absent) - `textContent` → Skill.name (the human-readable badge label) Example: `<kai-skill id="web-search">Web Search</kai-skill>`

Examples

Two Skills

Code

Multiple Skills

Badges wrap horizontally when they overflow — no extra layout work needed.

Code

Declarative Composition

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
skills	Skill[]	[]	The active skills to badge. JS property (array); omit to pass `<kai-skill>` light-DOM children instead.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

MessageSkills

---

Need a hand? Report a bug Ask for help