New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Using Streamlit Custom Components

by iusztinpaul in iusztinpaul/designing-real-world-ai-agents-workshop

Using third-party Streamlit custom components. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

Apache-2.0Auto-check passedData & Analytics

Install Using Streamlit Custom Components

skills CLI
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop using-streamlit-custom-components --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components .claude/skills/using-streamlit-custom-components && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
using-streamlit-custom-components
GitHub stars
513
Token cost
~1.1k tokens
SKILL.md length
281 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
Apache-2.0

At a glance

Using third-party Streamlit custom components. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

  • Extending Streamlit with community packages
  • SKILL.md covers What are custom components?, Installation, Use with caution and Popular custom components, plus 2 more sections
  • Calls uv

What it does

Using Streamlit Custom Components is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Using third-party Streamlit custom components. Use when extending Streamlit with community packages. Covers installation, popular custom components, and when to use them.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Data & Analytics. It works with Streamlit. The repository describes itself as: Hands-on workshop: Build a multi-agent AI system from scratch — Deep Research Agent + Writing Workflow served as MCP servers. Includes code, slides, and video. The licence is Apache-2.0.

When your agent uses it

  • Extending Streamlit with community packages

Example prompts

  • “/using-streamlit-custom-components”

Requirements

  • Python 3

What it can do on your machine

Read from SKILL.md and the folder at commit ea4f6e9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • uv

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com
    • pypi.org
    • streamlit.io
    • folium.streamlit.app
    • docs.kanaries.net
    • extras.streamlit.app
    • docs.streamlit.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Using Streamlit Custom Components loads about 1.1k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 281 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~51
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from iusztinpaul/designing-real-world-ai-agents-workshop at commit ea4f6e9, republished under its Apache-2.0 licence (© iusztinpaul). 281 words, ~1,104 tokens.

Download SKILL.mdSave it as .claude/skills/using-streamlit-custom-components/SKILL.md (or your agent's skills folder).
name
using-streamlit-custom-components
description
Using third-party Streamlit custom components. Use when extending Streamlit with community packages. Covers installation, popular custom components, and when to use them.
license
Apache-2.0

Streamlit custom components

Extend Streamlit with third-party custom components from the community.

What are custom components?

Custom components are standalone Python libraries that add features not in Streamlit's core API. They're built by the community and can be installed like any Python package.

Installation

Install using the PyPI package name (not the repo name—they can differ):

bash
uv add <pypi-package-name>

Then import according to the component's documentation. The import name often differs from the package name too.

Use with caution

Components are not maintained by Streamlit. Before adopting:

  • Check maintenance - Is it actively maintained? Recent commits?
  • Check compatibility - Does it work with your Streamlit version?
  • Check popularity - GitHub stars, downloads, community usage
  • Consider alternatives - Can you achieve this with core Streamlit?

Custom components can break when Streamlit updates, so prefer core features when possible.

streamlit-keyup

Text input that fires on every keystroke instead of waiting for enter/blur. Useful for live search.

bash
uv add streamlit-keyup
python
from st_keyup import st_keyup

query = st_keyup("Search", debounce=300)  # 300ms debounce
filtered = df[df["name"].str.contains(query, case=False)]
st.dataframe(filtered)
streamlit-bokeh

Official replacement for st.bokeh_chart (removed from Streamlit API). Maintained by Streamlit.

bash
uv add streamlit-bokeh
python
from bokeh.plotting import figure
from streamlit_bokeh import streamlit_bokeh

p = figure(title="Simple Line", x_axis_label="x", y_axis_label="y")
p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2)
streamlit_bokeh(p)
streamlit-aggrid

Interactive dataframes with sorting, filtering, cell editing, grouping, and pivoting. Use when you need customization beyond what st.dataframe and st.data_editor offer.

bash
uv add streamlit-aggrid
python
from st_aggrid import AgGrid

AgGrid(df, editable=True, filter=True)

When to use aggrid over st.dataframe:

  • Interactive row grouping and pivoting
  • Advanced filtering and sorting UI
  • Complex cell editing workflows
  • Custom cell renderers
streamlit-folium

Interactive maps powered by Folium.

bash
uv add streamlit-folium
python
import folium
from streamlit_folium import st_folium

m = folium.Map(location=[37.7749, -122.4194], zoom_start=12)
st_folium(m, width=700)
pygwalker

Tableau-like drag-and-drop data exploration.

bash
uv add pygwalker
python
import pygwalker as pyg

pyg.walk(df, env="Streamlit")
streamlit-extras

A collection of community utilities. Cherry-pick what you need.

bash
uv add streamlit-extras
python
from streamlit_extras.image_selector import image_selector

# Let users click on regions of an image
selection = image_selector(image, selections=["Region A", "Region B"])
python
from streamlit_extras.vertical_slider import vertical_slider

# A vertical slider widget
value = vertical_slider("Volume", min_value=0, max_value=100, default_value=50)

Discover more

Browse the custom component gallery: https://streamlit.io/components

Filter by category, popularity, and recency to find custom components for your use case.

References

© iusztinpaul, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components of iusztinpaul/designing-real-world-ai-agents-workshop.

Open the folder on GitHubat commit ea4f6e9

Compare with similar skills

Using Streamlit Custom Components next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Using Streamlit Custom Components compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Using Streamlit Custom Components this skilliusztinpaul/designing-real-world-ai-agents-workshop513—~1.1kAutomated safety check: PassApache-2.0
Paper FiguresEvoScientist/EvoSkills4751 repos~4.4kAutomated safety check: PassApache-2.0
Streamlit To Marimomarimo-team/skills174—~1.5kAutomated safety check: PassApache-2.0
Cookbook Visualizationsdatabricks-solutions/databricks-apps-cookbook183—~1.1kAutomated safety check: PassCustom licence
Develop Wizard Appowid/etl158—~722Automated safety check: PassMIT
Streamline Analyst Guidewentorai/research-plugins2981 repos~885Automated safety check: PassMIT

