🧠🥷Comment faire la génération d'images et l'édition de MCP (Gemini API + cline et curseur)

DEV - 04/05
Intro Hello! Je suis un développeur Web Ninja. Salut! 🥷 Bien que je jouais avec ...

Introduction

Bonjour! Je suis un développeur Web Ninja. Salut! 🥷

Bien que j'ai joué avec l'étude du MCP ces derniers temps. ↓ 🧠🥷Comment pour faire de l'Avatar 2 contrôlé par AI (Vroid MCP + Cline et Cursor + Unity) 🧠🥷Comment pour faire du jeu ninja cool (Unity MCP + Blender MCP (Cline et Cursor)) 🧠🥷Comment pour faire du ninja frais (Blender MCP (Cline et Cursor))) pour faire

J'ai fait une génération d'image et édition d'application Web la dernière fois. ↓ 🧠🥷gemini API 2 (génération d'images et édition (gratuit et rapide)), donc cette fois, je changerai l'application Web en MCP. D'ACCORD! Commençons! 🚀

Contour du système

Ce système a une structure simple à trois couches. Cline ou curseur → MCP → Next.js Application Web 1️⃣ La pièce Cline ou Cursor enverra l'instruction à MCP. 2️⃣ La pièce MCP relayera les instructions de l'application Web suivante.js. 3️⃣ Next.js L'application Web appellera l'API Gemini et générera ou modifiera une image, et l'affichera sur le navigateur.

Comment définir l'application Web suivante.js

Le code diffère de la dernière fois, car cette fois MCP est utilisé. 1 tableau

2️⃣ Faire un projet Next.js

npx create-next-app @ dernier
Entrez le mode de sortie en mode plein écran

https://nextjs.org/docs/app/getting-started/installation

3️⃣ Installez la bibliothèque API Gemini

NPM Install @ Google / Genai
Entrez le mode de sortie en mode plein écran

4️⃣ Définissez le code des codes de Frontend (app / page.tsx)

"Utiliser le client"; Importer React, {UseState, useEffecte} à partir de "React"; Exportation default function homepage () {const [generateImage, setGereateImage] = UseState (""); const [editImage, seteDItImage] = UseState (""); useEFFECT (() => {Async Function generateImage () {try {const ° réponse = wait fetch ("/ api / generate-iMage"); const data = wait réponse.json (); if (data.imageUrl) {setGereateReMage (data.imagerl);}} catch (error) {console. EDIDIMAGE () {Try {const Response = Await Fetch (/ api / edit-image "); const Data = Await Response.json...
[Courte citation de 8% de l'article original]