@webmcp-auto-ui/agent 2.5.8 → 2.5.10

package/src/recipes/cross-server.md

@@ -1,59 +1,59 @@
 ---
-id: croiser-donnees-de-plusieurs-serveurs-mcp-connectes
-name: Croiser les donnees de plusieurs serveurs MCP connectes simultanement
+id: cross-reference-data-from-multiple-connected-mcp-servers
+name: Cross-reference data from multiple simultaneously connected MCP servers
 components_used: [map, gallery, table, kv, stat-card]
-when: la question de l'utilisateur necessite de combiner des donnees provenant de plusieurs serveurs MCP connectes, par exemple croiser geolocalisation et observations, ou enrichir des donnees parlementaires avec Wikipedia
+when: the user's question requires combining data from multiple connected MCP servers, for example cross-referencing geolocation and observations, or enriching parliamentary data with Wikipedia
 servers: []
 layout:
   type: grid
   columns: 2
 ---
 
-## Quand utiliser
+## When to use
 
-L'utilisateur pose une question qui ne peut etre satisfaite par un seul serveur MCP. Exemples :
-- "Quels oiseaux peut-on observer pres du Louvre ?" → geocoding + iNaturalist
-- "Montre-moi la meteo et les observations naturalistes a Marseille" → Open-Meteo + iNaturalist
-- "Compare les oeuvres du Met Museum sur le theme des fleurs avec les especes observees a New York" → Met Museum + iNaturalist
-- "Donne-moi le profil Wikipedia du depute qui a depose le plus d'amendements" → Tricoteuses + Wikipedia
+The user asks a question that cannot be answered by a single MCP server. Examples:
+- "What birds can be spotted near the Louvre?" → geocoding + iNaturalist
+- "Show me the weather and nature observations in Marseille" → Open-Meteo + iNaturalist
+- "Compare artworks from the Met Museum on the theme of flowers with species observed in New York" → Met Museum + iNaturalist
+- "Give me the Wikipedia profile of the MP who filed the most amendments" → Tricoteuses + Wikipedia
 
-La recette s'applique des que 2+ serveurs MCP sont necessaires pour repondre.
+This recipe applies whenever 2+ MCP servers are needed to answer the question.
 
-## Comment
+## How to use
 
-1. **Identifier quels serveurs MCP fournissent quelles donnees** :
-   - Serveur A fournit les donnees de reference (coordonnees, IDs, noms)
-   - Serveur B enrichit avec des donnees complementaires
-2. **Appeler le premier serveur** pour obtenir les donnees de base :
+1. **Identify which MCP servers provide which data**:
+   - Server A provides reference data (coordinates, IDs, names)
+   - Server B enriches with complementary data
+2. **Call the first server** to obtain the base data:
    ```
-   // Exemple : geocoder un lieu
+   // Example: geocode a location
    geocode({query: "Louvre, Paris"}) → {lat: 48.8606, lon: 2.3376}
    ```
-3. **Utiliser les resultats comme input** pour le deuxieme serveur :
+3. **Use the results as input** for the second server:
    ```
-   // Exemple : chercher les observations dans un rayon
+   // Example: search for observations within a radius
    search_observations({lat: 48.8606, lng: 2.3376, radius: 5, taxon: "Aves"})
    ```
-4. **Combiner les resultats** dans une visualisation coherente :
-   - `component("map", ...)` si des coordonnees sont impliquees (marqueurs des deux sources)
-   - `component("table", ...)` pour les resultats combines avec colonnes des deux sources
-   - `component("gallery", ...)` si les deux sources fournissent des images
-5. **Toujours citer les sources** avec un composant `kv` final :
+4. **Combine the results** in a coherent visualization:
+   - `component("map", ...)` if coordinates are involved (markers from both sources)
+   - `component("table", ...)` for combined results with columns from both sources
+   - `component("gallery", ...)` if both sources provide images
+5. **Always cite the sources** with a final `kv` component:
    ```
-   component("kv", {pairs: [["Source 1", "iNaturalist"], ["Source 2", "Open-Meteo"], ["Zone", "5 km autour du Louvre"]]})
+   component("kv", {pairs: [["Source 1", "iNaturalist"], ["Source 2", "Open-Meteo"], ["Area", "5 km around the Louvre"]]})
    ```
 
