ai-elements
Construir Interfaces de Chat com IA
Crie componentes modernos de interface de chat com IA usando elementos de UI pré-construídos e compostáveis que seguem os padrões do shadcn/ui e convenções do Vercel AI SDK.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "ai-elements". Adicione um componente de mensagem para exibir respostas da IA
النتيجة المتوقعة:
O componente será criado em components/ai-elements/message.tsx com os subcomponentes Message, MessageContent e MessageResponse. As mensagens do usuário são estilizadas de forma diferente das mensagens do assistente usando a prop 'from'.
استخدام "ai-elements". Adicione suporte a anexos de arquivo ao meu chat
النتيجة المتوقعة:
Cria componentes para exibir anexos de arquivo com miniaturas de visualização. Suporta imagens, PDFs e arquivos genéricos com links de download. Integra-se com o fluxo de conversa.
استخدام "ai-elements". Adicione bloco de código com destaque de sintaxe
النتيجة المتوقعة:
Cria um componente CodeBlock com detecção de linguagem, números de linha e funcionalidade de copiar para a área de transferência. Suporta múltiplas linguagens de programação prontas para uso.
التدقيق الأمني
آمنThis is a legitimate Vercel AI Elements UI component library. Static scanner flagged many findings that are false positives: markdown documentation uses backticks for code examples (not Ruby execution), and example components contain base64-encoded images which trigger C2/encryption false positives. All network access is for CDN resources. No actual security risks identified.
عوامل الخطر
⚙️ الأوامر الخارجية (2409)
📁 الوصول إلى نظام الملفات (6)
🌐 الوصول إلى الشبكة (57)
🔑 متغيرات البيئة (9)
⚡ يحتوي على سكربتات (1)
درجة الجودة
ماذا يمكنك بناءه
Construir Aplicações de Chat com IA
Estruture rapidamente interfaces completas de chat com IA com bolhas de mensagens, anexos e respostas em streaming usando componentes pré-construídos.
Criar Ferramentas de Desenvolvedor
Adicione exibições de execução de código, saídas de terminal e painéis de resultados de ferramentas para criar assistentes de codificação com IA semelhantes a IDEs.
Adicionar Suporte de Voz e Mídia
Integre entrada de fala, reprodução de áudio e manipulação de mensagens multimídia em interfaces de IA conversacionais.
جرّب هذه الموجهات
Adicione um componente de mensagem à minha interface de chat usando ai-elements. Preciso de estilos de mensagem para usuário e assistente com suporte a conteúdo de texto.
Adicione suporte a anexos de arquivo ao chat usando o componente attachments do ai-elements. Suporte imagens e documentos com miniaturas de visualização.
Adicione exibição de resposta em streaming ao meu chat com IA usando ai-elements. Inclua indicador de digitação e renderização progressiva de texto.
Adicione um componente de bloco de código com destaque de sintaxe usando ai-elements. Inclua botão de copiar e rótulo de linguagem.
أفضل الممارسات
- Use o padrão de composição de componentes - importe subcomponentes como MessageContent separadamente para controlar a granularidade da renderização
- Personalize através da prop className em vez de modificar arquivos de origem - torna a atualização para versões mais recentes mais fácil
- Use o hook useChat do AI SDK para gerenciamento de estado de mensagens - os componentes são projetados para funcionar com ele prontamente
تجنب
- Modificar arquivos de componentes de origem diretamente - quebra o caminho de atualização e torna as atualizações difíceis
- Usar componentes sem integração com AI SDK - projetados para funcionar com o hook useChat para funcionalidade completa
- Ignorar a dependência do shadcn/ui - os componentes requerem Tailwind CSS e configuração do shadcn/ui