Forem: Weverton Souza

Configuração de MCP Server de Arquivos Locais com Claude Desktop

Weverton Souza — Fri, 11 Apr 2025 18:06:11 +0000

Introdução

O Model Context Protocol (MCP) permite que aplicações de IA, como o Claude, interajam com arquivos locais em seu computador. Neste tutorial, vou mostrar como configurar o MCP Server para arquivos locais com o Claude Desktop, permitindo que a IA acesse, leia e manipule seus arquivos de forma eficiente.

O que é o MCP (Model Context Protocol)?

Antes de começarmos, é importante entender o que é o MCP. O Model Context Protocol é um padrão aberto que permite que modelos de IA interajam com recursos externos, como arquivos locais, banco de dados, e muito mais. Isso expande significativamente as capacidades das IAs, permitindo que elas trabalhem com seus dados diretamente.

Pré-requisitos

Node.js instalado em seu computador
Claude Desktop instalado
Conhecimento básico de como editar arquivos JSON

Passo 1: Instalar o Claude Desktop

O primeiro passo é instalar o aplicativo Claude Desktop em seu computador:

Acesse https://claude.ai/download e baixe a versão do Claude Desktop compatível com seu sistema operacional (Windows, macOS ou Linux).
Execute o instalador e siga as instruções padrão de instalação.
Após a instalação, abra o Claude Desktop e faça login com sua conta Claude.

Passo 2: Preparar o MCP Server para Arquivos Locais

O MCP Server para sistema de arquivos locais é uma implementação oficial disponível no GitHub:

Vamos utilizar o pacote NPX, que permite executar pacotes npm sem instalá-los globalmente.
O servidor MCP de sistema de arquivos segue a documentação oficial: https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem

A configuração que você precisará para o próximo passo segue este formato:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/path/to/other/allowed/dir"
      ]
    }
  }
}

Nota importante: Substitua /Users/username/Desktop e /path/to/other/allowed/dir pelos diretórios reais do seu sistema de arquivos que você deseja permitir que o Claude acesse. Por exemplo:

No Windows: C:\\Users\\SeuUsuario\\Documents e C:\\Projetos
No macOS ou Linux: /Users/SeuUsuario/Documents e /Users/SeuUsuario/Projetos

Você pode adicionar quantos diretórios quiser como argumentos adicionais na lista args.

Passo 3: Configurar o Claude Desktop para usar o MCP Server

Agora vamos configurar o Claude Desktop para usar o servidor MCP:

Abra o Claude Desktop
No menu superior, vá para "Arquivo" > "Desenvolvedor" > "Editar Configuração"
Isso abrirá o arquivo de configuração claude_desktop_config.json em seu editor de texto padrão
Por padrão, este arquivo estará vazio (você verá apenas {})
Cole o código JSON de configuração do MCP Server que você preparou no Passo 2
Verifique se a sintaxe JSON está correta (chaves e vírgulas nos lugares certos)
Salve o arquivo

Exemplo de como o arquivo deve ficar:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/SeuUsuario/Documents",
        "/Users/SeuUsuario/Projetos"
      ]
    }
  }
}

Passo 4: Reiniciar o Claude Desktop

Após salvar as configurações, é OBRIGATÓRIO reiniciar o Claude Desktop para que as alterações sejam aplicadas:

Feche completamente o aplicativo Claude Desktop
Reabra o aplicativo
O Claude Desktop vai iniciar com as novas configurações e carregará automaticamente o MCP Server configurado

Passo 5: Testar a configuração do MCP Server

Após reiniciar o Claude Desktop:

Inicie uma nova conversa com o Claude
Você verá que todos os MCPs configurados estarão disponíveis para uso
Basta escrever qualquer mensagem, e a IA identificará automaticamente que você tem o MCP Server de arquivos configurado
Agora o Claude poderá executar várias funções relacionadas a arquivos, como:
- Listar diretórios
- Ler arquivos
- Criar novos arquivos
- Modificar arquivos existentes
- E outras operações de sistema de arquivos

Experimente diferentes comandos para explorar as capacidades do MCP Server!

Recursos Adicionais

O MCP Server para sistema de arquivos oferece várias funcionalidades poderosas:

Navegação de arquivos: Permite que o Claude navegue pela estrutura de diretórios permitidos
Leitura de arquivos: O Claude pode ler o conteúdo de arquivos de texto, código, CSV, etc.
Manipulação de arquivos: É possível criar, modificar e excluir arquivos (com sua permissão)
Análise de dados: O Claude pode analisar arquivos CSV, JSON e outros formatos de dados

