Communitygithub.com

YepAPI/skills

Componentes de interface de chat, respostas em streaming com AI SDK, gerenciamento de janela de contexto e padrões de RAG.

O que é skills?

Este skill oferece um conjunto de padrões e regras para construir chatbots de IA com streaming eficiente e gerenciamento inteligente de contexto. Ele é projetado para desenvolvedores que utilizam o Vercel AI SDK, fornecendo componentes de UI de chat com auto-scroll, indicadores de carregamento animados e renderização de Markdown. O skill padroniza o formato das mensagens, o gerenciamento da janela de contexto (removendo as mensagens mais antigas quando o limite de tokens é atingido) e a implementação de RAG (embedding da consulta do usuário, busca vetorial e injeção dos principais resultados como contexto). Suporta a persistência do histórico de conversas no servidor e inclui estratégias para evitar erros comuns, como enviar todo o histórico sem truncagem ou bloquear a interface do usuário. O endpoint de chat YepAPI é integrado, permitindo streaming de respostas e uso de AbortController para interromper a geração.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/ai-chatbot

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Chatbot de IA

Regras

  • Use o Vercel AI SDK (pacote ai) para streaming — hook useChat() no cliente, streamText() no servidor
  • Stream de respostas com text/event-stream — nunca armazene respostas completas antes de enviá-las
  • Formato da mensagem: { role: "user" | "assistant" | "system", content: string }
  • Gerenciamento da janela de contexto: remova as mensagens mais antigas quando se aproximar do limite de tokens, sempre mantenha o prompt do sistema
  • Padrão RAG: incorpore a consulta do usuário → busca vetorial → injete os top-k resultados como contexto antes da mensagem do usuário
  • UI de chat: auto-scroll para o final, indicador de carregamento com pontos animados, renderize Markdown nas mensagens do assistente
  • Persista o histórico da conversa no servidor — use uma tabela messages com chatId, role, content, createdAt
  • O prompt do sistema vai primeiro no array de mensagens — nunca deixe mensagens do usuário sobrescrevê-lo
  • Endpoint de chat YepAPI: POST /v1/ai/chat com { messages, model?, stream? }
  • Botão de parar geração — use AbortController para cancelar streams em andamento

Patterns

// Cliente — useChat do Vercel AI SDK
const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat({
  api: "/api/chat",
});
// Servidor — resposta em streaming
import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model, messages });
  return result.toDataStreamResponse();
}

Evite

  • Enviar todo o histórico da conversa sem truncagem — excederá a janela de contexto
  • Bloquear a UI enquanto espera a resposta completa — sempre faça streaming
  • Armazenar mensagens apenas no estado do cliente — persista no servidor para histórico
  • Hardcodar nomes de modelos — use variáveis de ambiente ou configuração

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Tenant isolation (row-level vs schema), subdomain routing, per-tenant config, and data partitioning.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

Habilidades Relacionadas