Verbinden Build-Agent Zu einer Abbildung MCP Server

Schließen Sie die Abbildung an Protokollserverkonsole für Modellkontext( MCP)-Server zu Build-Agent Um die Konvertierung von Figma-Designs in Anwendungen der Enterprise-Klasse auf zu beschleunigen ServiceNow AI Platform.

Vorbereitungen

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Abbildung wird verbunden MCP Server zu Build-Agent Aktiviert Build-Agent Dient zum Zugreifen auf Designdaten aus Figma-Dateien. Die Verbindung hilft bei Build-Agent Verstehen Sie das Design und seine Absicht, und ermöglichen Sie es der IT, Anwendungen zu erstellen, die dem Design entsprechen.

Besuchen Sie das Figma-Entwicklerportal, um den Figma-MCP-Server mit zu verbinden Build-Agent. Erstellen Sie eine OAuth-App, um Ihre Client-ID und das geheime Clientgeheimnis abzurufen. Konfigurieren Sie dann ServiceNow IDE Dient zur Verarbeitung des OAuth-Prozesses mit den Anmeldeinformationen.

• Weitere Informationen zu finden Build-Agent Und der Figma MCP-Server, siehe MCP Verbindungen und Build-Agent.
• Für Details zum Herstellen einer Verbindung mit anderen unterstützten Elementen MCP Server, siehe Verbinden Build-Agent An einen unterstützt MCP Server.

Prozedur

1. Konfigurieren Sie eine OAuth-App in Abbildung
2. Konfigurieren Sie den OAuth-Anbieter in ServiceNow IDE
3. Verbinden Sie den Figma MCP-Server mit Build-Agent

   Abbildung : 1. Anwendungsgenerierungs-Workflow mit Abbildung und Build-Agent

   

Konfigurieren Sie eine OAuth-App in Abbildung

Erstellen Sie eine OAuth-Anwendung in Figma, damit der Figma MCP-Server Anwender über OAuth authentifizieren und gewähren kann Build-Agent Zugriff auf Figma-Designs.

Vorbereitungen

Sie müssen über einen Entwicklungs- oder vollständigen Arbeitsplatz für einen Figma Pro-, Organisations- oder Unternehmensplan verfügen.

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Der Figma MCP-Server (Modellkontextprotokoll) verwendet OAuth für die Authentifizierung und macht die Figma-Designdaten für zugänglich Build-Agent Installiert. Dient zum Verbinden des Figma MCP-Servers mit Build-Agent, Sie müssen eine OAuth-App in Abbildung erstellen. Dieser Prozess generiert eine Client-ID und ein geheimes Clientgeheimnis. ServiceNow Verwendet diese Anmeldeinformationen, um den OAuth-Prozess zu initiieren und Anwender mit ihren Figma-Accounts zu authentifizieren.

Prozedur

Schritt 1: Erstellen Sie eine OAuth-Anwendung in Figma, um die Client-ID und das geheime Clientgeheimnis abzurufen.

1. Wechseln Sie zu Figma-Entwicklerseite .
2. Wählen Sie Aus Erstellen Sie eine neue App .
3. Geben Sie die folgenden Informationen in das Formular ein.

   Feld	Beschreibung
   Name	Name für Ihre Anwendung, z. B. ServiceNow-Integration.
   Wählen Sie einen Besitzer für Ihre App aus	Team oder Organisation, das bzw. die die App besitzen muss. Wichtig: Der von Ihnen eingegebene Wert kann nicht geändert werden.

4. Wählen Sie Aus Erstellen Sie eine App .
   Eine Client-ID und ein geheimer Clientschlüssel werden generiert.
5. Speichern Sie die Client-ID und das geheime Clientgeheimnis sicher, da Sie sie für das OAuth-Setup in benötigen ServiceNow IDE.
   Wichtig:

   Sie können das geheime Clientgeheimnis nach dem Schließen dieses Fensters nicht mehr sehen.

6. Wählen Sie Fertig.

Schritt 2: Konfigurieren und veröffentlichen Sie die OAuth-App in Abbildung.

7. Öffnen Sie die von Ihnen erstellte Anwendung.
8. Wahlweise: In Allgemein Laden Sie ein Logo für Ihre App hoch, und geben Sie eine kurze Beschreibung an.
9. In OAuth-Anmeldeinformationen Registerkarte, in Umleitungs-URLs Fügen Sie die folgende URL hinzu: https://<instance name>.service-now.com/oauth_redirect.do . Und ersetzen Sie dann <instance name> Mit ist-Wert ServiceNow Instanzname.
   Der OAuth-Flow funktioniert nur in ServiceNow Instanzen, die in der Liste der Umleitungs-URLs enthalten sind. Stellen Sie sicher, dass Sie dieser Liste alle Instanzen hinzufügen, in denen der OAuth-Flow funktionieren soll.

   Sie können jederzeit eine Umleitungs-URL hinzufügen.