Dicas de Segurança

Ao configurar o MCP Server, tenha em mente algumas considerações de segurança:

Permita apenas os diretórios necessários: Limite o acesso apenas aos diretórios que você realmente precisa que o Claude acesse
Evite diretórios sensíveis: Não permita acesso a diretórios que contenham informações sensíveis ou confidenciais
Verifique as operações: Sempre verifique as operações que o Claude está realizando em seus arquivos

Solução de Problemas

Se você encontrar problemas ao configurar o MCP Server:

Verifique a sintaxe JSON: Certifique-se de que o arquivo de configuração está com a sintaxe JSON correta
Caminhos de diretório: Confirme se os caminhos dos diretórios estão corretos e existem no seu sistema
Node.js instalado: Verifique se o Node.js está instalado corretamente no seu sistema
Reinicie o aplicativo: Às vezes, simplesmente reiniciar o Claude Desktop resolve problemas de conexão

Conclusão

Com o MCP Server configurado para arquivos locais, você expandiu significativamente as capacidades do Claude Desktop. Agora ele pode interagir com seus arquivos locais, tornando-o muito mais útil para tarefas que envolvem dados armazenados em seu computador.

Experimente diferentes comandos e veja como o Claude pode ajudá-lo a analisar, organizar e trabalhar com seus arquivos locais de forma inteligente!

Você configurou com sucesso o MCP Server para arquivos locais no Claude Desktop? Compartilhe sua experiência nos comentários abaixo!

Contextual Conversation Worker

Weverton Souza — Sun, 14 Apr 2024 23:28:58 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

I created a conversational AI chatbot that uses Cloudflare Workers and KV storage to provide users with a persistent, intelligent conversational experience. By leveraging the power of Cloudflare's distributed network and serverless execution environment, the chatbot is highly available and responsive, ensuring a seamless interaction for users.

Demo

Experience the AI chatbot in action here: Deployed Chatbot

My Code

Explore the code repository here:
https://github.com/tom-log/contextual-conversation-worker

Journey

During the development process, I delved into the capabilities of Cloudflare Workers and AI models. I decided to focus on creating a chatbot that could store the context of a conversation, which introduced me to the use of Cloudflare KV storage system.

The documentation provided by Cloudflare was instrumental in helping me understand how to integrate AI models with serverless functions. Throughout this project, I improved my understanding of asynchronous JavaScript and how to interact with external APIs in a serverless environment.

What I'm particularly proud of is the chatbot's ability to maintain a conversation thread, which makes the interaction feel more natural and engaging.

Multiple Models and/or Triple Task Types

For this project, I focused on a single task type, which is conversational AI. The model used was @cf/meta/llama-2-7b-chat-int8 for generating chatbot responses based on the conversation context stored in Cloudflare KV.

If you'd like to share insights or pose any queries, the comments section awaits your valued input!

Como configurar o n8n localmente com docker compose

Weverton Souza — Thu, 05 Oct 2023 18:21:03 +0000

Clonar repositório n8n e configuração

git clone https://github.com/n8n-io/n8n-docker-caddy.git

cd n8n-docker-caddy
docker volume create caddy_data
sudo docker volume create n8n_data

Editar arquivos de configuração

nano .env

# Replace <directory-path> with the path where you created folders earlier
DATA_FOLDER=/home/weverton/Projetos/n8n-local2/n8n-docker-caddy

# The top level domain to serve from, this should be the same as the subdomain you created above
DOMAIN_NAME=localhost

# The subdomain to serve from
SUBDOMAIN=

# DOMAIN_NAME and SUBDOMAIN combined decide where n8n will be reachable from
# above example would result in: https://n8n.example.com

# Optional timezone to set which gets used by Cron-Node by default
# If not set New York time will be used
GENERIC_TIMEZONE=Europe/Berlin

# The email address to use for the SSL certificate creation
SSL_EMAIL=example@example.com

nano docker-compose.yml

version: "3.7"

