Openui skill

O Claude monta apps e agentes em que a resposta da IA chega como interface ao vivo, desenhada com os componentes que você escolher, em vez de texto corrido.

por thesysdev

instalações: 1.400
estrelas no GitHub: 20
No skills.sh desde: julho de 2026
Licença: Sem licença declarada

Atualizada no GitHub em 15 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

thesysdev
openui
O Claude monta apps e agentes em que a resposta da IA chega como interface ao vivo, desenhada com os componentes que você escolher, em vez de texto corrido.Auditada1.400 instalações, grátis

O que ela faz

A skill ensina o Claude a usar o OpenUI, um sistema de UI generativa: o modelo escreve numa linguagem própria e compacta, a OpenUI Lang, usando os componentes de uma biblioteca, e o navegador desenha a tela enquanto a resposta ainda está chegando. Serve pra chat, agente ou painel.

Antes de mexer, ele lê o package.json e as versões instaladas dos pacotes @openuidev e confia primeiro no código instalado, depois na documentação. Daí escolhe o caminho: app novo, app que já existe, conexão com o Gateway, componentes, tema claro e escuro, tela em branco pra consertar ou publicação.

As chamadas ao modelo passam pelo OpenUI Gateway, que corrige a interface quebrada no meio do streaming, troca de provedor se um cair e aceita sua assinatura da OpenAI, da Anthropic ou do Google. Em app que já existe, ele mantém framework, login e armazenamento e só muda o necessário.

Nas palavras de quem fez

Generative UI with OpenUI: build apps and agents whose model responses render as live interfaces. Use when the task involves OpenUI, OpenUI Lang,…

thesysdev, no SKILL.md

Quando usar

Criar um chat em que a IA responde com tela em vez de texto
Pôr UI generativa num app React, Vue, Svelte ou Angular que já existe
Montar um painel que a IA preenche durante a conversa
Consertar resposta que aparece em branco ou quebrada na tela
Publicar o app numa URL com a CLI do OpenUI

Depois de instalar, é só pedir assim

Cria um app novo com OpenUI: um assistente de vendas que responde mostrando os produtos em cards
Coloca UI generativa do OpenUI no chat que já existe nesse projeto Next.js, sem trocar o login
Muda as cores e a fonte da interface do OpenUI e liga o modo escuro

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Openui no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Openui, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a openui skill precisa pra funcionar?

De Node e de uma chave THESYS_API_KEY, criada por você no Thesys Console ou com npx @openuidev/cli generate-api-key; o Claude nunca cria nem lê a chave. O Gateway tem modelos grátis com limite pra desenvolver e, nos outros, cobra os tokens pelo preço do provedor.

Roda no Codex e no Antigravity?

Roda: são instruções e comandos de terminal (npx @openuidev/cli), que qualquer agente que executa comandos consegue seguir.

Funciona com backend em Python?

Os pacotes do OpenUI são em JavaScript. Pra backend em Python, a skill manda o Claude ler o código-fonte desses pacotes e reproduzir o mesmo comportamento; há um exemplo pronto com FastAPI no repositório do OpenUI.

Levar essa skill

1x openuiR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/thesysdev/skills

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.