10. Wählen Sie auf der Registerkarte OAuth-Umfänge im Abschnitt MCP die Option aus mcp:Connect Kontrollkästchen.
    Wichtig:

    Wenn der Abschnitt „MCP“ nicht sichtbar ist, wenden Sie sich an Ihren ServiceNow Account-Manager oder ServiceNow Support ( Wenden Sie sich an den ServiceNow-Support ) Zum Aktivieren des MCP-Verbindungsbereichs. Stellen Sie sicher, dass Sie Ihre Client-ID für sie freigeben, damit sie die MCP-Funktion aktivieren können.
11. In Veröffentlichen Registerkarte, stellen Sie sicher, dass Privat Kontrollkästchen ist aktiviert, und wählen Sie dann aus Veröffentlichen .

Konfigurieren Sie den OAuth-Anbieter in ServiceNow IDE

Richten Sie eine OAuth-Anwendungsregistrierung und -Anmeldeinformationen ein, um zu aktivieren ServiceNow IDE Um eine Verbindung zu Ihrer Abbildung herzustellen.

Vorbereitungen

Erforderliche Rolle: Administrator

Prozedur

Schritt 1: Erstellen Sie einen Anwendungsregistrierungsdatensatz.

1. Navigieren Sie in Ihrer ServiceNow-Instanz zu System-OAuth > Applikationsregistrierungan.
2. Wählen Sie Neu.
3. Wählen Sie auf der Seite „Interceptor“ die Option aus Stellen Sie eine Verbindung zu einem externen OAuth-Anbieter her .
4. Füllen Sie das Formular mit den folgenden Details aus.

   Feld	Beschreibung
   Name	Ein eindeutiger Name, z. B. Figma OAuth-Anbieter.
   Client-ID	Client-ID, die Sie aus der Figma-App abgerufen haben.
   Geheimer Clientschlüssel	Geheimer Clientschlüssel, den Sie aus der Figma-App erhalten haben.
   Standardgewährungstyp	Wählen Sie Aus Autorisierungscode Aus der Dropdown-Liste.
   Autorisierungs-URL	https://www.figma.com/oauth.
   Token-URL	https://api.figma.com/v1/oauth/token.
   Umleitungs-URL	Die Umleitungs-URL, die Sie in der Figma-App hinzugefügt haben.
   Anmeldeinformationen senden	Wählen Sie Aus Als Header Für Standardautorisierung .

5. Wählen Sie Absenden.

Schritt 2: Definieren Sie den OAuth-Bereich.

6. Scrollen Sie im gespeicherten Anwendungsregistrierungsdatensatz nach unten zu den zugehörigen Listen.
7. Wählen Sie aus Bereiche der OAuth-Entität Registerkarte.
8. Doppelklicken (oder Tastenkombination verwenden) Fügen Sie eine neue Zeile ein Zum Hinzufügen einer Zeile.
9. Geben Sie in der neuen Zeile die folgenden Werte ein.

   Feld	Beschreibung
   Name	Ein Name, z. B. Figma MCP Connect.
   OAuth-Bereich	Exakter Bereichsname, den Sie in Abbildung (mcp:Connect) definiert haben.

10. Wählen Sie Aktualisieren.
    
    
    

Schritt 3: Konfigurieren Sie das OAuth-Entitätsprofil.

11. Wählen Sie im selben Anwendungsregistrierungsdatensatz aus OAuth-Entitätsprofile Registerkarte.
    
    
    
    Sie sehen ein automatisch erstelltes Standardprofil.
12. Wählen Sie den Profilnamen aus, um den Datensatz zu öffnen.
13. Benennen Sie das Standardprofil in um Figma_Profile .
14. Im Datensatz „OAuth-Entitätsprofil“ unter Bereiche des OAuth-Entitätsprofils Zugehörige Liste, doppelklicken (oder Tastenkombination verwenden) Fügen Sie eine neue Zeile ein .
15. Suchen Sie nach Figma MCP-Verbindung Und wählen Sie es aus.
    
    
    
16. Wählen Sie Speichern.
    Sie werden zurück zum Profildatensatz weitergeleitet.
17. Wählen Sie Aus Aktualisieren Zum Speichern des Profils.
    Das Standardprofil ist mit dem MCP-Bereich verbunden.

Verbinden Sie den Figma MCP-Server mit Build-Agent

Verbinden Sie den Figma MCP-Server (Modellkontextprotokoll) mit Build-Agent Um die Figma-Designs für die Anwendungserstellung zugänglich zu machen.

