Aprendizagem pessoal com IA
e orientação prática
Espelho de desenho CyberKnife

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.

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


 

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.

CDN1
Não pode ser reproduzido sem permissão:Chefe do Círculo de Compartilhamento de IA " Open MCP Client: cliente MCP baseado na Web para se conectar rapidamente a qualquer serviço MCP.

Chefe do Círculo de Compartilhamento de IA

O Chief AI Sharing Circle se concentra no aprendizado de IA, fornecendo conteúdo abrangente de aprendizado de IA, ferramentas de IA e orientação prática. Nosso objetivo é ajudar os usuários a dominar a tecnologia de IA e explorar juntos o potencial ilimitado da IA por meio de conteúdo de alta qualidade e compartilhamento de experiências práticas. Seja você um iniciante em IA ou um especialista sênior, este é o lugar ideal para adquirir conhecimento, aprimorar suas habilidades e realizar inovações.

Entre em contato conosco
pt_BRPortuguês do Brasil