Similar skills

  • Paper Figures

    EvoScientist/EvoSkills

    A skill your agent uses to produce standalone, publication-ready PNG graphics and reproducible matplotlib scripts from tabular data (CSVs or DataFrames).

    475 GitHub starsUsed in 1 repo~4.4k tokens
    Data & AnalyticsAuto-check passed

  • Streamlit To Marimo

    marimo-team/skills

    Convert a Streamlit app to a marimo notebook. An agent skill from marimo-team/skills.

    174 GitHub stars~1.5k tokensUpdated 1 mo ago
    Data & AnalyticsAuto-check passed

  • Cookbook Visualizations

    databricks-solutions/databricks-apps-cookbook

    Create charts, graphs, and map visualizations in Databricks Apps.

    183 GitHub stars~1.1k tokensUpdated 4 days ago
    Data & AnalyticsAuto-check passed

  • Develop Wizard App

    owid/etl

    Create or modify Streamlit apps in the Wizard. An agent skill from owid/etl.

    158 GitHub stars~722 tokensUpdated today
    Data & AnalyticsAuto-check passed

  • Streamline Analyst Guide

    wentorai/research-plugins

    End-to-end data analysis AI agent with Streamlit UI. An agent skill from wentorai/research-plugins.

    298 GitHub starsUsed in 1 repo~885 tokens
    Data & AnalyticsAuto-check passed

  • Tracking And Solutions

    VectorSpaceLab/AREX-Skill

    A skill your agent uses for Ultralytics track mode, tracker YAML selection, persistent object IDs, and YOLO Solutions such as counting, heatmaps, speed, queue, region, similarity search, and…

    328 GitHub stars~871 tokensUpdated 1 mo ago
    AI & LLM EngineeringAuto-check passed

More from iusztinpaul/designing-real-world-ai-agents-workshop

All 23 skills in this repo

  • Building Streamlit Custom Components V2

    iusztinpaul/designing-real-world-ai-agents-workshop

    Builds bidirectional Streamlit Custom Components v2 (CCv2) using st.components.v2.component.

    513 GitHub stars~2.8k tokensUpdated 4 mo ago
    Auto-check passed

  • Building Streamlit Chat UI

    iusztinpaul/designing-real-world-ai-agents-workshop

    Building chat interfaces in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    513 GitHub stars~1.4k tokensUpdated 4 mo ago
    Auto-check passed

  • Building Streamlit Dashboards

    iusztinpaul/designing-real-world-ai-agents-workshop

    Building dashboards in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    513 GitHub stars~1.1k tokensUpdated 4 mo ago
    Auto-check passed

  • Building Streamlit Multipage Apps

    iusztinpaul/designing-real-world-ai-agents-workshop

    Building multi-page Streamlit apps. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    513 GitHub stars~1.6k tokensUpdated 4 mo ago
    Auto-check passed

  • Choosing Streamlit Selection Widgets

    iusztinpaul/designing-real-world-ai-agents-workshop

    Choosing the right Streamlit selection widget. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    513 GitHub stars~1.1k tokensUpdated 4 mo ago
    Auto-check passed

  • Connecting Streamlit To Snowflake

    iusztinpaul/designing-real-world-ai-agents-workshop

    Connecting Streamlit apps to Snowflake. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    513 GitHub stars~1.3k tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Using Streamlit Custom Components

What does Using Streamlit Custom Components do?

Using third-party Streamlit custom components. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Using Streamlit Custom Components is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Using third-party Streamlit custom components.

When should I use Using Streamlit Custom Components?

Using Streamlit Custom Components fits situations like: extending Streamlit with community packages.

How do I install Using Streamlit Custom Components in Claude Code?

Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -a claude-code`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components in iusztinpaul/designing-real-world-ai-agents-workshop) into .claude/skills/using-streamlit-custom-components in your project. Claude Code loads it when a task matches its description.

How do I install Using Streamlit Custom Components in Codex?

Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -a codex`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components in iusztinpaul/designing-real-world-ai-agents-workshop) into .agents/skills/using-streamlit-custom-components in your project. Codex loads it when a task matches its description.

Can I use Using Streamlit Custom Components in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/using-streamlit-custom-components, .gemini/skills/using-streamlit-custom-components, .github/skills/using-streamlit-custom-components and .opencode/skills/using-streamlit-custom-components in your project.

What does Using Streamlit Custom Components need to run?

Going by SKILL.md and its folder, Using Streamlit Custom Components needs the command-line tools its instructions call (uv). Our summary lists: Python 3.

Does Using Streamlit Custom Components access the network?

SKILL.md names 7 domains. As links in the text: github.com, pypi.org, streamlit.io, folium.streamlit.app, docs.kanaries.net, extras.streamlit.app and docs.streamlit.io. This is read from the text; nothing was executed.

Is Using Streamlit Custom Components safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Using Streamlit Custom Components use?

Using Streamlit Custom Components is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Using Streamlit Custom Components use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Using Streamlit Custom Components?

Skills that share tags, products or a category with Using Streamlit Custom Components: Paper Figures (EvoScientist/EvoSkills, 475 stars), Streamlit To Marimo (marimo-team/skills, 174 stars), Cookbook Visualizations (databricks-solutions/databricks-apps-cookbook, 183 stars) and Develop Wizard App (owid/etl, 158 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Using Streamlit Custom Components?

iusztinpaul (a GitHub user) maintains it in iusztinpaul/designing-real-world-ai-agents-workshop, which has 513 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on June 3, 2026.

Source: iusztinpaul/designing-real-world-ai-agents-workshop on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.