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

Genui Integration

by opentiny in opentiny/genui-sdk

genui-sdk 全方位指南：安装、配置、集成、示例。用户提到 genui-sdk、genui-sdk-server，或想构建 AI 聊天界面、动态 UI 组件、Node.js 后端 LLM 代理（OpenAI 兼容 chat/completions API）时使用。涵盖 Vue/Angular 前端（主题、物料、GenuiChat/GenuiRenderer）与 Server…

MITAuto-check passedAI & LLM Engineering

Install Genui Integration

skills CLI
$ npx skills add opentiny/genui-sdk --skill genui-integration -a claude-code

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

GitHub CLI
$ gh skill install opentiny/genui-sdk genui-integration --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/opentiny/genui-sdk.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/integrate/skill/genui-integration .claude/skills/genui-integration && 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
genui-integration
GitHub stars
171
Token cost
~1.3k tokens
SKILL.md length
388 words
Files
8 (incl. scripts, references)
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

genui-sdk 全方位指南：安装、配置、集成、示例。用户提到 genui-sdk、genui-sdk-server，或想构建 AI 聊天界面、动态 UI 组件、Node.js 后端 LLM 代理（OpenAI 兼容 chat/completions API）时使用。涵盖 Vue/Angular 前端（主题、物料、GenuiChat/GenuiRenderer）与 Server…

  • Works in 3 steps: 使用哪个技术栈？ 询问用户使用什么技术 → 项目状态？ 确定他们是 → 使用场景？ 了解他们想要构建什么
  • Tasks that involve LLM API integration
  • SKILL.md covers 理解用户需求, 核心概念, 集成模式概览 and 常用配置, plus 1 more section
  • Runs JavaScript scripts from its folder

What it does

Genui Integration is an agent skill from opentiny/genui-sdk. genui-sdk 全方位指南：安装、配置、集成、示例。用户提到 genui-sdk、genui-sdk-server，或想构建 AI 聊天界面、动态 UI 组件、Node.js 后端 LLM 代理（OpenAI 兼容 chat/completions API）时使用。涵盖 Vue/Angular 前端（主题、物料、GenuiChat/GenuiRenderer）与 Server 后端（CLI、Express 集成、流式代理）。即使用户只描述需求（如"搭建 LLM 代理服务"、"AI 聊天+动态组件"）而未提及 SDK 名称也应触发。

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `README.md`, `package.json` and `references/angular.md`).

It sits in AI & LLM Engineering, covering LLM API integration. It works with Vue.js, Angular, Node.js and OpenAI. The repository describes itself as: A Generative UI SDK for Vue, Angular and React. The licence is MIT.

When your agent uses it

  • Tasks that involve LLM API integration

Example prompts

  • “搭建 LLM 代理服务”
  • “AI 聊天+动态组件”
  • “/genui-integration”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. 使用哪个技术栈？ 询问用户使用什么技术
  2. 项目状态？ 确定他们是
  3. 使用场景？ 了解他们想要构建什么

What it can do on your machine

Read from SKILL.md and the folder at commit 69578e3. 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

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    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):

    • docs.opentiny.design

    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

Genui Integration loads about 1.3k tokens when it runs, and up to ~8k if it reads all its reference files. Until then it costs about 72 tokens; SKILL.md has 388 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~72
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8k

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); the scripts in this folder are not scanned.

SKILL.md

The full file from opentiny/genui-sdk at commit 69578e3, republished under its MIT licence (© opentiny). 388 words, ~1,313 tokens.

Download SKILL.mdSave it as .claude/skills/genui-integration/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
genui-integration
description
genui-sdk 全方位指南：安装、配置、集成、示例。用户提到 genui-sdk、genui-sdk-server，或想构建 AI 聊天界面、动态 UI 组件、Node.js 后端 LLM 代理（OpenAI 兼容 chat/completions API）时使用。涵盖 Vue/Angular 前端（主题、物料、GenuiChat/GenuiRenderer）与 Server 后端（CLI、Express 集成、流式代理）。即使用户只描述需求（如"搭建 LLM 代理服务"、"AI 聊天+动态组件"）而未提及 SDK 名称也应触发。

GenUI SDK 集成指南

本 skill 帮助用户将 GenUI SDK 集成到项目中。GenUI SDK 是一个用于构建由大语言模型（LLM）驱动的生成式 UI 界面的工具包，使 AI 能够动态生成交互式 UI 组件。

理解用户需求

