Créer Une Application Xano 🚀

Ok donc du coup on se retrouve sur des anneaux, il faut que vous ayez créé un compte et vous voyez là dans le menu vous avez une section qui s'appelle AI, vous cliquez et vous allez dans MCP Server.

Je ne vais pas tout recréer, je vais vous expliquer comment ça fonctionne et ce qu'il faut faire, ou il faut cliquer pour refaire la même chose.

Là typiquement, Add MCP Server, nom du MCP, vous mettez une petite description, c'est pour vous, c'est pas pour l'IA.

vous cliquez et donc là moi j'ai déjà mis des tools mais normalement il est via votre mcp il n'y a rien et vous aurez un gros bouton créer des tools donc on va créer des tools et là vous voyez là dans notre truc d'agence ce qu'il faut déjà Avant même de créer le tool, il faut une base de données.

Donc on a une base de données d'agence avec les noms, short description, long description et des spécialités qui sont ici.

Et nos tools vont aller récupérer des informations dans cette base de données pour ensuite les afficher dans le composant.

Dans le tool, j'ai tous les exemples de tools et on voit qu'ils sont rattachés à des mcp-server.

Quand je veux créer un tool, je mets add-tool qui va me donner cette interface.

Ici dans les tools instructions, c'est ce que vous allez voir dans chat-gpt pour que l'IA comprenne à quoi sert le tool.

Si on va par exemple ici dans create an agency, c'est vrai qu'il y a des petits soucis du X, là vous voyez, ça c'est comment fonctionne le tool, on va revenir dessus juste après.

Donc setting, ici vous voyez, tool instruction permet de créer une nouvelle agence dans la base de données.

Ça c'était pour moi pour aller plus vite, pour remplir la base de données plus rapidement.

Pitch the list, Prefix brief, on va commencer par search agency.

donc là moi ce que j'ai mis c'est vous créez un input ici add input vous mettez le type de l'input vous pouvez mettre texte ok single et là vous mettez search query mais je vais pas le créer et vous avez un input search query ok là vous allez faire donc là la fonction c'est en fait à partir de ça qu'est ce qu'on fait ensuite donc là vous mettez add a function là vous avez tout un tas de fonctions mais vous allez dans database request ça c'est pour appeler les bases de données donc là c'est pour avoir juste une seule donnée ça c'est pour récupérer c'est pour savoir si une donnée existe, édite record machin machin mais nous ce qui nous intéresse c'est...

query all records celui-ci Vous cliquez dessus et vous choisissez la base de données qui vous intéresse, en l'occurrence Agency.

Ensuite, ça va vous créer cette fonction là, avec tous ces éléments là.

Il y a By Joins et là il y a Custom Query.

En fait ce qu'on veut, c'est que l'IA mette un mot clé, là en l'occurrence dans l'exemple c'était NoCode, et en fait on veut trouver des agences où il y a le mot NoCode dans le nom, la spécialité ou dans la short description.

Donc en fait ce que vous faites c'est where search query est égal à agency name et vous voyez en fait là vous allez chercher dans les champs dans db agency qui sont du coup le record qu'on a appelé agency.name et la search query en fait c'est simple, vous allez ici dans input et il y a search query c'est ce qui va être envoyé ici et la condition c'est pas où la search query était égale à dans le name et dans c'est où dans les spécialités ou dans la chambre description et ensuite ça va retourner du coup à genc1 et la réponse de ce tool ça va être agency1 donc ce qu'on a trouvé ici.

Si on prend un exemple search query égale nos codes on va run et vous voyez ça récupère toutes les informations de la base de données avec des données structurées comme on en avait parlé dans les vidéos précédentes.

Donc là on a Search Agency qui est prêt.

Attendez j'ai un doute sur un truc.

Oui non ok c'est pas là.

Donc là il faut bien comprendre là on est dans tools donc on règle que les tools et après tout ce qui est par rapport au metadata du MCP qu'on a vu dans la vidéo numéro 3 et 2 c'est après quand on sera dans le mcp, ça c'est une nuance à bien cerner.

Donc ce tool là il est prêt et je veux que ça affiche une table, une liste des agences et donc voilà.

Ici on n'a pas d'input et on a un truc qui s'appelle template engine il faut aller ici dans les anneaux, il faut descendre Faut aller dans AI Tool et Template Engine.

Et ça va vous créer ce truc là.

Vous cliquez Template Editor.

Et ici vous allez copier le HTML, CSS, Javascript de votre composant.

Donc le composant pour la table il est dans l'espace Notion dans Comment créer une app dans Xano.

Là juste en dessous de là où la vidéo est.

Voilà.

et vous copiez et collez là, update and close et ensuite save ici parce que sinon ça ne se regarde pas.

Et là va falloir construire la réponse parce qu'on n'envoie pas juste le html.

Il faut que la réponse, hop, vous voyez, tac, je vais faire tourner le truc, vous voyez, ça ressemble à ce qu'on avait dit dans la partie serveur, URI, mime type et texte et que le texte en fait ça soit ça, ok ?

Donc pour ça, on va créer une variable qui sera response et je vais vous montrer comment faire exactement.

Vous mettez, créez une variable.

Là, normalement en dessous de la vidéo, vous avez un truc qui s'appelle le json de réponse.

Vous le copiez et vous le copiez dans le value.

