MCP piemēri

1. Ģenerējiet un priekšskatiet ekrānu

Visbiežāk izmantotā darbplūsma: ģenerējiet ekrānu (fails tiek izveidots tajā pašā solī) un pēc tam apskatiet rezultātu.

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Ja izlaižat fileId, fails tiek izveidots automātiski. Norādiet esošu fileId, lai ekrānus pievienotu šim failam. Uzvedne jūsu AI asistentam:

Ģenerējiet Flowstep dizainu: mobilo pierakstīšanās ekrānu izstrādes rīkam ar e-pasta un paroles laukiem un Google SSO pogu tumšajā motīvā. Pēc tam parādiet man attēlu.

2. Vizualizējiet React komponenti

Augšupielādējiet .jsx vai .tsx failu kā pielikumu un lūdziet Flowstep ģenerēt atbilstošu dizainu. Flowstep nolasa pirmkodu un izveido ekrānu. Nav jāpalaiž lietotne.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. ai-design-screens  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Ja pirmkoda faili ir garāki par 64 000 rakstzīmēm, tā vietā izmantojiet upload-attachment ar mimeType un fileName un izpildiet atgriezto uploadCommand. Skatiet upload-attachment. Uzvedne jūsu AI asistentam:

Izlasiet src/components/settings/ApiKeys.tsx, augšupielādējiet to kā pielikumu un ģenerējiet Flowstep ekrānu, kas atbilst komponentes izkārtojumam. Parādiet man renderēto attēlu.

3. Iterējiet pār ekrānu

Mainiet esošu ekrānu vietā ar brīvas formas norādījumiem, un tajā pašā izsaukumā pievienojiet jaunu ekrānu, kas tam atbilst.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

screenIds uzskaita katru ekrānu, ko izsaukums izveidoja vai mainīja, tāpēc izsauciet get-screen-image katram no tiem vienreiz. Ja vēlaties mainīt tikai esošo ekrānu, izlaidiet ziņojuma pēdējo teikumu. Lai mainītu tikai daļu no ekrāna, vispirms izsauciet get-screen-jsx ar "includeIds": true un nododiet elementIds laukā elementa data-id, ko vēlaties mainīt. Lai veselam ekrānam pielietotu vienu klikšķi priekšiestatījumu, tā vietā izsauciet ai-edit-screen-variant, piemēram, ar "operationVariant": "light_theme" vai "different_layout". Uzvedne jūsu AI asistentam:

Manā Flowstep failā “Login flow” pārslēdziet pierakstīšanās ekrānu uz tumšo režīmu un pievienojiet izvēles rūtiņu “Remember me” zem paroles lauka, kā arī atbilstošu aizmirstas paroles ekrānu. Parādiet man rezultātus.

4. Izvērsiet ekrānu līdz pilnai plūsmai

Pievienojiet turpmākos ekrānus esošam dizainam.

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

3. get-screen-image            { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                               → [inline PNG]

Atkārtojiet 2. soli ar operationVariant: "error_state" vai "empty_state", lai pievienotu malas gadījumu ekrānus, vai ar "web_version" vai "tablet_version" citām platformām.

operationVariant ir obligāts ai-generate-screen-variant rīkam, un rīks pieņem tieši vienu screenId. Lai pievienotu ekrānu, kas nav esoša ekrāna variants, izmantojiet ai-design-screens ar fileId.

5. Nododiet ekrānu savai kodu bāzei un pēc tam rakstiet izmaiņas atpakaļ

Nolasiet ekrānu kā JSX, veidojiet no tā un nosūtiet rediģēto JSX atpakaļ audeklam, un tas viss notiek bez ziņojumu izmantošanas.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

Izlaistie lauki (name, fidelity, screenType, colorTheme, fragments) saglabā savas pašreizējās vērtības. Lai saglabātu oriģinālu un blakus tam pievienotu savu versiju, izsauciet add-screen-jsx ar screenType un jsx, nevis replace-screen-jsx. Lai parādītu savu attēlu ekrānā, augšupielādējiet to ar upload-attachment un ievietojiet atgriezto assetUrl savā JSX img src. Skatiet Attēli JSX.

6. Pārbaudiet savu limitu pirms partijas uzdevuma

Pārbaudiet atlikušo jaudu, pirms sākat vairākas ģenerācijas. get-plan-details izsaukums ir bez maksas.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

Ja remaining.messages.daily ir zems, ieplānojiet partiju pēc plkst. 00:00 UTC, kad tas tiek atiestatīts.

Darba sākšana

Flowstep lietošana

Komandas un organizācijas

Eksports un integrācijas

MCP serveris

Norēķini un plāni

Drošība un privātums

1. Ģenerējiet un priekšskatiet ekrānu

2. Vizualizējiet React komponenti

3. Iterējiet pār ekrānu

4. Izvērsiet ekrānu līdz pilnai plūsmai

5. Nododiet ekrānu savai kodu bāzei un pēc tam rakstiet izmaiņas atpakaļ

6. Pārbaudiet savu limitu pirms partijas uzdevuma

​1. Ģenerējiet un priekšskatiet ekrānu

​2. Vizualizējiet React komponenti

​3. Iterējiet pār ekrānu

​4. Izvērsiet ekrānu līdz pilnai plūsmai

​5. Nododiet ekrānu savai kodu bāzei un pēc tam rakstiet izmaiņas atpakaļ

​6. Pārbaudiet savu limitu pirms partijas uzdevuma

1. Ģenerējiet un priekšskatiet ekrānu

2. Vizualizējiet React komponenti

3. Iterējiet pār ekrānu

4. Izvērsiet ekrānu līdz pilnai plūsmai

5. Nododiet ekrānu savai kodu bāzei un pēc tam rakstiet izmaiņas atpakaļ

6. Pārbaudiet savu limitu pirms partijas uzdevuma