在提供集成指导之前，确定：

  1. 使用哪个技术栈？ 询问用户使用什么技术：

    • Vue（Vue 3 组合式 API）→ 阅读 references/vue.md
    • Angular（Angular 独立组件）→ 阅读 references/angular.md
    • Server（Node.js 后端服务）→ 阅读 references/server.md
    • 其他框架（React 等）→ 说明当前仅支持 Vue 和 Angular，建议关注官方更新
    • 多个/全部（需要全面指导）→ 综合提供所有相关参考

  2. 项目状态？ 确定他们是：

    • 从零开始（新项目）→ 提供完整的初始化步骤
    • 添加到现有项目 → 侧重于配置和集成注意事项

  3. 使用场景？ 了解他们想要构建什么：

    • 带 AI 的完整聊天界面（使用 GenuiChat，仅 Vue）
    • 带流式渲染器的自定义 UI（使用 GenuiRenderer）
    • 代理 LLM 调用的后端服务（使用 genui-sdk-server）
集成模式决策树

根据用户需求，引导他们选择合适的模式：

用户需要什么？
├─ 快速开始，完整聊天界面
│  ├─ Vue → GenuiChat（模式 1）
│  └─ Angular → 不支持，建议使用 GenuiRenderer + 自定义聊天外壳
├─ 自定义 UI 布局
│  ├─ Vue → GenuiRenderer（模式 2）
│  └─ Angular → GenuiRenderer（模式 2）
├─ 后端服务
│  └─ 所有框架 → genui-sdk-server（模式 3）
└─ 不确定
   └─ 询问具体需求，然后推荐
边缘场景处理

  • React 用户：说明 GenUI SDK 目前仅支持 Vue 和 Angular，建议：

    1. 关注官方 GitHub 仓库了解 React 支持计划
    2. 考虑迁移到 Vue 或 Angular
    3. 参考架构设计，自行实现类似功能

  • TinyVue 配置：如果用户询问 TinyVue 组件库配置：

    1. 说明 TinyVue 是 GenUI SDK 的物料系统的一部分
    2. 引导查看 references/materials/index.md 及 快速开始 - 物料与主题
    3. 提供 GenuiConfigProvider 的使用示例

  • 主题切换：如果用户询问深色模式或主题：

    1. 说明支持 4 种主题：dark、lite、light、auto
    2. 提供 GenuiConfigProvider 的 theme 属性配置
    3. 引导查看各参考文件的主题配置章节

  • 自定义组件：如果用户想让 AI 使用业务组件：

    1. 说明需要在前端注册组件 + 后端配置 tinygenui metadata
    2. 引导查看 examples/ 目录的自定义组件示例
    3. 提供前后端联动的完整流程

  • openPage / 页面跳转：如果用户实现导航类自定义动作：

    1. 说明 LLM 控制的 URL 不可信，不可直接 window.open(params.url)
    2. 引导查看 references/angular.md 的 openAllowedPage 模式（origin 白名单 + 协议校验）
    3. 跨域或 _blank 须使用 noopener,noreferrer，拒绝未授权目标

  • Legacy 迁移：如果用户从 v1.3.0 前版本升级、希望零配置快速迁移：

    1. 引导使用 GenuiLegacyChat（Vue）或 GenuiLegacyRenderer（Vue/Angular）
    2. 说明内置默认物料，无需 GenuiConfigProvider
    3. 新项目仍应使用当前版组件 + 官方物料包，见 references/vue.md 或 references/angular.md 兼容组件章节

  • Element Plus 用户：如果项目已使用 Element Plus 而非 OpenTiny Vue：

    1. 说明可使用 @opentiny/genui-sdk-materials-vue-element-plus 替代官方物料
    2. 引导查看 references/materials/vue-element-plus.md
    3. 提醒需额外引入 element-plus/dist/index.css

  • 精简组件集：如果用户不需要图表或想减小物料体积：

    1. 说明 OpenTiny Vue 官方包提供 miniMaterials / miniMaterialsMeta 精简集
    2. 引导查看 references/materials/vue-opentiny-vue.md
    3. 强调前后端须一致使用 mini 版本

一旦了解他们的需求，阅读相应的参考文件并提供指导。

核心概念

在深入具体技术栈之前，理解这些关键概念：

物料（Materials）

GenUI SDK 使用物料系统将核心 SDK 与 UI 组件解耦。使用当前版 GenuiChat / GenuiRenderer（v1.3.0+）时，须通过 GenuiConfigProvider 注入物料。Legacy 兼容组件（GenuiLegacyChat / GenuiLegacyRenderer）内置默认物料，无需 ConfigProvider，见各参考文件「兼容组件」章节。

官方物料（默认推荐）：

  • Vue：@opentiny/genui-sdk-materials-vue-opentiny-vue
  • Angular：@opentiny/genui-sdk-materials-angular-opentiny-ng