-## Exemples
+## Examples
 
-### Oiseaux pres d'un monument (geocoding + iNaturalist)
+### Birds near a landmark (geocoding + iNaturalist)
 ```
-// 1. Geocoder le lieu
+// 1. Geocode the location
 geocode({query: "Tour Eiffel, Paris"}) → lat: 48.8584, lon: 2.2945
 
-// 2. Chercher les observations d'oiseaux
+// 2. Search for bird observations
 search_observations({lat: 48.8584, lng: 2.2945, radius: 3, taxon_name: "Aves"})
 
-// 3. Rendu combine
+// 3. Combined render
 component("map", {
   center: [48.8584, 2.2945],
   zoom: 14,
@@ -61,42 +61,42 @@ component("map", {
     .concat(observations.map(o => ({lat: o.lat, lon: o.lon, label: o.species_guess})))
 })
 component("gallery", {images: observations.flatMap(o => o.photos.map(p => ({src: p.url, alt: o.species_guess})))})
-component("table", {columns: ["Espece", "Date", "Distance", "Observateur"], rows: formattedObs})
-component("stat-card", {label: "Especes distinctes", value: "23", icon: "bird"})
+component("table", {columns: ["Species", "Date", "Distance", "Observer"], rows: formattedObs})
+component("stat-card", {label: "Distinct species", value: "23", icon: "bird"})
 ```
 
-### Profil enrichi (Tricoteuses + Wikipedia)
+### Enriched profile (Tricoteuses + Wikipedia)
 ```
-// 1. Chercher le depute le plus actif
+// 1. Find the most active MP
 query_sql({sql: "SELECT depute, COUNT(*) as nb FROM amendements GROUP BY depute ORDER BY nb DESC LIMIT 1"})
 
-// 2. Enrichir avec Wikipedia
+// 2. Enrich with Wikipedia
 search_wikipedia({query: depute.nom})
 
-// 3. Rendu combine
+// 3. Combined render
 component("profile", {name: depute.nom, subtitle: depute.groupe, details: wikipedia.extract})
-component("stat-card", {label: "Amendements deposes", value: depute.nb})
-component("kv", {pairs: [["Source parlementaire", "Tricoteuses"], ["Biographie", "Wikipedia"]]})
+component("stat-card", {label: "Amendments filed", value: depute.nb})
+component("kv", {pairs: [["Parliamentary source", "Tricoteuses"], ["Biography", "Wikipedia"]]})
 ```
 
-### Meteo + Biodiversite dans une region
+### Weather + Biodiversity in a region
 ```
-// 1. Meteo pour Marseille
+// 1. Weather for Marseille
 get_forecast({latitude: 43.2965, longitude: 5.3698, daily: "temperature_2m_max"})
 
-// 2. Observations naturalistes
+// 2. Nature observations
 search_observations({lat: 43.2965, lng: 5.3698, radius: 20})
 
-// 3. Dashboard combine
-component("stat-card", {label: "Temperature max", value: "26°C", icon: "thermometer"})
-component("stat-card", {label: "Observations recentes", value: "412", icon: "eye"})
+// 3. Combined dashboard
+component("stat-card", {label: "Max temperature", value: "26°C", icon: "thermometer"})
+component("stat-card", {label: "Recent observations", value: "412", icon: "eye"})
 component("map", {center: [43.2965, 5.3698], markers: observations})
 component("chart", {type: "line", labels: dates, datasets: [{label: "Temperature", data: temps}, {label: "Observations", data: obsCounts}]})
 ```
 
-## Erreurs courantes
+## Common mistakes
 
