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 formatohttps://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 emagente
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:3000
Você 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.