mbeps/ai-client

O que ai-client faz?

Aplicativo de chat com IA que oferece árvores de mensagens ramificadas, respostas em streaming em tempo real, renderização de artefatos em múltiplos formatos (Markdown, HTML, XLSX, diagramas Mermaid), manipulação de arquivos e servidores MCP (Model Context Protocol) integrados.

Funcionalidades

• Árvores de mensagens ramificadas: Crie diferentes ramificações a partir de qualquer mensagem, permitindo explorar múltiplos caminhos de conversa.
• Streaming em tempo real: Visualize as respostas da IA conforme elas são geradas, sem necessidade de aguardar o processamento completo.
• Renderização de artefatos: Exiba conteúdo formatado diretamente no chat, incluindo:
  • Markdown
  • HTML
  • Planilhas XLSX
  • Diagramas Mermaid
• Manipulação de arquivos: Faça upload, download e referencie arquivos durante a conversa.
• Servidores MCP: Conecte-se a servidores MCP para estender as capacidades do chat com ferramentas e recursos personalizados.

Pré-requisitos

• Node.js 18+ (recomendado 20 LTS)
• npm ou yarn

Instalação

# Clone o repositório
git clone https://github.com/mbeps/ai-client.git
cd ai-client

# Instale as dependências
npm install

Configuração

1. Copie o arquivo de variáveis de ambiente:

cp .env.example .env

2. Edite o arquivo .env com suas chaves de API:

# Provedor de IA (OpenAI, Anthropic, etc.)
AI_PROVIDER=openai
AI_API_KEY=sk-sua-chave-aqui

# Servidores MCP (opcional)
MCP_SERVER_URL=http://localhost:3001

Uso

npm run dev

O aplicativo será iniciado em modo de desenvolvimento. Acesse http://localhost:5173 no seu navegador.

Comandos

Comando	Descrição
npm run dev	Inicia o servidor de desenvolvimento
npm run build	Compila o projeto para produção
npm run preview	Visualiza a compilação de produção
npm run lint	Executa o linter no código-fonte

Integração com MCP

O mbeps/ai-client pode se conectar a servidores MCP para fornecer ferramentas adicionais ao modelo de IA. Exemplo de configuração de servidor MCP:

{
  "servers": {
    "meu-servidor": {
      "command": "node",
      "args": ["servidor-mcp.js"],
      "env": {
        "MCP_TOKEN": "token-seguro"
      }
    }
  }
}

Estrutura do Projeto

src/
  components/     # Componentes da interface
  hooks/          # Hooks React personalizados
  services/       # Serviços de API e lógica de negócio
  store/          # Gerenciamento de estado (Zustand)
  utils/          # Funções utilitárias
  types/          # Tipos TypeScript

Licença

MIT