Open MCP Client: cliente MCP baseado na Web para se conectar rapidamente a qualquer serviço MCP.

Introdução geral

Aberto MCP Client é uma ferramenta de código aberto, cujo destaque é o fato de fornecer um cliente MCP (Model Context Protocol) baseado na Web que permite que os usuários se conectem a qualquer servidor MCP para conversar sem precisar instalá-lo. Ele também suporta a incorporação da funcionalidade de bate-papo em seus próprios aplicativos. Desenvolvido pela equipe do CopilotKit, ele combina os recursos do LangChain LangGraph O projeto é implantado na plataforma Vercel, o código está hospedado no GitHub e foi atualizado pela última vez em 10 de março de 2025. Quer seja um servidor de teste rápido ou o desenvolvimento de interações de IA personalizadas, essa ferramenta é simples e útil, especialmente para usuários e desenvolvedores que gostam de uma experiência conveniente.

Lista de funções

• Fornece um cliente MCP baseado na Web para se conectar diretamente a qualquer servidor MCP e conversar em tempo real.
• Não é necessária nenhuma instalação e a versão web da função pode ser usada por meio do navegador.
• Suporte para integrar a função de bate-papo no próprio aplicativo do usuário.
• Use a tecnologia LangGraph para criar agentes inteligentes que se conectam a ferramentas de servidor.
• O código-fonte aberto está hospedado no GitHub e permite a visualização e a modificação.
• O front-end é baseado no CopilotKit, garantindo que a interface e o estado sejam sincronizados.

Usando a Ajuda

Como começar a usar o Open MCP Client

Há duas maneiras de usar o Open MCP Client: por meio de uma experiência rápida com o MCP Client baseado na Web ou implantando-o localmente e integrando-o ao seu aplicativo. Abaixo estão as etapas detalhadas para ajudá-lo a começar.

1. usando o cliente MCP baseado na Web

A versão web é o principal recurso do Open MCP Client e é adequada para conexão rápida com servidores MCP sem nenhuma instalação.

• Etapa 1: Visite a versão da Web
  Abra seu navegador e digite o endereço:open-mcp-client.vercel.app. Esta é a versão oficial da Web do cliente MCP implantado pela equipe do CopilotKit no Vercel, pronto para uso.
• Etapa 2: Obter o URL do servidor MCP
  Você precisará de um URL válido do servidor MCP, que pode ser acessado por meio do Composição e outras plataformas para obtê-lo. Faça login no site do Composio, crie ou selecione um servidor MCP e copie seu URL (geralmente no formato https://example.com/mcp).
• Etapa 3: Conectar-se ao servidor
  Na versão Web da interface, localize a caixa de entrada de URL (geralmente em uma posição de destaque na página) e cole o URL do servidor MCP que você copiou; clique no botão "Connect" (Conectar) e o sistema tentará estabelecer uma conexão. Se a conexão for bem-sucedida, a tela de bate-papo será carregada em alguns segundos.
• Etapa 4: Inicie o bate-papo
  Depois de conectado, digite uma mensagem na caixa de entrada, como "What's the weather like today?" (Como está o tempo hoje?) ou "Help me write code" (Ajude-me a escrever código) e envie-a. ou "Write code for me" e, em seguida, envie-a. O servidor retornará a resposta em tempo real, e a interface exibirá o conteúdo do diálogo, a operação é simples e intuitiva.

2. implementação e integração locais

Se precisar executá-lo localmente ou integrar a funcionalidade ao seu projeto, siga as etapas de desenvolvimento abaixo.

• Etapa 1: clonar o repositório do GitHub
  Execute o seguinte comando no terminal para fazer o download do projeto localmente:

git clone https://github.com/CopilotKit/open-mcp-client.git

Em seguida, vá para o diretório do projeto:

cd open-mcp-client

• Etapa 2: Configurar as variáveis de ambiente do diretório raiz
  No diretório raiz do projeto, crie o arquivo .env Documentação:

toque em .env

Abra o arquivo e adicione o seguinte (substituindo-o por sua chave de API real):

LANGSMITH_API_KEY=lsv2_...

Essa chave é usada para se conectar ao serviço LangSmith e pode ser obtida registrando-se no site do LangSmith.

• Etapa 3: Configurar as variáveis de ambiente do agente
  entrar em agente Pasta:

cd agent
toque em .env

existir agente/.env é adicionado:

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY é obtido no site da OpenAI e é usado para dar suporte à função de agente LangGraph.

• Etapa 4: Instalar dependências
  Retorne ao diretório raiz e execute:

npm install

ou use o pnpm (recomendado):

instalação do pnpm

Instale dependências como o CopilotKit e o LangGraph. Certifique-se de que o Node.js esteja instalado localmente (versão recomendada 18 ou superior).

• Etapa 5: Ativar o modo de desenvolvimento
  O projeto é dividido em front-end (/app) e agentes (/agente) duas partes, é recomendável colocá-las em dois terminais separados:
• Terminal 1 (extremidade frontal):

  pnpm run dev-frontend
  

• Terminal 2 (Agente):

  pnpm run dev-agent
  

ou iniciar ambos com um único comando:

pnpm run dev

Após a inicialização, acesse o http://localhost:3000Você pode ver a interface local.

• Etapa 6: Teste a conexão e o bate-papo
  Digite o URL do servidor MCP na interface local (da mesma forma que na versão da Web) e clique em Connect (Conectar). Após a conexão bem-sucedida, você pode inserir uma mensagem para testar a função de bate-papo.
• Etapa 7: Integração ao seu aplicativo
  O código de front-end está no diretório /app usando a interface de gerenciamento do CopilotKit e a sincronização de status. O código do agente está na pasta /agente para se conectar ao servidor com base no LangGraph. Você pode reutilizar esse código ou consultar o README.md do GitHub para modificar a integração.

Operação detalhada das principais funções

• Cliente MCP baseado na Web
  A versão da Web é o melhor recurso, basta inserir a URL para se conectar. Quando a conexão falhar, verifique se o URL está correto ou se o servidor está on-line. A interface é orientada pelo CopilotKit para uma operação suave.
• Bate-papo ao vivo
  A interface de bate-papo suporta entrada e exibição de respostas em tempo real, tanto na versão da Web quanto na local. Depois de enviar uma mensagem, o agente LangGraph processa a solicitação e invoca as ferramentas do servidor, e os resultados são exibidos automaticamente.
• Depuração e personalização
  Tempo de execução local, ferramentas de desenvolvimento de navegador disponíveis (F12) para visualizar registros e solicitações de rede. Código-fonte aberto, pode ser modificado /app no estilo do front-end, ou ajuste o /agente A lógica do proxy no

advertência

• A versão web depende da Internet, e a capacidade de resposta do servidor pode ser afetada pela Internet.
• As implementações locais exigem que a chave da API seja configurada corretamente, caso contrário, o agente não funcionará.
• O projeto é atualizado com frequência e é recomendável usar regularmente o git pull Obtenha a versão mais recente.

Ao seguir essas etapas, você pode aproveitar ao máximo a conveniência do MCP baseado na Web ou desenvolver integrações mais profundas.