可选物料与变体（详见 references/materials/）：

  • Vue Element Plus 替代方案：@opentiny/genui-sdk-materials-vue-element-plus
  • OpenTiny Vue 精简集：miniMaterials / miniMaterialsMeta
  • 旧项目迁移：GenuiLegacyChat / GenuiLegacyRenderer（内置物料）

当用户询问替换 UI 库、精简组件集或迁移方案时，阅读 references/materials/index.md 及对应专页。

Show full SKILL.md (138 more words)Show less
组件

GenuiChat（仅 Vue）：一个集成的聊天组件，包含会话管理、流式传输和生成状态。是最简单的入门方式。

GenuiRenderer：核心渲染器组件，将 JSON schema 转换为 UI。Vue 和 Angular 都可用。当你需要更多控制 UI 或想要构建自定义聊天界面时使用。

GenuiConfigProvider：配置提供者，注入物料和主题。当前版 GenuiChat / GenuiRenderer 集成需要；Legacy 兼容路径可省略。

流式协议

GenUI SDK 使用服务器发送事件（SSE）和 OpenAI 兼容格式。LLM 在用 ```schemaJson 标记的代码块中返回 JSON schema，SDK 提取并渲染这些内容。

集成模式概览

根据用户需求，引导他们选择合适的模式：

模式 1：GenuiChat（仅 Vue，推荐快速开始）
  • 适用场景：快速构建完整的聊天界面
  • 特点：开箱即用，包含会话管理、流式传输、生成状态
  • 详细指南：见 references/vue.md 模式 1 概况，操作步骤见 快速开始
模式 2：GenuiRenderer（Vue 和 Angular，自定义 UI）
  • 适用场景：构建自定义聊天界面或与现有 UI 集成
  • 特点：更灵活的控制，需要自己处理流式数据
  • 详细指南：见 references/vue.md 或 references/angular.md 模式 2 概况；Vue 见 使用 Renderer 组件，Angular 见 Angular Renderer 指南
模式 3：Server 集成
  • 适用场景：代理 LLM 调用的后端服务
  • 特点：OpenAI 兼容 API，支持流式响应
  • 详细指南：见 references/server.md

常用配置

主题配置

GenuiChat / GenuiRenderer 集成通过 GenuiConfigProvider 配置主题：

  • 'dark' - 深色主题
  • 'lite' - 清新主题
  • 'light' - 浅色主题（默认）
  • 'auto' - 跟随浏览器偏好

详细用法见各参考文件。

自定义组件和动作

SDK 支持扩展：

  • 自定义组件：让 AI 使用你的业务组件
  • 自定义动作：定义 AI 可以触发的交互（导航类 action 如 openPage 须做 URL 白名单校验）

详细配置和示例见 examples/ 目录下的相关文档。

下一步指导

阅读相应的参考文件后，为用户提供：

  1. 安装命令（针对他们的包管理器：npm/pnpm/yarn）
  2. 针对其场景的分步集成指南
  3. 可以复制并适配的完整工作示例
  4. 常见用例的配置技巧
  5. 高级功能的额外文档链接（指向 examples/ 目录和 references/materials/ 物料选型）

记住要：

  • 解释为什么需要某些配置，而不仅仅是做什么
  • 提供何时使用不同模式的上下文
  • 强调常见陷阱（如当前版集成忘记注入物料；Legacy 路径则无需 ConfigProvider）
  • 主动提供帮助以满足特定定制需求
  • 引导用户查看 examples/ 目录获取更多示例

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

Files

SKILL.md and 7 other files (scripts, references) in packages/integrate/skill/genui-integration of opentiny/genui-sdk.

  • SKILL.md
  • README.md
  • package.json
  • references/angular.md
  • references/materials/index.md
  • references/server.md
  • references/vue.md
  • scripts/copy-from-docs.mjs

Open the folder on GitHubat commit 69578e3

Compare with similar skills

Genui Integration 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.

Genui Integration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Genui Integration this skillopentiny/genui-sdk171—~1.3kAutomated safety check: PassMIT
AI Model Webmajiayu000/claude-skill-registry6662 repos~1.2kAutomated safety check: PassMIT
AI SDKvercel-labs/ai-facts16821 repos~1.2kAutomated safety check: PassNone
Mem0 Provider for Vercel AI SDKmem0ai/mem067k—~2.3kAutomated safety check: PassApache-2.0
Claude APIKocoro-lab/Kocoro4148 repos~4.5kAutomated safety check: PassApache-2.0
Tanstack AIsecondsky/claude-skills2271 repos~3.6kAutomated safety check: NotesMIT

Similar skills

  • AI Model Web

    majiayu000/claude-skill-registry

    A skill your agent uses when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities.

    666 GitHub starsUsed in 2 repos~1.2k tokens
    Media & CreativeAuto-check passed

  • AI SDK

    vercel-labs/ai-facts

    Official

    Answer questions about the AI SDK and help build AI-powered features.

    168 GitHub starsUsed in 21 repos~1.2k tokens
    AI & LLM EngineeringAuto-check passed

  • Mem0 Provider for Vercel AI SDK

    mem0ai/mem0

    Adds persistent memory to Vercel AI SDK apps with the Mem0 provider, using a wrapped model or standalone retrieve and store utilities.

    67k GitHub stars~2.3k tokensUpdated yesterday
    AI & LLM EngineeringAuto-check passed

  • Claude API

    Kocoro-lab/Kocoro

    Build apps with the Claude API or Anthropic SDK. An agent skill from Kocoro-lab/Kocoro.

    414 GitHub starsUsed in 8 repos~4.5k tokens
    AI & LLM EngineeringAuto-check passed

  • Tanstack AI

    secondsky/claude-skills

    TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama.

    227 GitHub starsUsed in 1 repo~3.6k tokens
    AI & LLM EngineeringAuto-check: notes

  • Neon AI Gateway

    neondatabase/agent-skills

    Official

    One API and one credential for frontier and open-source LLMs, built into your Neon branch and powered by Databricks.

    100 GitHub stars~5.1k tokensUpdated yesterday
    AI & LLM EngineeringAuto-check: notes

More from opentiny/genui-sdk

  • Release Notes

    opentiny/genui-sdk

    Generate and publish formatted GitHub Release Notes for opentiny/genui-sdk.

    171 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • Docs I18n

    opentiny/genui-sdk

    Sync GenUI SDK docs between Chinese and English when adding, editing, renaming, or deleting documentation under docs/.

    171 GitHub stars~962 tokensUpdated today
    Auto-check passed

  • Publicity Article

    opentiny/genui-sdk

    Write GenUI SDK version publicity articles for 掘金, 公众号, and other platforms from release notes.

    171 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Update Docs PR

    opentiny/genui-sdk

    After publishing a new @opentiny/genui-sdk package, update opentiny/docs (submodule, genui package versions, VitePress sidebar) and opentiny/opentiny.design (submodule commit only), then open PRs on…

    171 GitHub stars~819 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Genui Integration

What does Genui Integration do?

genui-sdk 全方位指南：安装、配置、集成、示例。用户提到 genui-sdk、genui-sdk-server，或想构建 AI 聊天界面、动态 UI 组件、Node.js 后端 LLM 代理（OpenAI 兼容 chat/completions API）时使用。涵盖 Vue/Angular 前端（主题、物料、GenuiChat/GenuiRenderer）与 Server…. Genui Integration is an agent skill from opentiny/genui-sdk.

When should I use Genui Integration?

Genui Integration fits situations like: tasks that involve LLM API integration.

How do I install Genui Integration in Claude Code?

Run `npx skills add opentiny/genui-sdk --skill genui-integration -a claude-code`. Or copy the skill folder (packages/integrate/skill/genui-integration in opentiny/genui-sdk) into .claude/skills/genui-integration in your project. Claude Code loads it when a task matches its description.

How do I install Genui Integration in Codex?

Run `npx skills add opentiny/genui-sdk --skill genui-integration -a codex`. Or copy the skill folder (packages/integrate/skill/genui-integration in opentiny/genui-sdk) into .agents/skills/genui-integration in your project. Codex loads it when a task matches its description.

Can I use Genui Integration 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 opentiny/genui-sdk --skill genui-integration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/genui-integration, .gemini/skills/genui-integration, .github/skills/genui-integration and .opencode/skills/genui-integration in your project.

What does Genui Integration need to run?

Going by SKILL.md and its folder, Genui Integration needs JavaScript for the scripts in its folder. Our summary lists: Node.js.

Does Genui Integration access the network?

SKILL.md names 1 domain. As links in the text: docs.opentiny.design. This is read from the text; nothing was executed.

Is Genui Integration 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Genui Integration use?

Genui Integration is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Genui Integration use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.7k tokens, read only when the agent opens those files.

What are the alternatives to Genui Integration?

Skills that share tags, products or a category with Genui Integration: AI Model Web (majiayu000/claude-skill-registry, 666 stars), AI SDK (vercel-labs/ai-facts, 168 stars), Mem0 Provider for Vercel AI SDK (mem0ai/mem0, 67k stars) and Claude API (Kocoro-lab/Kocoro, 414 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Genui Integration?

opentiny (a GitHub organization) maintains it in opentiny/genui-sdk, which has 171 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 8, 2026.

Source: opentiny/genui-sdk on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.