services:
  caddy:
    image: caddy:latest
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - caddy_data:/data
      - ${DATA_FOLDER}/caddy_config:/config
      - ${DATA_FOLDER}/caddy_config/Caddyfile:/etc/caddy/Caddyfile

  n8n:
    image: docker.n8n.io/n8nio/n8n
    restart: always
    ports:
      - 5678:5678
    environment:
      - N8N_HOST=${SUBDOMAIN}.${DOMAIN_NAME}
      - N8N_PORT=5678
      - N8N_PROTOCOL=http
      - NODE_ENV=production
      - WEBHOOK_URL=http://localhost/
      - GENERIC_TIMEZONE=${GENERIC_TIMEZONE}
    volumes:
      - n8n_data:/home/node/.n8n
      - ${DATA_FOLDER}/local_files:/files

volumes:
  caddy_data:
    external: true
  n8n_data:
    external: true

nano caddy_config/Caddyfile

localhost {
    reverse_proxy n8n:5678 {
      flush_interval -1
    }
}

Configuração de pasta

export DATA_FOLDER=/root/n8n-docker-caddy
mkdir -p /root/n8n-docker-caddy/.n8n
chown -R 1000:1000 /root/n8n-docker-caddy/.n8n

Iniciar o Docker

docker compose up -d

tutorial em vídeo: https://youtu.be/fEP2r_V4Ehc?si=P46mNH-Jia61Drw8

Introdução ao CSS: Básico

Weverton Souza — Fri, 23 Dec 2022 19:46:47 +0000

O CSS é uma linguagem de estilo que é usada para definir como os elementos HTML são exibidos na página web. A sintaxe do CSS consiste em um seletor, seguido por um bloco de declaração. O seletor é usado para especificar qual elemento HTML deve receber o estilo e o bloco de declaração contém uma ou mais declarações que definem o estilo para o seletor. Por exemplo, se quisermos aplicar um estilo de fonte vermelha a todos os parágrafos em uma página web, nós usaríamos o seletor "p" e o bloco de declaração conteria a declaração "color: red". Isso faria com que todos os parágrafos na página ficassem vermelhos.

Aqui está um exemplo:

p {
  color: red;
}

O CSS oferece diversas maneiras de organizar e agrupar estilos. Uma dessas maneiras é usando seletores de classe e ID. Os seletores de classe permitem que você aplique estilos a elementos HTML que pertencem a uma determinada classe, enquanto os seletores ID permitem aplicar estilos a um elemento HTML específico.

Para aplicar o estilo apenas a elementos HTML que tenham a classe "highlight", você poderia usar o seletor .highlight:

.highlight {
  color: red;
}

Este código irá aplicar a cor vermelha apenas a elementos HTML que tenham a classe "highlight".

Você também pode usar um seletor de ID para aplicar o estilo apenas a um elemento HTML específico que tenha o ID especificado. Por exemplo, para aplicar o estilo apenas a um elemento HTML com o ID "header", você poderia usar o seletor #header:

#header {
  color: red;
}

Este código irá aplicar a cor vermelha apenas ao elemento HTML com o ID "header".

Agora para usar as classes ou ID, deve ser aplicada a qualquer elemento HTML usando o atributo class ou ID. Aqui está um exemplo de como usar a classe em um elemento HTML:

<p class="highlight">Texto em vermelho</p>

Para ID:

<p id="highlight">Texto em vermelho</p>

Para usar seletores aninhados, você precisará de elementos "pai" e "filho" correspondentes no HTML. Por exemplo, aqui está como o código HTML para uma div com a classe "container" que contém um parágrafo poderia ser:

<div class="container">
  <p>Este é um parágrafo dentro de um elemento div com a classe "container".</p>
</div>

E finalmente, aqui está como o código HTML para um link poderia ser:

<a href="#">Este é um link.</a>

Agora falando sobre cores no CSS, podemos declarar de 3 formas:

p { 
  color: blue; /* cor azul */
}

button {
  color: #ff0000; /* hexadecimal */
}

div {
  color: rgb(0, 255, 0); /* RGB */
}

Esse trecho de código CSS contém três declarações que aplicam a cor a elementos HTML diferentes.

A primeira declaração, "p { color: blue; }", aplica a cor azul a todos os elementos p (parágrafos) na página. A cor é especificada usando o nome da cor, "blue", que é um dos nomes de cores predefinidos pelo CSS.