-- **Faire plus de 3 appels DATA sans render intermediaire** : l'utilisateur attend des resultats visuels entre les etapes
-- **Ne pas expliquer quels serveurs sont utilises** : toujours afficher les sources avec un `kv`
-- **Melanger les donnees sans structure** : les resultats combines doivent etre dans un tableau ou une carte coherente, pas un dump brut
-- **Oublier de gerer les cas sans correspondance** : si le geocoding ne trouve rien, ou si iNaturalist n'a pas d'observations dans la zone, l'afficher clairement
+- **Making more than 3 DATA calls without an intermediate render**: the user expects visual results between steps
+- **Not explaining which servers are being used**: always display the sources with a `kv`
+- **Mixing data without structure**: combined results must be in a coherent table or map, not a raw dump
+- **Forgetting to handle no-match cases**: if geocoding finds nothing, or if iNaturalist has no observations in the area, display that clearly

package/src/recipes/dashboard-kpi.md

@@ -1,78 +1,78 @@
 ---
-id: composer-tableau-de-bord-kpi-depuis-metriques-agregees
-name: Composer un tableau de bord KPI a partir de metriques agregees
+id: compose-kpi-dashboard-from-aggregated-metrics
+name: Compose a KPI dashboard from aggregated metrics
 components_used: [stat-card, chart, table, kv]
-when: les donnees MCP contiennent des metriques numeriques, compteurs, totaux, pourcentages ou statistiques agregees qui meritent un tableau de bord visuel
+when: MCP data contains numeric metrics, counters, totals, percentages, or aggregated statistics that warrant a visual dashboard
 servers: []
 layout:
   type: grid
   columns: 3
-  arrangement: stat-cards en ligne, chart + table en dessous
+  arrangement: stat-cards in a row, chart + table below
 ---
 
-## Quand utiliser
+## When to use
 
