Découvrez le serveur MCP natif de Directus : un game changer ou une simple couche conversationnelle ? Analyse et retour d'expérience.

Directus MCP : comment utiliser le Model Context Protocol avec un LLM

Simplifier l’expérience utilisateur avec un assistant IA pour Photobooth.

Notre assistant IA pour Photobooth AI

Comprenez les tools, la différence avec les serveurs MCP, les transports stdio et HTTP, et comment choisir selon votre contexte (SaaS, desktop, agents IA).

Guide pratique du Model Context Protocol : tout comprendre sur les tools et serveurs MCP

Découvrez en profondeur le plugin Organization de Better Auth : gestion du state client/serveur, personnalisation du modèle, permissions avancées et la configuration Teams.

Better Auth : structure et permissions avec le plugin Organization

Découvrez l'Apps SDK d'OpenAI : développez des applications natives dans ChatGPT avec TypeScript, React et le Model Context Protocol.

OpenAI Apps SDK : développer des apps natives dans ChatGPT

Retour d’expérience sur Better Auth : installation, plugins et migration depuis Supabase.

Better Auth : le futur d’Auth.js

Découvrez comment intégrer l’Agentic Commerce Protocol d’OpenAI et Stripe pour vendre directement dans ChatGPT. Guide technique, roadmap et bonnes pratiques.

E-commerce conversationnel avec OpenAI et Stripe : guide complet de l’Agentic Commerce Protocol

Fraichement sorti sur le canal canary de React, le composant Activity est une nouveauté ayant pour but de faciliter...

Activity, le nouveau composant React

Découvrez comment créer des animations interactives avec Rive app et les intégrer dans vos applications React pour des interfaces dynamiques et engageantes.

Comment utiliser Rive app pour animer vos interfaces Web et mobiles

Alors que la nouvelle architecture de React Native est maintenant dans un état stable, la quête à la performance elle n'est jamais terminée...

Stylisez votre application React Native avec Unistyles

La démocratisation de l'IA via les LLM a rendu l'accès à tout type d'information extrêmement facile et rapide...

Intégration d'un MCP dans une application React

Découvrez comment créer un agent IA personnalisé pour votre site web. Une solution simple et efficace pour intégrer l'intelligence artificielle dans vos projets.