normalement il n'y a pas d'erreur de syntaxe et là vous mettez setwithfilter il y a une erreur ok Je le corrige tout de suite parce que j'ai mis un point virgule et pas une virgule alors que c'est des virgules.

Et là on a une JSON qui est correcte.

Là vous pouvez mettre set withfilter et ça va vous faire ce truc là.

Set c'est pour dire en fait URI est égal à machin.

Et là dans URI vous avez set et vous pouvez mettre la valeur de l'URI ici.

Et en l'occurrence ce qu'on va mettre c'est donc là vous savez comment faire ce truc là donc on va le supprimer et on va voir quand il est rempli et vous allez utiliser donc il faut toujours avoir ce format ui2.2/.widget/.et le nom du truc .html qui va être ici, ok ?

MIME TYPE et là vous cliquez SET LE NOM LA VALEUR et là TEXT en fait ce que vous allez faire c'est que vous n'allez pas copier-coller puisque ça peut changer mais vous allez mettre INLINE CONTENT et vous allez aller dans VAR et INLINE CONTENT ah oui et j'ai oublié de préciser une chose ici ce truc là dans return as vous mettez inline content pour que ici dans var dans variable on le retrouve en tant que inline content ok et ce qui fait que la réponse et après dans ici dans as self machin la réponse c'est response et pas inline content ok comme ça ça répond bien on peut run, pas d'input et donc ça nous retourne UI, Widget, Text, HTML comme ce qu'on avait comme ce qu'on a prévu juste ici voilà maintenant on va mettre les metadata et après on fera Prefile Brief et le Form.

Donc dans Create Agency, vous allez sur les 3 petits points ici et vous voyez il y a Connection Settings.

Et là vous pouvez mettre un Tool Type et des Tools Metadata.

Donc Create Agency c'est pas ce qu'on était en train de faire, c'était Search Agency.

Je ne l'ai plus lu comme ça, je suis en draft.

Ok donc on va ici, connexion settings, tools, hop, vous voyez vous le mettez en tools mais vous pouvez le mettre en ressources, ce qu'on verra juste après.

Et là vous voyez, vous mettez OpenAI OutputTemplate eWidgetTable, donc ça c'est juste en dessous de la vidéo, vous pouvez le copier et coller.

Et là vous avez ToolInvocationInvoking, en fait c'est lorsque le tool il est en train de faire le call au MCP, c'est le petit mot qui est affiché.

Et là, vous sauvegardez.

Et donc pour la table, ce qu'il faut faire...

L'UX est pas terrible de ce côté là.

Vous voyez, vous copiez-collez ça ou vous le stockez quelque part.

Et quand vous voulez créer une ressource, donc pour que ça affiche du HTML du CSS, donc dans ui-table qui a bien été fait, ici vous mettez, vous voyez, non pas tool mais vous mettez ressources, ici, et la ressource URI, pour qu'on sache en fait ce qu'il faut afficher, vous copiez-collez ça, ui-widget-table.html, vous le copiez-collez.

Comme ça, l'IA va savoir que quand on fait search agency il faut ramener ça, grâce au metadata.

Je vais vous montrer préfilbrief.

Alors préfilbrief c'est un truc un peu spécial.

C'est comme ce que je vous disais tout à l'heure.

Donc là vous voyez en input on met title, description et agency name.

Là j'ai pas mis agency parce qu'en fait c'est un ID.

Le nom de l'agence.

Puisqu'il n'y a pas de nom de l'agence pour le moment.

Ok, oui, oui, ok, bon.

C'est un peu mal foutu, je vous l'accorde, si vous savez de quoi je parle, mais voilà.

Donc là, on fait la même chose.

En fait, on crée un objet, set agency et on met agency name, title, title, description, description.

Ça c'est pour...

Ah non c'est pas foutu parce que là en fait on est sur la table brief.

Et donc en fait ce que ça va faire c'est que chatgpt va remplir le titre du brief, la description, le nom de l'agence.

Là ici ça va créer une réponse et ça va renvoyer la réponse du brief à chatgpt dans tool output qui va permettre aux composants de remplir, grâce à ces données là, le composant.

Ce qui est un peu dommage c'est qu'il faut le faire en back-end alors que globalement c'est quand même une tâche de front-end de remplir des champs d'informer.

C'est comme ça pour le moment, on peut mettre une convention de nommage qu'on appelle préfile et ça va bien.

Je retourne là-dedans, Prefix Brief, Connection Settings, vous avez les mêmes, et là vous voyez tout l'invocation, Rating the Brief, Brief is ready, et UI Widget from HTML, et en fait pour les ressources vous faites exactement la même chose, juste vous changez le code HTML qui est disponible en dessous de cette vidéo, et que vous allez copier-coller là-dedans, Update & Close, Save, le JSON dont je vous parlais concopycall uri-widget-form.html qui sera la référence pour ce widget là que vous allez mettre dans les métadatas pour openai-output-template-for-prefield-brief qui va appeler ce composant et dans la ressource du mcp form-marketplace ici dans connection-setting-ressources vous mettez form html en fait on sache que ce truc là c'est le form html ok et donc dans la prochaine dans la vidéo qui sera juste en dessous parce que je peux partager qu'un onglet là avec cette vidéo je vais vous montrer comment le connecter à votre chat gpt