스크립트
00:00:00Obrigado a todos por virem. Hoje vou falar sobre um dos softwares mais estranhos
00:00:18que já escrevi. Está meio que no limite de muitas das coisas que tenho trazido
00:00:22para o mundo. Então, junte-se a mim, se quiser. Vamos tentar ter a abordagem mais sensata
00:00:27para algo muito estranho que os agentes no MCP e outras coisas tornaram possível. E para começar,
00:00:34quero falar sobre os aplicativos MCP. Não sei se algum de vocês pôde participar de alguma das outras
00:00:38palestras mais cedo hoje, talvez aquela que o Ido e a Liat deram há cerca de uma hora. Só para eu ver
00:00:44quem levantou a mão, familiaridade com aplicativos MCP. Ok, este é provavelmente o melhor público para quem já dei esta palestra,
00:00:52na verdade. Então isso é fantástico. Para aqueles que não levantaram a mão, os aplicativos MCP são uma
00:00:57extensão do protocolo MCP que foi introduzida, creio eu, em janeiro deste ano. E a ideia é,
00:01:02este é um ciclo típico de solicitação e resposta para uma ferramenta MCP. O usuário faz uma solicitação ao agente. O
00:01:10agente por sua vez decide usar uma ferramenta MCP hospedada em um servidor MCP. O resultado da ferramenta retorna
00:01:16para o contexto do agente. E o agente escolhe formular alguma resposta e enviá-la ao usuário. E então,
00:01:23fundamentalmente, os servidores MCP são maneiras fantásticas de adicionar funções e lógica de negócios aos seus agentes,
00:01:28mas nunca há uma conexão direta entre o usuário e o servidor MCP. Isso sempre passa pelo cérebro do
00:01:34agente e, mais importante, pela janela de contexto do agente. Portanto, os aplicativos MCP são uma extensão disso,
00:01:40o que nos permite realmente contornar o agente. E em vez disso, o que acontece é o seguinte:
00:01:44o usuário solicita algo ao agente, o agente usa uma ferramenta, mas em vez de essa solicitação de ferramenta voltar
00:01:49para o agente, ela é enviada para o usuário. E é enviada como HTML, CSS, JavaScript. É uma interface completa.
00:01:55E pode ser o que você quiser que seja. E então, a ideia é que você tem essa maneira de fazer, de basicamente colocar
00:02:01a internet no seu agente, por assim dizer. Você pode fornecer qualquer interface de usuário útil e personalizada da sua marca que quiser. Você pode
00:02:08permitir que o usuário tenha qualquer experiência interativa que desejar. E então o usuário, como você pode ver no
00:02:12diagrama, o usuário agora pode interagir com o aplicativo. Eles podem usar as ferramentas. Eles podem enviar
00:02:17informações de volta para um backend hospedado nesse aplicativo e realmente ter uma experiência completa. Então, você pode imaginar
00:02:21reservar uma mesa em um restaurante, ou mudar seu assento em um avião, ou interagir com uma programação.
00:02:28Para engenheiros de IA, há muitas coisas que você pode fazer como usuário agora, onde o agente facilitou,
00:02:33mas você vai interagir como um ser humano. E há uma extensão chegando agora. Isso vai
00:02:37ser lançado no lançamento do MCP de julho, onde o agente também poderá interagir com o aplicativo. E isso
00:02:43vai preparar alguns casos de uso muito interessantes sobre os quais não vamos falar hoje, mas você poderia
00:02:47hipoteticamente jogar uma partida de xadrez contra o agente agora em um aplicativo visual onde você faz uma jogada,
00:02:52e então o agente interage com o aplicativo também. E então, acho que isso vai abrir um mundo totalmente novo
00:02:55de possibilidades. Agora, alguns de vocês talvez conheçam um framework do qual sou autor e que minha empresa
00:03:03mantém chamado FastMCP. O FastMCP é uma das maneiras mais populares de construir servidores MCP. E então, sempre que coisas novas
00:03:09e legais chegam ao mundo do MCP, a primeira coisa que me perguntei é: como posso entregar isso aos nossos usuários?
00:03:16E uma das coisas mais importantes que tenho para compartilhar com vocês sobre nossa base de usuários é que eles são
00:03:20principalmente engenheiros Python. E então, e então, isso é um pouco problemático quando queremos entregar
00:03:27interfaces e UIs, porque como vamos realmente fazer isso? E este é o momento da palestra
00:03:31em que revelo que não me lembro exatamente qual é o próximo slide, então vamos dar uma olhada nele.
00:03:35Não, vamos voltar. Temos um desafio agora. Como vamos fazer com que os engenheiros Python criem
00:03:42interfaces que sigam as melhores práticas, que sejam interativas, bonitas e úteis, sem
00:03:50fingir que vamos fazer algo bobo, algo que já foi tentado, e enfiar todo o
00:03:54front-end, todo o ecossistema, tudo dentro do Python em algum tipo de sistema esquisito, comprometido,
00:04:00aleatório e Franksteiniano. E eu realmente lutei com isso. Eu preciso,
00:04:04eu realmente preciso, sinto a obrigação de encontrar uma maneira de entregar isso. Mas não posso, não posso fingir que
00:04:10vamos rodar React em Python. Isso não vai funcionar. E então, pensamos bastante sobre quem são
00:04:15nossos usuários no ecossistema FastMCP? Quem são esses desenvolvedores Python que tendem a estar em empresas?
00:04:20O que eles estão fazendo e para que precisam dessas UIs? Para que precisam desses aplicativos MCP?
00:04:25O que eles não precisam são de UIs personalizadas voltadas para o consumidor com marcas completas. Não é isso que esse pessoal está fazendo. O que eles são principalmente
00:04:34encarregados de fazer é compartilhar informações por toda a sua organização, coletar
00:04:38informações por toda a sua organização. E isso mudou a natureza do que esperamos que eles façam
00:04:43dentro do framework de aplicativos MCP. E essa restrição se tornou muito útil. Portanto, fundamentalmente, esperamos que
00:04:48eles façam coisas como criar tabelas, coletar informações por meio de formulários,
00:04:53e que queiram compartilhar gráficos. E assim, fundamentalmente, com essa restrição,
00:04:58podemos introduzir um pedaço de software que tornamos open-source há alguns meses e que tem sido surpreendentemente
00:05:03popular entre esse público chamado Prefab. E é um framework de construção de UI com escopo definido com o propósito de
00:05:11entregar interfaces através de um agente para os fins que mencionei há pouco. Então, este é um cartão
00:05:17de boas-vindas (“hello world”). Você pode ver isso em qualquer framework de front-end. Literalmente qualquer um.
00:05:22Ele terá algo parecido com isto, está no site deles, você digita seu nome e ele é atualizado ao vivo.
00:05:27Mas, claro, a coisa estranha sobre este é que o código que o gerou é inteiramente escrito
00:05:31em Python. E então, espero que você esteja sentindo o que eu sinto quando olho para isso, que é uma combinação muito estranha
00:05:38de, tipo, sim, isso é legal e isso me assusta pra caramba. O
00:05:44sim, isso é legal
00:05:48 vem do fato de que acho que há algo nesse código, mesmo que você não consiga ver de perto, posso
00:05:52torná-lo um pouco maior, há algo nisso que, tipo, faz sentido. Você pode ver a
00:05:58estrutura da UI no código, mas também há algo nele que é obviamente alienígena e um pouco
00:06:04esquisito. E chegamos a essa conclusão quando você sente isso, quando você olha para ele, que é
00:06:09quando você compõe um front-end em Python, ele realmente começa a parecer bom, desde que limitemos o
00:06:15desafio da maneira certa. Não estamos tentando construir um front-end do zero. Estamos tentando compor um front-end
00:06:20a partir de um monte de componentes de classe mundial e bem desenhados. E é assim que mantemos os limites,
00:06:24e é assim que mantemos o usuário em mente. O usuário aqui não está tentando fazer algo arbitrário.
00:06:29Eles estão tentando pegar um front-end bem estruturado e colocá-lo na frente de quem quer que o estejam entregando.
00:06:34Então aqui está um tour rápido por esse DSL. Principalmente, estamos usando gerenciadores de contexto. Para
00:06:39aqueles de vocês que conhecem o FastMCP, sabem que, indiscutivelmente, vocês poderiam reduzir o FastMCP e dizer,
00:06:44a inovação central do FastMCP é que usamos um decorador Python para construir um servidor MCP inteiro.
00:06:48Então, se você quiser adotar a mesma abordagem redutiva para o prefab, você poderia dizer: usamos um gerenciador de contexto para
00:06:55construir uma UI inteira. E ao aninhar componentes como gerenciadores de contexto, como você vê aqui, estamos construindo
00:07:01exatamente a mesma estrutura na interface. Parece muito natural quando você lê. Você pode ver como as coisas
00:07:06são estruturadas. Cada elemento da interface, cada componente, que é um belo componente shadcn
00:07:11quando renderizado, como você pode ver aqui, é uma classe que você instancia. Você pode parametrizá-la. Você pode
00:07:17passar coisas como classes CSS para ela e fazê-la parecer do jeito que você quiser. E a última coisa, que não
00:07:21teremos tempo suficiente para explorar hoje, são essas variáveis reativas. Mostrarei uma demonstração
00:07:26delas em um momento. Mas, essencialmente, temos uma maneira completa de criar interatividade no lado do cliente
00:07:31e vincular dados entre componentes, o que permite construir essas experiências muito ricas, novamente,
00:07:36sem precisar entrar totalmente no mundo do JavaScript e deixar um ecossistema com o qual minha base de usuários,
00:07:42pelo menos, é extremamente familiarizada. E este é o pipeline que o prefab está essencialmente expondo.
00:07:46Usamos um DSL em Python que acabei de compartilhar com vocês. Usamos isso para construir uma representação declarativa
00:07:53de uma interface. Isso é então serializado em um protocolo JSON. E esse protocolo JSON é
00:07:59finalmente renderizado por um aplicativo React, que é hospedado como o aplicativo MCP real. E isso vai
00:08:02abrir muitas possibilidades para nós que, novamente, vou mostrar a vocês em um segundo. Mas a chave
00:08:07para tudo isso é o JSON no meio. O Python é na verdade um acidente que descobri
00:08:10depois do fato, porque era uma coisa esquisita e idiossincrática que eu queria. O objetivo disso era:
00:08:17E por ser serializável, eu posso gerá-lo a partir de um agente. Posso enviá-lo para um agente. Posso gerá-lo
00:08:22E como ele é serializável, posso gerá-lo a partir de um agente. Posso enviá-lo para um agente. Posso gerá-lo
00:08:26como humano e pedir a um agente para modificá-lo. Há um monte de coisas legais que acontecem por causa dessa
00:08:31representação intermediária em JSON. E então, quando o DSL em Python simplesmente surgiu disso e era muito
00:08:37bonito e fácil de usar, senti que tínhamos algo em mãos. Então temos essa documentação. E para
00:08:42provar o ponto, esta foi outra restrição que assumimos. Eu nem sei o que é isso. Esta é a documentação
00:08:47do componente de tabela de dados no Prefab. Acho que existem 130 ou 140 componentes que fornecemos que você
00:08:55pode compor em uma forma arbitrária. A documentação do Prefab é 100% renderizada em Prefab. Então a tabela de dados
00:09:01que está aqui no uso básico é renderizada ao vivo em Prefab. O código Python, você pode vê-lo aparecendo na
00:09:05parte inferior da tela. Esse código Python está sendo renderizado ao vivo pelo renderizador para gerá-lo.
00:09:09Se quiser, você pode pegar qualquer exemplo na documentação do Prefab, clicar em um link, colocá-los no
00:09:15playground e editar o código ao vivo, o código Python ao vivo, e você verá a UI ser atualizada. E novamente,
00:09:20faz muito mais sentido quando restringimos o problema e lembramos que estamos compondo uma interface em vez de
00:09:24construí-la. Então quero voltar ao assunto com o qual comecei, que são os servidores MCP e, mais
00:09:29especificamente, os aplicativos MCP. Vocês podem usar o Prefab para qualquer tipo de problema de front-end que tiverem.
00:09:34Minha equipe começou a usá-lo para pequenos aplicativos de dados interativos e ferramentas de exploração. Eles vêm
00:09:39construindo apresentações com ele. Nós fornecemos um tema escuro que, honestamente, se parece bastante com o que
00:09:43estou mostrando agora para criar slides e apresentações. Dá para fazer muita coisa com ele. Mas o motivo pelo qual
00:09:48o construímos, o caso de uso que ele atende, são os servidores MCP. Por isso, quero dar um rápido panorama
00:09:54de três maneiras de usá-lo, três maneiras cada vez mais sofisticadas de utilizá-lo no seu
00:09:58servidor MCP. A primeira é construir uma ferramenta interativa. Como mostrei no início da palestra,
00:10:04normalmente uma ferramenta MCP é algo que seu agente chama e o agente recebe o resultado sem que você possa
00:10:09interagir com ele de forma alguma. Então, qual é a maneira mais fácil de avançar nessa funcionalidade interativa?
00:10:14Vou mostrar aqui. Esta é uma ferramenta Fast MCP. Ela foi decorada com um decorador de ferramenta, como podem ver,
00:10:20e é apenas uma função em Python que retorna algumas informações. Lembrem-se de que essas informações irão para o
00:10:24agente, e não para o usuário. Se quisermos transformar isso em uma ferramenta totalmente interativa com o Prefab,
00:10:30faremos uma alteração. Em vez de retornar um dicionário Python no final, que iria para o agente,
00:10:36vamos retornar um componente Prefab. Nesse caso, a tabela de dados. Foi exatamente a documentação disso que
00:10:40acabei de mostrar há pouco. E quando retornamos esse componente Prefab, o Fast MCP o detectará
00:10:46automaticamente. Ele deduzirá automaticamente que você, de fato, deseja retornar um aplicativo MCP e ativará
00:10:51toda a infraestrutura para fornecer o HTML, o JavaScript, o CSS, o renderizador, tudo pronto para que o
00:10:55usuário veja uma tabela de dados. Vejam como isso funciona na prática. Usando o cliente Goose,
00:11:00que é excelente, perguntei a um servidor que continha a função que acabei de mostrar: mostre-me o diretório
00:11:06da equipe. E o que aparece — seria melhor em formato GIF, peço desculpas —, o que aparece é um componente
00:11:10de tabela de dados totalmente interativo. Ele suporta busca, filtragem, ordenação, paginação
00:11:16e tudo mais. E tudo o que é preciso é o que mostrei agora há pouco: basta retornar a classe da tabela de dados
00:11:21e tudo isso será resolvido. Podemos ir um passo além. E se, além da tabela de dados,
00:11:26quisermos exibir um gráfico de pizza bem ao lado da tabela de dados que detalha esse diretório da equipe?
00:11:30Como podem imaginar, o código é muito, muito, muito semelhante. Em vez da tabela de dados sozinha, agora vamos
00:11:35importar uma grade e um gráfico de pizza, e se olharem na parte inferior, verão que compomos tanto o
00:11:40gráfico de pizza quanto a tabela de dados em uma grade de forma muito natural com um gerenciador de contexto. Este é o
00:11:45resultado. Agora temos um gráfico de pizza ao lado da nossa tabela de dados. Isso segue um princípio que
00:11:51tentamos manter em boa parte de nossos softwares no Prefect: uma linha de código, uma grande mudança perceptível.
00:11:55Tentamos manter essa complexidade incremental, e isso atende a muitas coisas que considero realmente
00:11:59importantes em frameworks e DSLs. Rapidamente, pois não teremos tempo para aprofundar,
00:12:05este é apenas um exemplo que juntei e gravei de interatividade totalmente do lado do cliente,
00:12:09onde todos esses controles estão vinculados, as coisas são atualizadas, o texto é atualizado, os valores são atualizados,
00:12:15e nenhuma linha de JavaScript foi escrita. São apenas algumas classes compostas que possuem o mesmo
00:12:19atributo atribuído, funcionando todas juntas automaticamente.
00:12:24Ah, e eu incluí um pequeno exemplo de código de como isso se parece. Temos uma classe chamada Rx, que,
00:12:28como devem suspeitar, significa reativo. Se você usar essas variáveis reativas, poderá referenciá-las
00:12:33em qualquer lugar do seu código, formatá-las ou usá-las para definir o nome de algo, e elas serão
00:12:38compiladas automaticamente para a implementação em JavaScript correta. A segunda coisa que podemos fazer é
00:12:43um aplicativo FastMCP. Se uma ferramenta interativa é algo pontual — aqui está uma interface de usuário com a qual
00:12:49você pode interagir no cliente —, um aplicativo FastMCP é uma aplicação completa com backend e, neste caso,
00:12:54o servidor MCP será o backend. Não temos tempo para passar por um exemplo prático completo
00:12:59nesta sessão, mas eis a aparência do código, apenas para dar uma ideia da ergonomia.
00:13:03Vamos escrever uma classe, que é o nosso aplicativo FastMCP, e então decorar pelo menos
00:13:08duas funções com app.ui. Esse é o ponto de entrada que vai retornar os componentes prontos que
00:13:14formam a interface base da aplicação, e depois pelo menos uma, acho que isso é opcional, então zero ou mais
00:13:20app.tools, que são basicamente métodos de backend que você agora pode referenciar na interface.
00:13:27Portanto, você pode ter um botão que pega os dados inseridos pelo usuário em um formulário e os envia para um
00:13:31banco de dados usando uma ferramenta decorada como esta. Uma coisa que usamos e que agora fornecemos integrada
00:13:38ao FastMCP, é um componente de upload. Como você pode ver, já que apenas o agente tem acesso
00:13:46a um servidor MCP, não basta simplesmente enviar um arquivo para um servidor MCP. Ele precisa passar pelo cérebro do
00:13:51agente, e o que acaba acontecendo é que muitas pessoas criam basicamente uma ferramenta de upload em seu servidor
00:13:56MCP, esquecem que o agente realmente precisa chamá-la, e o que você acaba fazendo é a operação de copiar e colar mais
00:14:00cara do mundo. Você dá ao agente um megabyte de texto, o agente redigita caractere por
00:14:06caractere no MCP, e agora, sim, de fato, você o enviou, mas é extremamente, extremamente
00:14:12ineficiente. Portanto, este é um caso de uso excelente para um aplicativo MCP, onde você pede para o agente abrir a
00:14:18interface do aplicativo, você arrasta um arquivo para dentro dele, e agora o arquivo contorna o agente e vai direto para o
00:14:23servidor. Tornamos isso uma instrução de uma linha, junto com algumas outras ferramentas úteis, e
00:14:30isto é um GIF? Isto não é um GIF, ou se for, não está carregando, mas ficaria assim no seu
00:14:34cliente, e qualquer cliente que suporte aplicativos MCP, se você pedir ao agente “Eu preciso enviar algo”, ele agora pode
00:14:38lhe mostrar isto, e você pode fazer o upload com segurança e, o mais importante, de forma barata. Ah, eu tenho um GIF sim. Esquece.
00:14:45Conhecer seus próprios slides é uma boa lição desta palestra. Então aqui o agente está interagindo com
00:14:50um arquivo que acabei de enviar, que arrastei e soltei. Vou disponibilizar estes slides mais tarde se
00:14:55você quiser ver isto, ou é claro, é uma linha de código. Você pode testar nos seus servidores esta tarde.
00:15:00A última coisa de que quero falar, que é viabilizada por esta arquitetura,
00:15:04é uma interface totalmente gerativa. Vamos apenas pular e deixar isso rodando enquanto eu falo. Então esta é uma demonstração muito
00:15:10simples onde eu pedi ao Claude: “Ei, estou dando uma palestra sobre isso. Apenas comece a transmitir a
00:15:15interface mais interessante que você conseguir criar.” E assim ele foi. E o que ele está fazendo aqui é que expusemos uma ferramenta
00:15:21que aceita o JSON, a serialização de protocolo de uma interface na qual o Prefab se baseia. E agora, enquanto o
00:15:29agente transmite essa informação pela rede, nós estamos renderizando em tempo real o que recebemos,
00:15:35corrigindo esse JSON e renderizando-o. Portanto, esta foi uma demonstração muito legal, e foi muito eficaz,
00:15:39e as pessoas gostam disso porque agora você nem precisa definir a interface sozinho. Tudo o que você precisa fazer é
00:15:43usar a habilidade que já fornecemos, compartilhá-la com seu agente para que ele saiba como escrever uma interface, e pronto.
00:15:48Ele pode fazer o que você quiser. Existem alguns clientes que possuem versões integradas disso. Se eles
00:15:52tiverem uma versão integrada, você pode preferir usá-la, com certeza. Mas esta pode ser uma maneira de você construir
00:15:56sua própria abordagem personalizada ou conjunto limitado de componentes que sejam úteis para você. Agora, uma coisa muito interessante
00:16:01aconteceu quando iniciamos isso. Como mencionei, originalmente o plano era que o agente enviasse
00:16:07JSON pela rede e fizesse com que ele fosse renderizado nesta aplicação React completa. O que acabamos descobrindo
00:16:13é que a representação em Python de uma interface é cerca de 70% menor do que a representação em JSON.
00:16:20Portanto, não fazemos mais isso. Quando gravei esta demonstração com streaming de JSON, o que fazemos agora é transmitir
00:16:26o código Python pela rede. Ele é executado em um ambiente isolado (sandbox), transformado em JSON no servidor,
00:16:32e então isso é renderizado. E isso traz um benefício dramático, dramático de custo de eficiência de tokens e de latência.
00:16:39Portanto, funcionaria exatamente da mesma forma que quando gravei esta demonstração, mas esta é apenas umaquelas coisas
00:16:43que aprendemos na hora. E é realmente fascinante que a representação em Python seja bem mais compacta e ergonômica
00:16:49do que a em JSON completo. Então, esse é o Prefab. Se você quiser conferir, se tiver curiosidade,
00:16:55se quiser ver a coisa mais estranha que já construí junto com várias outras pessoas, você pode ver
00:17:00a documentação em prefab.prefect.io. Você pode ver a biblioteca completa, que está no nosso GitHub aqui. E isso já
00:17:06está totalmente integrado ao Fast MCP. Então, se você estiver usando uma versão recente do Fast MCP, você deve conseguir
00:17:11instalar esta edição opcional, importar os componentes, retorná-los e começar a testar esses aplicativos MCP.
00:17:17Obrigado a todos por virem.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기