MCP-esimerkit

1. Luo ja esikatsele näyttö

Yleisin työnkulku: luo näyttö (tiedosto luodaan samassa vaiheessa) ja katso sitten tulos.

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]

Jätä fileId pois, jolloin uusi tiedosto luodaan automaattisesti. Anna olemassa oleva fileId lisätäksesi näyttöjä siihen tiedostoon. Kehote AI-avustajallesi:

Luo Flowstep-suunnitelma: mobiilikirjautumisnäkymä kehittäjätyökalulle, jossa on sähköposti/salasana-kentät ja Google SSO -painike tummassa teemassa. Näytä sitten kuva.

2. Visualisoi React-komponentti

Lataa .jsx- tai .tsx-tiedosto liitteenä ja pyydä Flowsteppiä luomaan vastaava suunnitelma. Flowstep lukee lähdekoodin ja tuottaa näytön. Sovellusta ei tarvitse ajaa.

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]

Jos lähdetiedosto on yli 64 000 merkkiä pitkä, käytä sen sijaan upload-attachment-työkalua parametreilla mimeType ja fileName ja suorita palautettu uploadCommand. Katso upload-attachment. Kehote AI-avustajallesi:

Lue src/components/settings/ApiKeys.tsx, lataa se liitteenä ja luo Flowstep-näyttö, joka vastaa komponentin asettelua. Näytä renderöity kuva.

3. Muokkaa näyttöä iteratiivisesti

Muuta olemassa olevaa näyttöä paikallaan vapaamuotoisilla ohjeilla ja lisää samalla kutsulla uusi näyttö, joka vastaa sitä.

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 listaa kaikki kutsussa rakennetut tai muutetut näytöt, joten kutsu get-screen-image kerran jokaiselle. Jätä viestin viimeinen lause pois, jos haluat muokata vain olemassa olevaa näyttöä. Jos haluat muuttaa vain osan näytöstä, kutsu ensin get-screen-jsx parametrilla "includeIds": true ja anna elementIds-kentässä sen elementin data-id, jonka haluat muuttaa. Koko näytön yhden napsautuksen esiasetusta varten kutsu sen sijaan ai-edit-screen-variant-työkalua, esimerkiksi "operationVariant": "light_theme" tai "different_layout". Kehote AI-avustajallesi:

Vaihda Flowstep-tiedostossani “Login flow” kirjautumisnäkymä tummaan teemaan, lisää “Remember me” -valintaruutu salasanakentän alle ja lisää vastaava unohtuneen salasanan näkymä. Näytä tulokset.

4. Laajenna näyttö koko virtaukseksi

Lisää jatkonäyttöjä olemassa olevaan suunnitelmaan.

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]

Toista vaihe 2 parametrilla operationVariant: "error_state" tai "empty_state" lisätäksesi reunatapauksia kuvaavia näyttöjä, tai parametreilla "web_version" tai "tablet_version" muille alustoille.

operationVariant on pakollinen ai-generate-screen-variant-työkalulle, ja työkalu ottaa tasan yhden screenId:n. Jos haluat lisätä näytön, joka ei ole olemassa olevan näytön muunnelma, käytä ai-design-screens-työkalua fileId:n kanssa.

5. Siirrä näyttö koodiin ja kirjoita muutokset takaisin

Lue näyttö JSX-muodossa, rakenna siitä ja työnnä muokattu JSX takaisin piirtoalustalle. Kaikki tämä onnistuu ilman viestejä.

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]

Jätetyt kentät (name, fidelity, screenType, colorTheme, fragments) säilyttävät nykyiset arvonsa. Jos haluat säilyttää alkuperäisen ja lisätä versiosi sen rinnalle, kutsu replace-screen-jsx-työkalun sijaan add-screen-jsx-työkalua parametreilla screenType ja jsx. Jos haluat näyttää oman kuvasi näytössä, lataa se upload-attachment-työkalulla ja aseta palautettu assetUrl JSX:n img src-kenttään. Katso Kuvat JSX:ssä.

6. Tarkista kiintiösi ennen erätyötä

Tarkista jäljellä oleva kapasiteetti ennen useiden generointien aloittamista. get-plan-details on veloitukseton kutsu.

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

Jos remaining.messages.daily on alhainen, ajasta erätyö suoritettavaksi 00:00 UTC jälkeen, jolloin kiintiö nollautuu.

Aloittaminen

Flowstepin käyttö

Tiimit ja organisaatiot

Vienti ja integraatiot

MCP-palvelin

Laskutus ja tilaukset

Turvallisuus ja tietosuoja

1. Luo ja esikatsele näyttö

2. Visualisoi React-komponentti

3. Muokkaa näyttöä iteratiivisesti

4. Laajenna näyttö koko virtaukseksi

5. Siirrä näyttö koodiin ja kirjoita muutokset takaisin

6. Tarkista kiintiösi ennen erätyötä

​1. Luo ja esikatsele näyttö

​2. Visualisoi React-komponentti

​3. Muokkaa näyttöä iteratiivisesti

​4. Laajenna näyttö koko virtaukseksi

​5. Siirrä näyttö koodiin ja kirjoita muutokset takaisin

​6. Tarkista kiintiösi ennen erätyötä

1. Luo ja esikatsele näyttö

2. Visualisoi React-komponentti

3. Muokkaa näyttöä iteratiivisesti

4. Laajenna näyttö koko virtaukseksi

5. Siirrä näyttö koodiin ja kirjoita muutokset takaisin

6. Tarkista kiintiösi ennen erätyötä