Vorbereitungen

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Mit der OAuth-Verbindung zwischen eingerichtet ServiceNow Instanz und Abbildung können Sie jetzt verknüpfen Build-Agent An Ihren Figma-Account, um mit der Verwendung des Figma MCP-Servers zu beginnen. Die Build-Agent Innerhalb von ServiceNow IDE Ermöglicht Ihnen das automatische Erstellen und Aktualisieren ServiceNow Anwendungen.

Prozedur

1. Stellen Sie sicher, dass die OAuth-App in Figma konfiguriert ist und dass Sie die Anwendungsregistrierung erstellt haben.
   Tipp:

   Auf ServiceNow IDE, Wechseln Sie zu Alle > System-OAuth > Applikationsregistrierung Dient zum Überprüfen, ob die OAuth-App in Abbildung erstellt und konfiguriert wird.

   Konfigurationsschritte finden Sie unter Konfigurieren Sie eine OAuth-App in Abbildung Und Konfigurieren Sie den OAuth-Anbieter in ServiceNow IDE.

2. Aktivieren Sie den Figma MCP-Server auf ServiceNow IDE:
   1. Ein ServiceNow IDE, Wählen Sie das Zahnradsymbol aus In der unteren linken Ecke, und wählen Sie dann aus Einstellungen .
   2. Suchen Sie nach Build-Agent.
      Alle Build-Agent Einstellungen werden aufgelistet.
   3. Aktivieren Sie den Figma MCP-Server, indem Sie auswählen Build-Agent: Aktivieren Sie MCP-Server Kontrollkästchen.
3. Öffnen Sie Build-Agent Chatbereich.
4. Suchen Sie das MCP-Symbol Oben rechts im Chatbereich, und wählen Sie ihn aus, um die MCP-Serverseite zu öffnen.
5. Wählen Sie Aus Verbinden Um den konfigurierten OAuth-Authentifizierungs-Flow auszulösen.
   Sie werden aufgefordert, sich bei Figma anzumelden und zu autorisieren ServiceNow Anwendung.
6. Nachdem Sie genehmigt haben ServiceNow Verbindungsanforderung, kehren Sie zurück zu Build-Agent Chatbereich.
   Der Status des Figma MCP-Servers ist grün, was angibt, dass er mit Figma verbunden ist und alle verfügbaren Tools aufgelistet sind. Das generierte Token wird in der Tabelle „IDE-Git-Anmeldeinformationen“ auf gespeichert ServiceNow IDE.

Ergebnisse

Sie können jetzt mit dem Figma MCP-Server in natürlicher Sprache über interagieren Build-Agent.

Sie können beispielsweise Aufforderungen verwenden, z. B. „UI-Seite erstellen und <figma link> erstellen“. Die Build-Agent Ruft den Designkontext aus Abbildung ab und erstellt eine Anwendung, die dem Design entspricht.

Wichtig:

Das Ausmaß, in dem die Anwendung am ursprünglichen Design ausgerichtet ist, wird maßgeblich von der Komplexität und der Gesamtstruktur des Designs beeinflusst. Wenn das Design einfach und unkompliziert ist, spiegelt die Anwendung das beabsichtigte Design in der Regel genau wider. Umgekehrt kann die Anwendung erheblich vom ursprünglichen Design abweichen, wenn das Design kompliziert oder vielschichtig ist.

Informationen zum besseren Organisieren Ihrer Figma-Dateien finden Sie unter Strukturieren Sie Ihre Figma-Datei, um die Codierung zu verbessern Und Schreiben Sie effektive Hinweismeldungen, um die KI zu leiten .

Tabelle : 1. Problembehandlung: Build-Agent Probleme

Problem	Beschreibung	Lösung
Fehler bei nicht autorisiertem Zugriff	Der MCP-Server ist manchmal inaktiv, und möglicherweise tritt ein nicht autorisierter Zugriffsfehler auf. Das Problem tritt auf, wenn Figma das Token ablehnt, das nach Abschluss des OAuth-Flows erstellt wurde.	Führen Sie die folgenden Schritte aus, um das Problem zu beheben: Navigieren Sie zu Id-Git-Anmeldeinformationen Tabelle in ServiceNow IDE Und suchen Sie das relevante Token. Wechseln Sie in der Spalte aktiv den Wert von Wahr Bis Falsch Für dieses Token. Kehren Sie zurück zu Build-Agent Chatbereich. Suchen Sie das MCP-Symbol Oben rechts im Chatbereich, und wählen Sie ihn aus, um die MCP-Serverseite zu öffnen. Wählen Sie Aus Verbinden Zum Auslösen des OAuth-Authentifizierungs-Flows.