Os Aplicativos MCP Estão Mudando a Internet. Veja Como Construir Um! (Skybridge)
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
스크립트
00:00:00Há uma enorme mudança de paradigma acontecendo na indústria por causa da IA.
00:00:04Cada vez mais usuários estão usando chatbots hoje em dia para suas buscas ou pesquisas rotineiras,
00:00:10e é por isso que o conceito de aplicativos MCP está se tornando cada vez mais popular.
00:00:14Em vez de cuspir um arquivo JSON ou um documento markdown,
00:00:18mais aplicativos e serviços estão migrando para o fornecimento desses widgets interativos e úteis dentro de um chatbot.
00:00:24E a empresa Alpic lançou recentemente um novo framework bacana chamado SkyBridge
00:00:29que torna super fácil criar seus próprios aplicativos MCP personalizados para todo tipo de caso de uso.
00:00:35Então, no vídeo de hoje, vamos dar uma olhada no SkyBridge, ver como ele funciona e testá-lo nós mesmos.
00:00:41Vai ser muito divertido, então vamos nessa.
00:00:47Para entender de verdade por que o SkyBridge é algo tão importante, você precisa entender como esses novos aplicativos funcionam.
00:00:53Quando você cria um aplicativo web tradicional, você o está construindo para um usuário, o humano.
00:00:58Mas com um aplicativo MCP, você está na verdade construindo para dois usuários ao mesmo tempo, o humano e o assistente de IA,
00:01:05porque ambos compartilham exatamente a mesma interface.
00:01:08O humano pode clicar em botões, digitar entradas e mover controles deslizantes, e o LLM vê instantaneamente esse estado.
00:01:15E, por outro lado, o LLM pode atualizar os dados em segundo plano,
00:01:18e a interface do usuário muda em tempo real bem na sua frente.
00:01:21E o SkyBridge é um framework TypeScript de código aberto para isso que lida com toda a infraestrutura complexa,
00:01:26a ponte de protocolos, a sincronização de estado e as regras de segurança,
00:01:30para que você possa apenas se concentrar em escrever código React padrão.
00:01:34Agora, se você já tentou criar aplicativos MCP para o ChatGPT ou Claude antes,
00:01:39você sabe que o ciclo de testes locais costumava ser uma grande dor de cabeça.
00:01:43Você tinha que configurar manualmente túneis públicos, copiar e colar configurações
00:01:47e reiniciar suas sessões de chat apenas para corrigir um pequeno erro de digitação no CSS.
00:01:52Mas a parte mais legal do SkyBridge 1.0 é que ele redesenhou completamente o painel de controle de DevTools.
00:01:59Agora, quando você executa seu servidor de desenvolvimento local, ele inicia um painel de emulador no seu navegador.
00:02:04E dentro deste painel, você tem três ferramentas legais.
00:02:08A primeira é o Alpik Playground,
00:02:11um ambiente de testes local onde você pode testar suas ferramentas e ajustar seus widgets React usando substituição dinâmica de módulos em tempo real.
00:02:17E você pode ver as alterações instantaneamente sem tocar em um LLM real ainda.
00:02:21E segundo, há um túnel integrado,
00:02:24que permite que você, literalmente com um único clique, exponha seu servidor local através de um URL público seguro.
00:02:30Assim, você não precisa mais perder tempo com tunelamento externo.
00:02:33Basta colar este URL nas configurações de desenvolvedor do ChatGPT e você estará no ar.
00:02:37E a terceira é a ferramenta Beacon Audit.
00:02:40E esta é uma salvação se você planeja enviar seus aplicativos para lojas públicas.
00:02:44Ela examina os metadados, ferramentas e políticas de segurança do seu aplicativo para detectar gatilhos comuns de rejeição
00:02:49antes de você enviar seu aplicativo para revisão.
00:02:52E o mais legal é que, mesmo que você nunca tenha construído um aplicativo MCP,
00:02:56você pode facilmente instalar a skill do SkyBridge no seu agente de IA favorito para começar instantaneamente.
00:03:02Então agora vamos tentar construir um pequeno aplicativo MCP por conta própria e ver como ele funciona.
00:03:07Então, para esta demonstração, fui em frente e criei este pequeno site de comércio eletrônico
00:03:11onde você pode comprar diferentes lentes de câmera.
00:03:14E é basicamente uma loja baseada em React totalmente construída, com um carrinho e funcionalidade de finalização de compra.
00:03:19E agora quero adicionar um aplicativo MCP para ele.
00:03:22Para que, se um cliente em potencial usar um chatbot como o ChatGPT ou Claude para procurar recomendações de lentes de câmera,
00:03:30ele chame imediatamente nosso aplicativo MCP para mostrar nossas listagens de produtos para o usuário final.
00:03:36Então, como eu disse antes, a maneira mais fácil de começar é simplesmente instalar a skill do SkyBridge.
00:03:42E podemos instalá-la globalmente ou apenas para o nosso repositório específico.
00:03:46E para fins desta demonstração, vou em frente e instalá-la no repositório.
00:03:51E agora você pode ver que temos este diretório .agents com a skill do SkyBridge presente.
00:03:57E tudo o que preciso fazer agora é pedir ao Claude para construir um aplicativo MCP para a minha loja de e-commerce.
00:04:04E antes de construí-lo, o Claude primeiro me fará algumas perguntas adicionais sobre o intuito do aplicativo
00:04:09para entender melhor que tipo de funcionalidade precisamos incluir nele.
00:04:13E para esta demonstração, quero um aplicativo que liste lentes com base no que o usuário está procurando.
00:04:18E então podemos selecioná-las e compará-las lado a lado, além de adicioná-las ao nosso carrinho
00:04:24e fornecer uma solução rápida de finalização de compra para nossos clientes.
00:04:28E isso é basicamente tudo o que preciso fazer.
00:04:29E agora eu apenas deixo o Claude fazer o seu trabalho.
00:04:32E em cerca de alguns minutos, vemos que o Claude gerou nosso aplicativo MCP.
00:04:37E a parte mais legal é que agora podemos abrir o painel de desenvolvedor fornecido pelo SkyBridge
00:04:41e testá-lo nós mesmos.
00:04:44Então agora, se abrirmos o painel, podemos ver como ele se parece.
00:04:47E aqui temos nossa ferramenta de busca de lentes e a ferramenta de fazer pedido.
00:04:53Então, primeiro de tudo, para buscar lentes, vou apenas inserir o preço máximo para as lentes que estou procurando.
00:05:00E vamos limitar a umas cinco lentes, talvez.
00:05:03E aí está.
00:05:04Ele encontrou 14 correspondências que custam menos de 2.000 dólares.
00:05:09Aqui é como o aplicativo se parece no desktop.
00:05:12Também podemos visualizar a versão para celular.
00:05:14Parece bom.
00:05:15Também temos um modo escuro e um modo claro.
00:05:18E aqui temos a saída da ferramenta e o estado.
00:05:23E veja o que acontece se eu selecionar algumas das lentes.
00:05:26Como você pode ver, o estado é atualizado instantaneamente, o que é super legal.
00:05:31Então agora vamos escolher três lentes.
00:05:34E agora, se clicarmos em comparar, vamos para a tela de comparação.
00:05:40E aqui podemos ver todas as nossas três lentes lado a lado com todos os parâmetros.
00:05:45E se estivermos satisfeitos com essa seleção, também podemos ir para o checkout.
00:05:49E isso vai para a etapa de checkout, onde podemos inserir nosso nome completo, e-mail e endereço de entrega e fazer nosso pedido.
00:05:59Então, como você pode ver, este painel é muito legal para testar seus widgets para ver se tudo está funcionando como esperado.
00:06:08E agora, se formos ao Claude, e em configurações, temos esta seção chamada conectores.
00:06:16E temos que clicar em personalizar.
00:06:19E para isso, você precisará do URL do túnel.
00:06:21Portanto, certifique-se de ter ativado o túnel.
00:06:24E podemos apenas copiar este URL.
00:06:26E na seção de conectores, você só precisa adicionar um conector personalizado.
00:06:31Dê um nome.
00:06:33E cole esse URL do túnel.
00:06:38E clique em adicionar.
00:06:39Eu já o adicionei aqui.
00:06:41E a última coisa que você precisa fazer é clicar em conectar.
00:06:45E você também pode definir as permissões se quiser que essas ferramentas sejam executadas automaticamente ou se quiser aprovação do usuário.
00:06:53E então podemos simplesmente ir em frente e iniciar um novo chat.
00:06:57E no novo chat, agora posso perguntar: me dê algumas recomendações para as melhores lentes abaixo de 2.000 dólares para fotografia de retrato.
00:07:05E agora podemos ver que ele diz que vai pesquisar no catálogo da loja de lentes por ótimas opções de retrato abaixo de 2.000 dólares.
00:07:12E olha só.
00:07:14Ele abriu nosso aplicativo MCP.
00:07:16Quão legal é isso?
00:07:18E podemos fazer as mesmas coisas por aqui.
00:07:20Podemos selecionar algumas das lentes por aqui.
00:07:24E depois ir para a seção de comparação.
00:07:27E ele tem esta pequena tabela de comparação.
00:07:32A única coisa que notei é que temos este espaço em branco do estado anterior da nossa ferramenta.
00:07:40Portanto, isso é provavelmente algo que você pode consertar no CSS.
00:07:43Mas tudo está com uma ótima aparência.
00:07:46E também temos a opção de finalizar a compra.
00:07:49E vamos para a seção de checkout, onde podemos fazer o nosso pedido.
00:07:54Então, quão legal é isso?
00:07:57E por último, e mais importante, para ver se o seu aplicativo está pronto para ser publicado nas lojas de aplicativos públicas,
00:08:02também podemos executar uma auditoria do nosso aplicativo através do painel de desenvolvedor e verificar se temos algum problema com ele.
00:08:10E basicamente, é isso.
00:08:11Em apenas alguns minutos, conseguimos construir um aplicativo MCP pronto para produção com o SkyBridge.
00:08:16Que poderíamos teoricamente enviar para a App Store de IA.
00:08:20Então espero que isso mostre o quão fácil é começar a usar o SkyBridge.
00:08:25E, sinceramente, parece o futuro da web moderna.
00:08:28Acho que começaremos a ver mais e mais desses aplicativos de widgets MCP interativos dentro dos nossos chatbots.
00:08:34Portanto, é legal que existam frameworks como o SkyBridge por aí que estão tornando o processo de criação desse tipo de aplicativo muito mais fácil para nós, desenvolvedores.
00:08:42Então aí está, pessoal.
00:08:44Isso é o SkyBridge em poucas palavras.
00:08:46Então, o que você acha do SkyBridge?
00:08:47Você já experimentou?
00:08:48Você vai usá-lo?
00:08:49Deixe-nos saber na seção de comentários abaixo.
00:08:52E pessoal, se vocês gostam desse tipo de análise técnica, por favor, me avistem esmagando aquele botão de like embaixo do vídeo.
00:08:58E também, não se esqueçam de se inscrever no nosso canal.
00:09:01Este foi o Andrus da BetterStack, e vejo vocês nos próximos vídeos.
00:09:16você