A segunda declaração, "button { color: #ff0000; }", aplica a cor vermelha a todos os elementos button (botões) na página. A cor é especificada usando um código hexadecimal, que é uma representação numérica da cor. Os códigos hexadecimais começam com um símbolo de hashtag (#) e são seguidos por três pares de dígitos hexadecimais que representam os valores de vermelho, verde e azul (RGB) da cor.

A terceira declaração, "div { color: rgb(0, 255, 0); }", aplica a cor verde a todos os elementos div (divisões). A cor é especificada usando uma combinação de valores RGB (vermelho, verde e azul), que são usados para representar cores na web. O valor RGB (0, 255, 0) representa a cor verde.

Sobre Margin, Padding e Bordas

No CSS, as margens, o padding e as bordas são propriedades usadas para controlar o espaçamento e a aparência dos elementos HTML.

As margens são o espaçamento externo em volta de um elemento, ou seja, o espaço entre o elemento e os elementos adjacentes. Elas podem ser controladas usando as propriedades margin-top, margin-right, margin-bottom e margin-left.

O padding é o espaçamento interno em volta do conteúdo de um elemento, ou seja, o espaço entre o conteúdo e a borda do elemento. Ele pode ser controlado usando as propriedades padding-top, padding-right, padding-bottom e padding-left.

As bordas são linhas que circundam um elemento e podem ser controladas usando as propriedades border-width, border-style e border-color.

Essas propriedades permitem controlar o espaçamento e a aparência dos elementos de forma precisa e criar layouts mais atraentes e intuitivos.

/* Definindo margens */
p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* Definindo padding */
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

/* Definindo bordas */
button {
  border-width: 2px;
  border-style: solid;
  border-color: blue;
}

Neste exemplo, as margens são definidas para um elemento p (parágrafo). A margem superior é definida como 10 pixels, a margem direita é definida como 20 pixels, a margem inferior é definida como 30 pixels e a margem esquerda é definida como 40 pixels. Isso cria um espaçamento externo em volta do elemento p.

No segundo exemplo, o padding é definido para um elemento div (divisão). O padding superior é definido como 10 pixels, o padding direito é definido como 20 pixels, o padding inferior é definido como 30 pixels e o padding esquerdo é definido como 40 pixels. Isso cria um espaçamento interno em volta do conteúdo do elemento div.

No terceiro exemplo, as bordas são definidas para um elemento button (botão). A largura da borda é definida como 2 pixels, o estilo da borda é definido como "solid" (sólido) e a cor da borda é definida como azul. Isso cria uma borda azul sólida em volta do elemento button.

Posicionando elementos na página

No CSS, existem várias maneiras de controlar a posição de um elemento na página. As principais propriedades de posicionamento são:

position: define se um elemento é posicionado de forma estática (o padrão), relativa, absoluta ou fixa.
top, right, bottom, left: usadas para posicionar um elemento em relação ao seu elemento pai, se a propriedade position for definida como relativa, absoluta ou fixa.
float:
faz com que um elemento flutue à esquerda ou à direita, permitindo que outros elementos ocorram ao seu redor.
display: define como um elemento é exibido, por exemplo, como um bloco, uma linha ou uma tabela.

Aqui estão alguns exemplos de código que mostram como usar as propriedades de posicionamento:

/* Posicionamento relativo */
p {
  position: relative;
  top: 20px;
  left: 30px;
}

/* Posicionamento absoluto */
div {
  position: absolute;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
}

/* Flutuação à esquerda */
img {
  float: left;
}

/* Exibição como bloco */
button {
  display: block;
}

Neste exemplo, a propriedade position é definida como relativa para um elemento p (parágrafo). Isso significa que o elemento é posicionado de forma relativa ao seu posicionamento normal, ou seja, ele é deslocado 20 pixels para cima e 30 pixels para a esquerda em relação ao seu posicionamento normal.

No segundo exemplo, a propriedade position é definida como absoluta para um elemento div (divisão). Isso significa que o elemento é posicionado de forma absoluta em relação ao elemento pai, ou seja, ele é posicionado 10 pixels a partir do topo, 20 pixels a partir da direita, 30 pixels a partir da parte inferior e 40 pixels a partir da esquerda do elemento pai.

No terceiro exemplo, a propriedade float é definida como left para um elemento img (imagem). Isso faz com que a imagem flutue à esquerda, permitindo que outros elementos ocorram ao seu redor.

No quarto exemplo, a propriedade display é definida como block para um elemento button (botão). Isso faz com que o botão seja exibido como um bloco, ocupando toda a largura disponível.

Se você acha que minha ajuda foi útil, por favor, considere me ajudar com um valor simbólico. Qualquer valor será muito apreciado e me ajudará a continuar oferecendo ajuda, e-mail pix : sec-code@proton.me

Se isso te ajudou de alguma forma, me ajude a tomar um café