-Les resultats MCP contiennent des metriques numeriques qu'il faut presenter de facon synthetique. Cette recette est transversale : elle s'applique quel que soit le serveur MCP, des lors que les donnees contiennent :
-- Des totaux, compteurs ou moyennes (revenus, nombre d'articles, participation, etc.)
-- Des pourcentages ou ratios (taux de churn, participation electorale, etc.)
-- Des series temporelles de metriques (evolution mois par mois, trimestre par trimestre)
-- Des ventilations par categorie (par groupe politique, par pays, par type d'objet)
+MCP results contain numeric metrics that need to be presented concisely. This recipe is cross-cutting: it applies regardless of the MCP server, as long as the data contains:
+- Totals, counters, or averages (revenue, article count, participation, etc.)
+- Percentages or ratios (churn rate, voter turnout, etc.)
+- Time series of metrics (month-over-month, quarter-over-quarter trends)
+- Breakdowns by category (by political group, by country, by object type)
 
-## Comment
+## How to use
 
-1. **Identifier les 3-5 KPIs principaux** dans les donnees retournees par le serveur MCP
-2. **Afficher chaque KPI en stat-card** avec formatage soigne :
+1. **Identify the 3–5 main KPIs** in the data returned by the MCP server
+2. **Display each KPI as a stat-card** with clean formatting:
    ```
-   component("stat-card", {label: "Chiffre d'affaires", value: "45 230 EUR", trend: "+12.4%", trendDir: "up", icon: "trending-up"})
+   component("stat-card", {label: "Revenue", value: "45 230 EUR", trend: "+12.4%", trendDir: "up", icon: "trending-up"})
    ```
-   - Toujours formater les nombres : separateurs de milliers, unites, symboles
-   - Ajouter `trend` et `trendDir` si une comparaison est disponible (vs mois precedent, vs annee precedente)
-3. **Si des series temporelles existent**, ajouter un graphique :
+   - Always format numbers: thousands separators, units, symbols
+   - Add `trend` and `trendDir` if a comparison is available (vs. previous month, vs. previous year)
+3. **If time series exist**, add a chart:
    ```
-   component("chart", {type: "bar", labels: ["Q1", "Q2", "Q3", "Q4"], datasets: [{label: "CA", data: [98000, 112000, 128000, 142000]}]})
+   component("chart", {type: "bar", labels: ["Q1", "Q2", "Q3", "Q4"], datasets: [{label: "Revenue", data: [98000, 112000, 128000, 142000]}]})
    ```
-   - "bar" pour des comparaisons entre categories/periodes
-   - "line" pour des evolutions continues
-4. **Si des details tabulaires existent**, ajouter une table :
+   - "bar" for comparisons between categories/periods
+   - "line" for continuous trends
+4. **If tabular details exist**, add a table:
    ```
-   component("table", {columns: ["Categorie", "Valeur", "Evolution"], rows: [...]})
+   component("table", {columns: ["Category", "Value", "Change"], rows: [...]})
    ```
-5. **Pour les metadonnees complementaires**, utiliser kv :
+5. **For supplementary metadata**, use kv:
    ```
-   component("kv", {pairs: [["Source", "data.gouv.fr"], ["Derniere mise a jour", "2026-04-01"], ["Periode", "T1 2026"]]})
+   component("kv", {pairs: [["Source", "data.gouv.fr"], ["Last updated", "2026-04-01"], ["Period", "Q1 2026"]]})
    ```
 
-## Exemples
+## Examples
 
-### Dashboard parlementaire (Tricoteuses)
+### Parliamentary dashboard (Tricoteuses)
 ```
-// Apres query_sql sur les scrutins de la legislature
-component("stat-card", {label: "Scrutins publics", value: "1 247", icon: "vote"})
-component("stat-card", {label: "Amendements deposes", value: "42 831", icon: "file-text"})
-component("stat-card", {label: "Participation moyenne", value: "61.3%", trend: "-2.1%", trendDir: "down"})
-component("chart", {type: "bar", labels: mois, datasets: [{label: "Scrutins/mois", data: counts}]})
-component("table", {columns: ["Groupe", "Amendements", "Adoptes", "Taux"], rows: groupStats})
+// After query_sql on votes for the legislature
+component("stat-card", {label: "Public votes", value: "1 247", icon: "vote"})
+component("stat-card", {label: "Amendments filed", value: "42 831", icon: "file-text"})
+component("stat-card", {label: "Average participation", value: "61.3%", trend: "-2.1%", trendDir: "down"})
+component("chart", {type: "bar", labels: months, datasets: [{label: "Votes/month", data: counts}]})
+component("table", {columns: ["Group", "Amendments", "Adopted", "Rate"], rows: groupStats})
 ```
 
-### Dashboard biodiversite (iNaturalist)
+### Biodiversity dashboard (iNaturalist)
 ```
 component("stat-card", {label: "Observations", value: "3 412", icon: "eye"})
-component("stat-card", {label: "Especes uniques", value: "287", icon: "leaf"})
-component("stat-card", {label: "Observateurs", value: "156", icon: "users"})
-component("chart", {type: "line", labels: dates, datasets: [{label: "Observations/jour", data: dailyCounts}]})
+component("stat-card", {label: "Unique species", value: "287", icon: "leaf"})
+component("stat-card", {label: "Observers", value: "156", icon: "users"})
+component("chart", {type: "line", labels: dates, datasets: [{label: "Observations/day", data: dailyCounts}]})
 ```
 
-### Dashboard actualites (Hacker News)
+### News dashboard (Hacker News)
 ```
 component("stat-card", {label: "Top stories", value: "500", icon: "newspaper"})
-component("stat-card", {label: "Score moyen", value: "142", icon: "trending-up"})
-component("stat-card", {label: "Commentaires moyen", value: "87", icon: "message-circle"})
-component("table", {columns: ["Rang", "Titre", "Score", "Commentaires"], rows: topStories})
+component("stat-card", {label: "Average score", value: "142", icon: "trending-up"})
+component("stat-card", {label: "Average comments", value: "87", icon: "message-circle"})
+component("table", {columns: ["Rank", "Title", "Score", "Comments"], rows: topStories})
 ```
 
-## Erreurs courantes
+## Common mistakes
 
-- **Trop de stat-cards** : au-dela de 5, basculer vers un `kv` ou un `table` pour les metriques secondaires
-- **Nombres non formates** : afficher "45230" au lieu de "45 230" nuit a la lisibilite
-- **Oublier les unites** : "45 230" ne signifie rien sans "EUR", "%", "observations", etc.
-- **Graphique sans contexte** : toujours accompagner un graphique de stat-cards qui donnent les chiffres cles instantanement
+- **Too many stat-cards**: beyond 5, switch to a `kv` or `table` for secondary metrics
+- **Unformatted numbers**: displaying "45230" instead of "45 230" hurts readability
+- **Missing units**: "45 230" means nothing without "EUR", "%", "observations", etc.
+- **Chart without context**: always accompany a chart with stat-cards that surface key figures instantly

package/src/recipes/explorer-dossiers-legislatifs-parcours-texte.md

@@ -1,42 +1,42 @@
 ---
-id: explorer-dossiers-legislatifs-parcours-texte
-name: Explorer les dossiers legislatifs et le parcours d'un texte entre Assemblee et Senat
+id: explore-legislative-files-text-journey
+name: Explore legislative files and the journey of a text between the Assembly and the Senate
 components_used: [timeline, table, kv, stat-card]
-when: l'utilisateur demande le parcours d'un projet ou proposition de loi, la navette parlementaire, les lectures successives, ou le suivi d'un dossier legislatif
+when: the user asks about the journey of a bill or legislative proposal, the parliamentary shuttle, successive readings, or the tracking of a legislative file
 servers: [tricoteuses]
 layout:
   type: grid
   columns: 2
-  arrangement: timeline pleine largeur en haut, stats + table en dessous
+  arrangement: full-width timeline at top, stats + table below
 ---
 
-## Quand utiliser
+## When to use
 
-L'utilisateur s'interesse au parcours d'un texte de loi a travers les institutions :
-- "Ou en est le projet de loi sur l'immigration ?"
-- "Montre-moi la navette parlementaire de la reforme des retraites"
-- "Combien de lectures a subi ce texte ?"
-- "Quels amendements ont ete adoptes en commission ?"
+The user is interested in the journey of a bill through the institutions:
+- "Where does the immigration bill currently stand?"
+- "Show me the parliamentary shuttle for the pension reform"
+- "How many readings did this text go through?"
+- "Which amendments were adopted in committee?"
 
-Le serveur Tricoteuses contient les dossiers legislatifs avec leurs etapes : depot, renvoi en commission, discussion en seance, vote, navette, promulgation.
+The Tricoteuses server contains legislative files with their stages: filing, referral to committee, floor debate, vote, shuttle, promulgation.
 
-## Comment
+## How to use
 
-1. **Rechercher le dossier legislatif** :
+1. **Search for the legislative file**:
    ```
    query_sql({sql: "SELECT * FROM assemblee.dossiers WHERE titre ILIKE '%immigration%' ORDER BY date_depot DESC LIMIT 5"})
    ```
-   Ou via les recettes Tricoteuses :
+   Or via Tricoteuses recipes:
    ```
    search_recipes({query: "dossier legislatif parcours"})
    ```
 
-2. **Recuperer les etapes du parcours** :
+2. **Retrieve the journey stages**:
    ```
    query_sql({sql: "SELECT etape, chambre, date, resultat FROM assemblee.dossier_etapes WHERE dossier_id = $id ORDER BY date"})
    ```
 
-3. **Afficher la timeline du parcours** :
+3. **Display the journey timeline**:
    ```
    component("timeline", {
      events: etapes.map(e => ({
@@ -48,68 +48,68 @@ Le serveur Tricoteuses contient les dossiers legislatifs avec leurs etapes : dep
    })
    ```
 
-4. **Statistiques du dossier** en stat-cards :
+4. **File statistics** in stat-cards:
    ```
-   component("stat-card", {label: "Lectures", value: "3", icon: "book-open"})
-   component("stat-card", {label: "Amendements deposes", value: "1 247", icon: "file-text"})
-   component("stat-card", {label: "Amendements adoptes", value: "312", icon: "check"})
-   component("stat-card", {label: "Duree totale", value: "14 mois", icon: "clock"})
+   component("stat-card", {label: "Readings", value: "3", icon: "book-open"})
+   component("stat-card", {label: "Amendments filed", value: "1 247", icon: "file-text"})
+   component("stat-card", {label: "Amendments adopted", value: "312", icon: "check"})
+   component("stat-card", {label: "Total duration", value: "14 months", icon: "clock"})
    ```
 
-5. **Details des amendements par etape** en table :
+5. **Amendment details by stage** in a table:
    ```
    component("table", {
-     columns: ["Etape", "Chambre", "Amendements deposes", "Adoptes", "Rejetes"],
+     columns: ["Stage", "Chamber", "Amendments filed", "Adopted", "Rejected"],
      rows: etapeStats
    })
    ```
 
-6. **Metadonnees du dossier** en kv :
+6. **File metadata** in kv:
    ```
    component("kv", {pairs: [
-     ["Titre", dossier.titre],
+     ["Title", dossier.titre],
      ["Nature", "Projet de loi"],
-     ["Auteur", "Gouvernement"],
-     ["Date de depot", dossier.date_depot],
-     ["Etat actuel", dossier.etat],
+     ["Author", "Gouvernement"],
+     ["Filing date", dossier.date_depot],
+     ["Current status", dossier.etat],
      ["Source", "Tricoteuses"]
    ]})
    ```
 
-## Exemples
+## Examples
 
-### Parcours complet d'un texte
+### Complete text journey
 ```
-// 1. Recuperer le dossier
+// 1. Retrieve the file
 query_sql({sql: "SELECT id, titre, date_depot, etat FROM assemblee.dossiers WHERE titre ILIKE '%retraites%2023%' LIMIT 1"})
 
-// 2. Etapes
+// 2. Stages
 query_sql({sql: "SELECT * FROM assemblee.dossier_etapes WHERE dossier_id = $id ORDER BY date"})
 
-// 3. Amendements par etape
+// 3. Amendments by stage
 query_sql({sql: "SELECT etape, COUNT(*) as total, COUNT(*) FILTER (WHERE sort='Adopte') as adoptes FROM assemblee.amendements WHERE dossier_id = $id GROUP BY etape"})
 
-// 4. Rendu
-component("kv", {pairs: [["Dossier", titre], ["Etat", etat]]})
+// 4. Render
+component("kv", {pairs: [["File", titre], ["Status", etat]]})
 component("timeline", {events: etapes})
-component("stat-card", {label: "Total amendements", value: totalAmendements})
-component("stat-card", {label: "Adoptes", value: totalAdoptes})
-component("table", {columns: ["Etape", "Deposes", "Adoptes", "Taux"], rows: etapeStats})
+component("stat-card", {label: "Total amendments", value: totalAmendements})
+component("stat-card", {label: "Adopted", value: totalAdoptes})
+component("table", {columns: ["Stage", "Filed", "Adopted", "Rate"], rows: etapeStats})
 ```
 
-### Comparaison entre chambres
+### Comparison between chambers
 ```
-// Amendements par chambre
+// Amendments by chamber
 query_sql({sql: "SELECT chambre, COUNT(*) as deposes, COUNT(*) FILTER (WHERE sort='Adopte') as adoptes FROM assemblee.amendements WHERE dossier_id = $id GROUP BY chambre"})
 
-component("stat-card", {label: "Assemblee — Adoptes", value: an_adoptes + "/" + an_deposes})
-component("stat-card", {label: "Senat — Adoptes", value: senat_adoptes + "/" + senat_deposes})
-component("chart", {type: "bar", labels: ["Assemblee", "Senat"], datasets: [{label: "Deposes", data: [an_deposes, senat_deposes]}, {label: "Adoptes", data: [an_adoptes, senat_adoptes]}]})
+component("stat-card", {label: "Assembly — Adopted", value: an_adoptes + "/" + an_deposes})
+component("stat-card", {label: "Senate — Adopted", value: senat_adoptes + "/" + senat_deposes})
+component("chart", {type: "bar", labels: ["Assemblee", "Senat"], datasets: [{label: "Filed", data: [an_deposes, senat_deposes]}, {label: "Adopted", data: [an_adoptes, senat_adoptes]}]})
 ```
 
-## Erreurs courantes
+## Common mistakes
 
-- **Confondre projet et proposition de loi** : un projet vient du gouvernement, une proposition vient d'un parlementaire — verifier le champ `nature`
-- **Ne pas suivre la navette** : un texte peut faire plusieurs allers-retours entre Assemblee et Senat — afficher TOUTES les etapes
-- **Oublier la CMP** : la Commission Mixte Paritaire est une etape cruciale entre les deux chambres, ne pas l'omettre dans la timeline
-- **Timeline non chronologique** : toujours trier les etapes par date croissante
+- **Confusing bill types**: a "projet de loi" comes from the government, a "proposition de loi" comes from a parliamentary member — check the `nature` field
+- **Not following the shuttle**: a text can make several back-and-forth trips between the Assembly and the Senate — display ALL stages
+- **Forgetting the CMP**: the Commission Mixte Paritaire (Joint Committee) is a crucial stage between the two chambers — do not omit it from the timeline
+- **Non-chronological timeline**: always sort stages by ascending date

package/src/recipes/gallery-images.md

@@ -1,8 +1,8 @@
 ---
-id: afficher-galerie-images-depuis-urls-mcp
-name: Afficher une galerie d'images a partir d'URLs retournees par un serveur MCP
+id: display-image-gallery-from-mcp-urls
+name: Display an image gallery from URLs returned by an MCP server
 components_used: [gallery, carousel, cards]
-when: les donnees MCP contiennent des champs URL pointant vers des images (jpg, png, webp, svg) comme hdurl, primaryImage, image_url, photos[].url, ou tout champ similaire
+when: MCP data contains URL fields pointing to images (jpg, png, webp, svg) such as hdurl, primaryImage, image_url, photos[].url, or any similar field
 servers: [nasa, metmuseum, inaturalist]
 layout:
   type: grid
@@ -11,32 +11,32 @@ interactions:
   - source: gallery, target: lightbox, event: click, action: zoom
 ---
 
-## Quand utiliser
+## When to use
 
-Les resultats d'un appel MCP contiennent des URLs d'images reelles. Cela inclut :
-- **NASA** : champ `hdurl` ou `url` dans les reponses APOD, Earth, Mars Rover Photos
-- **Met Museum** : champ `primaryImage` ou `primaryImageSmall` apres `get_object`
-- **iNaturalist** : champ `photos[].url` dans les observations
+The results of an MCP call contain real image URLs. This includes:
+- **NASA**: `hdurl` or `url` field in APOD, Earth, and Mars Rover Photos responses
+- **Met Museum**: `primaryImage` or `primaryImageSmall` field after `get_object`
+- **iNaturalist**: `photos[].url` field in observations
 
-La recette s'applique des qu'au moins 2 images sont disponibles dans les donnees. Pour une seule image, preferer un composant `card` avec l'image en en-tete.
+This recipe applies whenever at least 2 images are available in the data. For a single image, prefer a `card` component with the image as a header.
 
-## Comment
+## How to use
 
-1. **Appeler l'outil DATA** du serveur MCP pour recuperer les donnees contenant les images
-2. **Extraire les URLs reelles** depuis les resultats — ne JAMAIS inventer d'URLs placeholder
-3. **Verifier que les URLs sont valides** : elles doivent pointer vers des domaines connus (apod.nasa.gov, images.metmuseum.org, inaturalist-open-data.s3.amazonaws.com, etc.)
-4. **Choisir le composant** :
-   - 2-5 images : `component("gallery", {images: [{src, alt, caption?}]})`
-   - 6+ images : `component("carousel", {images: [{src, alt}]})` pour eviter une page trop longue
-   - Images avec metadonnees riches : `component("cards", {items: [{title, image, subtitle, body}]})`
-5. **Toujours fournir un `alt` descriptif** pour chaque image (titre de l'oeuvre, nom de l'espece, titre APOD)
-6. **Ajouter un titre contextuel** avant la galerie avec `component("text", {content: "..."})`
+1. **Call the DATA tool** from the MCP server to retrieve the data containing the images
+2. **Extract the real URLs** from the results — NEVER invent placeholder URLs
+3. **Verify that the URLs are valid**: they must point to known domains (apod.nasa.gov, images.metmuseum.org, inaturalist-open-data.s3.amazonaws.com, etc.)
+4. **Choose the component**:
+   - 2-5 images: `component("gallery", {images: [{src, alt, caption?}]})`
+   - 6+ images: `component("carousel", {images: [{src, alt}]})` to avoid an overly long page
+   - Images with rich metadata: `component("cards", {items: [{title, image, subtitle, body}]})`
+5. **Always provide a descriptive `alt`** for each image (artwork title, species name, APOD title)
+6. **Add a contextual title** before the gallery with `component("text", {content: "..."})`
 
-## Exemples
+## Examples
 
 ### NASA APOD (Astronomy Picture of the Day)
-Outil : `nasa_apod` ou `nasa_apod_range`
-Reponse type : `{hdurl: "https://apod.nasa.gov/apod/image/2401/...", title: "Horsehead Nebula", explanation: "..."}`
+Tool: `nasa_apod` or `nasa_apod_range`
+Typical response: `{hdurl: "https://apod.nasa.gov/apod/image/2401/...", title: "Horsehead Nebula", explanation: "..."}`
 
 ```
 component("gallery", {
@@ -48,9 +48,9 @@ component("gallery", {
 })
 ```
 
-### Met Museum — Recherche d'oeuvres
-Etape 1 : `search_objects({query: "impressionism sunflower"})` → liste d'IDs
-Etape 2 : pour chaque ID, `get_object({objectID: id})` → `{primaryImage, title, artistDisplayName}`
+### Met Museum — Artwork search
+Step 1: `search_objects({query: "impressionism sunflower"})` → list of IDs
+Step 2: for each ID, `get_object({objectID: id})` → `{primaryImage, title, artistDisplayName}`
 
 ```
 component("gallery", {
@@ -62,9 +62,9 @@ component("gallery", {
 })
 ```
 
-### iNaturalist — Observations avec photos
-Outil : `search_observations({taxon_name: "Parus major", lat: 48.85, lng: 2.35, radius: 10})`
-Reponse type : `{photos: [{url: "..."}], species_guess: "Mesange charbonniere", place_guess: "Paris"}`
+### iNaturalist — Observations with photos
+Tool: `search_observations({taxon_name: "Parus major", lat: 48.85, lng: 2.35, radius: 10})`
+Typical response: `{photos: [{url: "..."}], species_guess: "Mesange charbonniere", place_guess: "Paris"}`
 
 ```
 component("gallery", {
@@ -78,9 +78,9 @@ component("gallery", {
 })
 ```
 
-## Erreurs courantes
+## Common mistakes
 
-- **Inventer des URLs placeholder** (`https://example.com/image.jpg`, `via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`) — strictement INTERDIT. Si aucune image réelle n'est retournée par l'API, ne PAS afficher de galerie.
-- **Oublier de verifier** que le champ image existe dans les donnees retournees (certains objets Met Museum n'ont pas de `primaryImage`)
-- **Utiliser `text` pour afficher des URLs** au lieu de `gallery` — les images doivent etre rendues visuellement
-- **Ne pas adapter la taille** : iNaturalist retourne des thumbnails "square" par defaut, remplacer par "medium" ou "large" dans l'URL
+- **Inventing placeholder URLs** (`https://example.com/image.jpg`, `via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`) — strictly FORBIDDEN. If no real image is returned by the API, do NOT display a gallery.
+- **Forgetting to check** that the image field exists in the returned data (some Met Museum objects have no `primaryImage`)
+- **Using `text` to display URLs** instead of `gallery` — images must be rendered visually
+- **Not adapting the size**: iNaturalist returns "square" thumbnails by default — replace with "medium" or "large" in the URL