{"id":32435337,"url":"https://github.com/observedobserver/streamlit-ai-elements","last_synced_at":"2026-07-09T17:31:18.538Z","repository":{"id":319579882,"uuid":"1078846791","full_name":"ObservedObserver/streamlit-ai-elements","owner":"ObservedObserver","description":"AI components for building agent in streamlit","archived":false,"fork":false,"pushed_at":"2025-10-19T03:04:14.000Z","size":176,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-19T15:55:23.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ObservedObserver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-18T14:51:58.000Z","updated_at":"2025-10-19T03:04:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"d00545fb-e92a-4cb6-b7f0-9367e805d927","html_url":"https://github.com/ObservedObserver/streamlit-ai-elements","commit_stats":null,"previous_names":["observedobserver/streamlit-ai-elements"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ObservedObserver/streamlit-ai-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-ai-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-ai-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-ai-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-ai-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ObservedObserver","download_url":"https://codeload.github.com/ObservedObserver/streamlit-ai-elements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-ai-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281032291,"owners_count":26432755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-25T22:51:25.728Z","updated_at":"2026-07-09T17:31:18.522Z","avatar_url":"https://github.com/ObservedObserver.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# streamlit-ai-elements\n\n`streamlit-ai-elements` is a Streamlit component library for rendering AI-generated UI inside chat and app layouts.\n\nIt provides:\n\n- raw HTML/CSS/JS rendering\n- sandboxed interactive dashboards with preloaded libraries\n- pre-built renderers such as Vega-Lite and Excalidraw\n- a lightweight Chat Kit for streaming assistant output, reasoning blocks, and tool-call cards\n- runtime resources that can be exposed to both the model and the frontend\n\n\n\nhttps://github.com/user-attachments/assets/ff4424a9-59d6-4a8f-8116-6732060d3e26\n\n\n\n## Installation\n\n```bash\npip install streamlit-ai-elements\n```\n\nFor chat demos with OpenAI:\n\n```bash\npip install openai python-dotenv\n```\n\n## Quick Start\n\n```python\nimport streamlit as st\nimport streamlit_ai_elements as ai\n\nst.title(\"Hello, AI Elements\")\n\nai.js_raw(\n    html=\"\u003cdiv class='card'\u003eHello from AI Elements\u003c/div\u003e\",\n    css=\"\"\"\n    .card {\n        padding: 16px;\n        border-radius: 12px;\n        background: linear-gradient(135deg, #f7efe5, #dceeff);\n        font: 600 18px/1.4 system-ui;\n    }\n    \"\"\",\n)\n```\n\n## Core APIs\n\n### Renderers\n\nThe library exposes four main rendering entrypoints:\n\n- `ai.js_raw(...)`\n- `ai.sandbox(...)`\n- `ai.vega_lite(...)`\n- `ai.excalidraw(...)`\n\n### Runtime Resources\n\nResources let you pass structured data to renderers and chat tools:\n\n- `ai.resource.dataframe(...)`\n- `ai.resource.sql_database(...)`\n- `ai.resources(...)`\n\n### Chat Kit\n\nThe chat subsystem is built for streaming assistant output and tool-call rendering:\n\n- `ai.ChatBackendConfig(...)`\n- `ai.create_chat_session()`\n- `ai.append_user_message(...)`\n- `ai.stream_assistant_turn(...)`\n- `ai.stream_chat_turn(...)`\n- `ai.render_chat_session(...)`\n- `ai.chat_stream(...)`\n\n## Renderer Examples\n\n### 1. Raw HTML / CSS / JS\n\n```python\nimport streamlit_ai_elements as ai\n\nai.js_raw(\n    html=\"\u003cdiv id='app'\u003e\u003c/div\u003e\",\n    css=\"#app { padding: 12px; font-family: system-ui; }\",\n    js=\"\"\"\n    container.querySelector(\"#app\").innerHTML = `\n      \u003ch3\u003eRaw Renderer\u003c/h3\u003e\n      \u003cp\u003eThis block was rendered from HTML, CSS, and JS.\u003c/p\u003e\n    `;\n    \"\"\",\n)\n```\n\n### 2. Sandbox Dashboard\n\n`sandbox(...)` is useful when you want a JavaScript runtime with preloaded libraries such as `echarts`, `d3`, or `three`.\n\n```python\nimport streamlit_ai_elements as ai\n\nai.sandbox(\n    js=\"\"\"\n    container.innerHTML = `\n      \u003cdiv style=\"padding:16px\"\u003e\n        \u003ch3\u003eSandbox\u003c/h3\u003e\n        \u003cdiv id=\"chart\" style=\"height:320px\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    `;\n\n    const chart = echarts.init(container.querySelector(\"#chart\"));\n    chart.setOption({\n      xAxis: { type: \"category\", data: [\"Mon\", \"Tue\", \"Wed\", \"Thu\"] },\n      yAxis: { type: \"value\" },\n      series: [{ type: \"bar\", data: [12, 20, 15, 8] }],\n    });\n    \"\"\",\n    libraries=[\"echarts\"],\n)\n```\n\n### 3. Vega-Lite Chart\n\nUse `ai.vega_lite(...)` for standard declarative charts.\n\n```python\nimport streamlit_ai_elements as ai\n\nai.vega_lite(\n    spec={\n        \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n        \"width\": \"container\",\n        \"mark\": \"bar\",\n        \"data\": {\n            \"values\": [\n                {\"category\": \"A\", \"value\": 28},\n                {\"category\": \"B\", \"value\": 55},\n                {\"category\": \"C\", \"value\": 43},\n            ]\n        },\n        \"encoding\": {\n            \"x\": {\"field\": \"category\", \"type\": \"nominal\"},\n            \"y\": {\"field\": \"value\", \"type\": \"quantitative\"},\n        },\n    }\n)\n```\n\n### 4. Excalidraw Diagram\n\n```python\nimport streamlit_ai_elements as ai\n\nai.excalidraw(\n    shapes=[\n        {\"id\": \"start\", \"type\": \"rounded-rectangle\", \"x\": 80, \"y\": 80, \"width\": 180, \"height\": 64, \"text\": \"Start\"},\n        {\"id\": \"done\", \"type\": \"rectangle\", \"x\": 360, \"y\": 80, \"width\": 180, \"height\": 64, \"text\": \"Done\"},\n    ],\n    connectors=[\n        {\"from\": \"start\", \"to\": \"done\", \"text\": \"next\"},\n    ],\n)\n```\n\n## Using Resources\n\nResources can be shared with renderers and chat tools.\n\n```python\nimport pandas as pd\nimport streamlit_ai_elements as ai\n\ndf = pd.DataFrame(\n    [\n        {\"month\": \"Jan\", \"revenue\": 120},\n        {\"month\": \"Feb\", \"revenue\": 180},\n        {\"month\": \"Mar\", \"revenue\": 160},\n    ]\n)\n\nruntime_resources = ai.resources(\n    sales=ai.resource.dataframe(\n        df,\n        description=\"Monthly sales data\",\n    )\n)\n\nai.vega_lite(\n    spec={\n        \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n        \"width\": \"container\",\n        \"mark\": \"line\",\n        \"encoding\": {\n            \"x\": {\"field\": \"month\", \"type\": \"nominal\"},\n            \"y\": {\"field\": \"revenue\", \"type\": \"quantitative\"},\n        },\n    },\n    data_resource=\"sales\",\n    resources=runtime_resources,\n)\n```\n\n## Chat Kit Example\n\nThe Chat Kit keeps a structured timeline in `st.session_state` and replays the full conversation on rerun.\n\n```python\nimport os\nimport streamlit as st\nfrom openai import OpenAI\nimport streamlit_ai_elements as ai\n\nclient = OpenAI(api_key=os.environ[\"OPENAI_API_KEY\"])\n\nif \"chat_session\" not in st.session_state:\n    st.session_state.chat_session = ai.create_chat_session()\n\nai.render_chat_session(st.session_state.chat_session)\n\nif prompt := st.chat_input(\"Ask for a chart or diagram\"):\n    st.session_state.chat_session = ai.append_user_message(\n        st.session_state.chat_session,\n        prompt,\n    )\n\n    config = ai.ChatBackendConfig(\n        model=\"gpt-5.4\",\n        backend=\"responses\",\n        reasoning_effort=\"medium\",\n        reasoning_summary=\"auto\",\n    )\n\n    ai.chat_stream(\n        ai.stream_assistant_turn(\n            client,\n            state=st.session_state.chat_session,\n            config=config,\n        ),\n        state=st.session_state.chat_session,\n    )\n```\n\n## How the AI Tools Work\n\nWhen used with the Chat Kit, the assistant can choose from three rendering modes:\n\n- `js_raw`\n- `sandbox`\n- `prebuilt_component`\n\n`prebuilt_component` currently supports:\n\n- `component=\"vega_lite\"`\n- `component=\"excalidraw\"`\n\nFor Vega-Lite tool calls:\n\n- `spec` must be a non-empty object that follows Vega-Lite syntax\n- use inline `data.values` or provide `data_resource` for runtime data\n\nFor Excalidraw tool calls:\n\n- provide structured `shapes`\n- optionally provide `connectors`, `camera`, and `zoom_to_fit`\n\n## Running the Demo\n\n```bash\nstreamlit run demo.py\n```\n\n## Package Layout\n\n- `streamlit_ai_elements/__init__.py`: public renderer APIs\n- `streamlit_ai_elements/runtime_resources.py`: runtime resource registry\n- `streamlit_ai_elements/chat/`: Chat Kit runtime, adapters, event model, and UI helpers\n- `demo.py`: example streaming chat app\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobservedobserver%2Fstreamlit-ai-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fobservedobserver%2Fstreamlit-ai-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobservedobserver%2Fstreamlit-ai-elements/lists"}