Doter votre site d'un agent IA sur mesure, c'est simple (et c'est souvent par là que tout commence)

Il y a quelques semaines de ça, une faille de sécurité a été découverte dans NextJS au niveau de la gestion de l'authentification au sein du fichier middleware...

TanStack Start: la relève des frameworks React ?

Découvrez comment le Retrieval-Augmented Generation (RAG) révolutionne les modèles de langage en leur permettant d’accéder à vos données privées sans hallucinations.

Comment fonctionne un RAG ?

Dans cet article, je vais vous parler de Picksale, le tout premier projet de ma carrière...

Mon premier projet en React : Picksale

Sorti en open source il y a maintenant plusieurs semaines, Lynx est un nouvel arrivant dans le monde du développement mobile.

Lynx: le remplaçant de React Native ?

Découvrez comment NextJS intègre l’API View Transition de React pour créer des animations CSS fluides. Une approche expérimentale, qui simplifie les transitions sans librairie tierce. Comprendre cette nouveauté change la donne côté UI

View Transition API et son intégration dans NextJS

On était à la conférence DotJS 2025, on vous raconte tout

DotJS 2025 : focus sur l’avenir de JavaScript et l’IA

Découvrez comment utiliser la Document Picture-in-Picture API pour afficher n’importe quel contenu HTML dans une fenêtre flottante toujours visible, et explorez des cas d’usage innovants qui réinventent l’expérience utilisateur sur le web.

Document Picture-in-Picture, le PiP pour n’importe quel contenu HTML

Une plongée dans les moments forts, les défis rencontrés et les idées de notre projet qui ont émergé au fil de cet intense week-end

Retour sur Shift 2025 - Le Hackathon Gen AI 

Comment fonctionne l’API use avec Next 15 et React 19 ?

Simplifiez la gestion des abonnements et boostez vos conversions avec RevenueCat : une solution tout-en-un pour iOS, Android et Stripe. 🚀

RevenueCat x Expo : une solution clé en main pour les paiements et abonnements

Metabase est un outil open source qui permet de créer des dashboards et d’exploiter ses données. Il est facile à utiliser et à configurer, et il offre de nombreuses fonctionnalités pour les utilisateurs.

Metabase: L’outil open source idéal pour créer des dashboards et exploiter ses données

Au fil des années, Expo a considérablement amélioré sa plage de fonctionnalités, devenant...

App universelle avec Expo

Bun est un runtime (et plus encore) JavaScript dont l'axe de communication principal est sa performance...

Bun : un outil tout-en-un JavaScript révolutionnaire ?

Découvrez comment faciliter la gestion de vos packages avec un monorepo Turbo et les workspaces Yarn

Comment mettre en place un monorepo avec Turborepo et Yarn ?

Retour d'expérience sur la création d'une GitHub Action ('Prisma drop migration warning') pour détecter les suppressions de colonnes/tables dans Prisma et améliorer la fiabilité des migrations.

Créer une GitHub Action pour surveiller les suppressions de colonnes / tables dans Prisma

Découvrez comment simuler une réponse streamée avec le SDK Vercel AI et useCompletion.

Comment simuler une réponse streamée avec le SDK Vercel AI

Découvrez comment l'architecture headless avec Shopify, associée à React et Next.js, peut transformer votre e-commerce en offrant une personnalisation et des performances optimales. Explorez également Hydrogen, le framework innovant de Shopify, et ses avantages pour le développement d'interfaces modernes.

Shopify et React: Une stack e-commerce moderne avec l'API Storefront

Gérez les notifications dans une WebView avec React Native

Chez Premier Octet, nous aimons partager nos articles avec le plus grand nombre, pour cela nous avons mis en place un workflow de traduction automatisée.

Notre workflow de traduction d’articles avec l’API OpenAI

Cet article explique pourquoi la mutation du state en React peut causer des problèmes et comment l'éviter.

Pourquoi muter le state pose problème en React

Cet article a pour objectif d’expliquer de manière claire et visuelle le fonctionnement d’un composant React.

Anatomie d'un composant React : une explication visuelle

Gestion des permissions simplifiée et nouvelles extensions : Tour d’horizon des nouveautés de Directus 11 le CMS headless open source.

Quelles nouveautés pour la dernière version du CMS headless Directus 11 ?

Découvrez comment ne pas faire confiance à vos utilisateurs et valider leurs données avec Zod.

Comment utiliser Zod pour valider des données en TypeScript

Vercel a dévoilé une nouvelle version de Vercel AI SDK, conçu pour simplifier le processus de développement d'applications IA en fournissant des outils et des bibliothèques prêts à l'emploi pour les développeurs. Je vous propose un tour d'horizon des exemples clés abordés par Nico Albanese, ingénieur chez Vercel, dans sa vidéo didactique publiée sur YouTube.

Comment construire des applications IA avec Vercel AI SDK — Part I

Dans cet article, nous allons voir comment créer un indicateur d'activité audio dans le navigateur, pour afficher une animation lorsqu'un son est joué. Très utile pour les applications de chat video ou de streaming audio.

Créer un indicateur d'activité audio dans le navigateur

Toute l’équipe de l'agence Premier Octet était présente à dotJS pour aiguiser son expertise technique JavaScript…

Retour sur dotJS 2024

Dans ce premier article d’une série consacrée à l’IA et l’UI, je vous propose de découvrir différentes manières d’intégrer ces modèles d’IA dans vos applications React pour améliorer l’expérience utilisateur.

AI et UI #1 - Filtres intelligents avec le SDK Vercel AI et Next.js

Voici un aperçu des toutes dernières annonces de Google I/O, avec une attention particulière sur les nouveautés HTML, CSS, ainsi que les améliorations de performance.

Les nouveautés de Google IO 2024 : CSS, HTML et performance

Dans cet article, vous ne trouverez pas de snippets ou de tips croustillants sur React, seulement le récit d'une aventure plutôt ordinaire à travers le développement et l'évolution d'un projet technique.

Retour d'expérience chez 20 Minutes : s'adapter au journalisme numérique

Le composant Image de Next.js simplifie la gestion des images, améliore les performances et renforce l'accessibilité, mais est souvent mal compris. Ce guide instructif explique de manière simple son fonctionnement, permettant ainsi aux développeurs de découvrir son plein potentiel et ses avantages

Le composant Next.js <Image>

React Native Vision Camera vient d’annoncer une toute nouvelle version. L’occasion de tester le retour du hook Skia et d’interagir avec les frames de la caméra...

React Native Camera Vision x Skia : les nouveautés de la v4

Après plusieurs années sur Linux, j'ai récemment décidé de repasser sur un environnement de travail MacOS. J'ai donc chercher à reconfigurer mon environnement de travail pour retrouver des méthodes similaires...

Environnement MacOS avec Yabai et SketchyBar

Après plus de 2 ans depuis sa dernière release officielle, l'équipe de Meta vient d'annoncer la version 19 de React

Nouveautés de React 19

Nous avons participé à la toute première édition de la React Connection qui se tenait…

Retour sur React Connection 2024

Les WebViews avec React Native, une solution pour intégrer un site web dans une application mobile.

Embarquez vos sites Web dans une application React Native avec les WebViews

Avec le récent passage en stable de App Router dans Next.JS, il s'est avéré nécessaire de...

Intégration de App Router au sein d'une librairie Next.JS

Nous sommes le 01 novembre 2023, pour nous, ainsi que pour nos copains de chez JoliCode c’est également la journée de solidarité, destinée au financement d’actions en faveur de l’autonomie des personnes âgées ou handicapées. À cette occasion nous consacrons cette journée à la réalisation de divers projets sortant de nos habitudes quotidiennes.

OctetDay 2023, journée de la créativité chez Premier Octet

L'audit d'une application web est un processus essentiel pour assurer la sécurité, la performance et la fiabilité d'une application.

Comment réaliser un audit technique

Medusa est une source d'innovation majeure pour les développeurs web et les boutiques de commerce électronique...

Découverte du e-commerce headless avec Medusa.js

En l'espace de presque deux ans, la popularité d'Expo a quintuplé, l'amenant au rang d'incontournable

Intégration de module natif avec Expo Modules

Ces deux dernières années ont vu des avancées significatives dans le domaine du traitement du langage naturel.

Intégrez vos données métiers au modèle OpenAI GPT avec Next.js

Focus sur les server actions, grande nouveauté de Next 13.4 et leur promesse de jours meilleurs pour les requêtes POST.

Next 13.4 : Tour d’horizon des server actions

Dans l'univers react-native, nombreuses sont les librairies UI proposant du contenu intéressant. Cependant...

Découverte de Tamagui

Filtres, transformations, machine learning, Replicate vous propose des effets pour tous les goûts...

Premiers pas avec Replicate

Une solution open source pour créer des interfaces d’administration en un claquement de doigts.

Next-admin: une admin clé en main pour vos projets

Dans l'ecosystème React Native, les outils d'instrumentation de tests end to end (E2E) sont...

Tests end to end avec Maestro

Nous vous proposons dans cet article de découvrir un pattern avancé de TypeScript...

Les branded types avec TypeScript

Découverte de l'univers 3D avec Expo-GL, React-three-fiber et Reanimated

Animation 3D avec React Native

Dans le cadre d'une mission nous avons eu l'occasion de travailler avec le CMS headless Directus

Directus : le CMS headless open source

Découverte des containers queries et de leur implémentation dans Tailwind

CSS Containers Queries avec Tailwind

C’est la première de React Native Connection, on vous raconte tout !

React Native Connection : première édition

La version 13 de Next introduit un nouveau routeur niché dans le dossier `app`.

Focus sur le nouveau routeur app de Next 13

Internationalisons nos applications Next : petit tour d'horizon de i18next

Internationaliser avec Next

Regardons dans notre boite à outils, ce qu'il est possible d'utiliser pour détecter et analyser la performance d'une application React Native.

Performances avec React Native

En 2021 Premier Octet lançait son premier projet avec Strapi, 1 an et demi plus tard place à la v4...

Strapi v4 :  Les nouveautés du CMS headless

Premier Octet était pour la première fois à React Advanced à Londres.

Retour sur React Advanced 2022

Gérer les données locales d’une application React a toujours été une question centrale d’architecture.

Contextes et performances

Dans le cadre d’un partage de nombreux composants entre différents applicatifs React, nous avons réalisé une bibliothèque de composants UI et haut niveau avec l’aide du package TSDX.

Créer un package avec TSDX

Depuis quelques temps déjà, nous utilisons Native-Base sur nos applications React-Native...

Améliorer les performances de Native-Base

Remix a fait son entrée dans les frameworks React cette année, avec des concepts qui se rapproche des standards du web. Découvrons le ensemble via une application simple d'e-commerce.

Création d'une application e-commerce avec Remix

Notre plateforme de cours / formations devient open-source.

Release de la V1 de Training-Platform

Après près de 3 ans d’absence, c’est donc le 17 juin 2022 que le React Summit est revenu...

Retour sur React Summit 2022

Chez Premier Octet nous sommes des aficionados de Chakra UI cependant nous avons eu l'occasion d'utiliser [Material UI](https://mui.com/) 4 puis 5 dans le cadre d'un projet client. MUI 4 souffrait de quelques lacunes concernant la personnalisation des composants, trois ans après la sortie de cette dernière, MUI nous offre une nouvelle version accompagnée de son lot de nouveautés ✨

Exploration des nouveautés apportées par Material UI v5

Nous sommes le 11 novembre 2021, jour férié pour une majorité des Français. Pour nous, ainsi que pour nos copains de chez JoliCode c’est également la journée de solidarité, destinée au financement d’actions en faveur de l’autonomie des personnes âgées ou handicapées. À cette occasion nous consacrons cette journée à la réalisation de divers projets sortant de nos habitudes quotidiennes.

OctetDay 2021, journée de la créativité chez Premier Octet

Stripe est une API qui facilite la configuration des différents paiements en ligne...

Découverte de Stripe avec Next.js

Créé il y a un peu plus de 5 ans, Expo n'a cessé de gagner en popularité auprès des développeurs React-Native.

Découverte du client customisé d'Expo

Chez Premier Octet comme vous le savez peut-être, nous sommes de grands fans de Chakra UI, une librairie de composants

Créer ses composants avec styled-system et styled-components

Nous vous présentions dans notre dernier article, le CMS headless Strapi que nous avions eu

Gestion de blocks CMS avec Strapi, Next.js et TypeScript

Chez Premier Octet nous avons récemment réalisé notre premier projet avec le CMS headless Strapi...

Tour d’horizon du CMS Headless Strapi

Après notre premier article sur les bases du mouvement avec Framer Motion, qui...

Framer Motion next level : des animations synchronisées et interactives

Vous avez besoin d'intégrer une font absente des systèmes Android et iOS ? Vous êtes...

Comment intégrer une font personnalisée dans une app React Native ?

Le débat existe depuis l'arrivée des progressive web apps aux alentours de 2015, et...

PWA et application mobile avec React Native

Ça y est ! 🎉 La V1 de Chakra UI est publiée avec de nombreuses nouvelles...

Release de la V1 de Chakra UI

En matière de design web et mobile, le mouvement est aujourd’hui la norme...

Framer Motion : Animez vos applications en toute simplicité

Connaissez-vous Storybook ? Cet outil open-source offre un environnement...

Améliorez vos composants avec Storybook

BlitzJS est un framework React basé sur Next.js qui se veut totalement fullstack contrairement...

Découverte de Blitz JS

Que diriez-vous de créer votre propre jeu rétro accessible directement sur le web ou sur une GameBoy ?...

Découverte de GB Studio

Next.js est un framework React open source qui a pour particularité d'être fullstack...

Next.js : du statique dynamique

Gatsby est un générateur de site statique (SSG) basé sur React. Il s’agit d’un projet open...

Découverte des Builds Incrementals dans Gatsby

Rappel : TypeScript est un analyseur de code statique avec quelques syntaxes...

Migration en douceur vers TypeScript

Vous êtes-vous déjà demandé s'il était possible de partager votre code JavaScript entre votre...

Partagez votre code JavaScript entre vos applications React Native, React et Symfony

Au-delà de la syntaxe et des structures, écrire du code n'est pas chose aisée. Cela demande une...

Pour un code simple

À l'heure où il ne fait aucun doute pour un développeur JavaScript que créer une API à l'aide...

Bootstraper une API avec NestJS

En l'espace de quelques mois, le développement de React Native s'est vu grandement amélioré...

Les nouveautés de React Native

Retour 8 ans en arrière où cet ami non-développeur venait vous voir en sortant...

Classification d'images avec React Native et CoreML sur iOS

Si vous regardez tout en haut de la pyramide, vous apercevrez les tests...

Tester son app React Native - End-to-End avec Detox

Chez Premier Octet, nous développons nos applications mobiles à l'aide de React Native...

Découverte de Flutter - CLI, DX et DevTools

Combien de fois avez-vous testé manuellement un workflow dans votre application...

Blog

Directus MCP : comment utiliser le Model Context Protocol avec un LLM

Nos articles