{"docsConfig":{"$schema":"https://mintlify.com/docs.json","theme":"mint","name":"Webdraw","colors":{"primary":"#16a249","light":"#16a249","dark":"#16a249"},"favicon":"/favicon.svg","logo":{"light":"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/logo/light.svg","dark":"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/logo/dark.svg"},"navbar":{"primary":{"type":"button","label":"Open Webdraw","href":"https://webdraw.com"}},"seo":{"metatags":{"og:image":"https://data.decoassets.com/drawtheweb/9eb34e6f-4b01-42bb-bb7b-b7bc9536e7c9/banner_webdraw.png"},"indexing":"navigable"},"footer":{"socials":{"x":"https://x.com/webdraw_","github":"https://github.com/deco-cx","linkedin":"https://www.linkedin.com/company/webdraw"}},"navigation":{"global":{"anchors":[{"anchor":"Documentation","href":"https://docs.webdraw.com","icon":"book-open-cover"},{"anchor":"Community","href":"https://webdraw.com/discord","icon":"discord"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"webdraw","hasAudioNarration":false,"actualSubdomain":"webdraw","customDomains":["docs.webdraw.com"],"gitSource":{"type":"github","owner":"deco-cx","repo":"webdraw","deployBranch":"main","contentDirectory":"docs","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a20c5d5743c2d338e65d675","collectionId":"b36152ee-7e68-42fe-8fcd-c6b161d6a1ca","schemaVersion":"v2"},"feedback":{"thumbs":false},"entitlements":{},"buildId":"6a20c5d5743c2d338e65d675:success","clientVersion":"0.0.4045","searchFilterCounts":[{"language":"default","tag":"Documentation","count":9},{"language":"default","tag":"Getting Started","count":5},{"language":"default","tag":"Examples","count":2},{"language":"default","tag":"API Reference","count":1},{"language":"default","tag":"API Documentation","count":1},{"language":"default","tag":"Firebase","count":1},{"language":"default","tag":"AI Apps","count":1},{"language":"default","tag":"FAQ","count":1},{"language":"default","tag":"Integrations","count":1}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"examples/how-to-create-image-generation-app","slug":"/examples/how-to-create-image-generation-app","pageMetadata":{"title":"How to create an Image Genaration App","description":"How to use our prompt of Gen Image to generate an app based on it","icon":"","href":"/examples/how-to-create-image-generation-app"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"How to use our prompt of Gen Image to generate an app based on it\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,img:`img`,p:`p`,..._provideComponents(),...props.components},{Heading,Note}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);return _jsxs(_Fragment,{children:[_jsx(Note,{children:_jsxs(_components.p,{children:[`Before you start, make sure you have know how to use prompts.\nIf you haven’t, you can do so `,_jsx(_components.a,{href:`/prompts`,children:`here`}),`.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`step-1-activate-gen-image-and-ai-edit-image-prompt`,children:`Step 1: Activate Gen Image and AI Edit Image Prompt`}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/gen-image/examples-gen-image-first-step.png`,alt:``})}),`\n`,_jsx(Heading,{level:`3`,id:`step-2-write-a-similar-instruction-on-your-canvas`,children:`Step 2: Write a similar instruction on your canvas`}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/gen-image/second-step.png`,alt:``})}),`\n`,_jsx(Heading,{level:`3`,id:`step-3-enjoy`,children:`Step 3: Enjoy!`}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/gen-image/third-step.png`,alt:``})}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/gen-image/final-result.png`,alt:``})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"How to create an Image Genaration App","description":"How to use our prompt of Gen Image to generate an app based on it","icon":"","href":"/examples/how-to-create-image-generation-app"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Step 1: Activate Gen Image and AI Edit Image Prompt","slug":"step-1-activate-gen-image-and-ai-edit-image-prompt","depth":3,"children":[]},{"title":"Step 2: Write a similar instruction on your canvas","slug":"step-2-write-a-similar-instruction-on-your-canvas","depth":3,"children":[]},{"title":"Step 3: Enjoy!","slug":"step-3-enjoy","depth":3,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"webdraw","siteName":"Webdraw","title":"How to create an Image Genaration App - Webdraw","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"originalFileLocation":"examples/how-to-create-image-generation-app.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"How to use our prompt of Gen Image to generate an app based on it\">\u003cmeta data-mint-head name=\"application-name\" content=\"Webdraw\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/_generated/favicon/apple-touch-icon.png?v=3\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/_generated/favicon/favicon-32x32.png?v=3\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/_generated/favicon/favicon-16x16.png?v=3\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/_generated/favicon/favicon.ico?v=3\">\u003cmeta data-mint-head property=\"og:title\" content=\"How to create an Image Genaration App - Webdraw\">\u003cmeta data-mint-head property=\"og:description\" content=\"How to use our prompt of Gen Image to generate an app based on it\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Webdraw\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.webdraw.com/examples/how-to-create-image-generation-app\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://data.decoassets.com/drawtheweb/9eb34e6f-4b01-42bb-bb7b-b7bc9536e7c9/banner_webdraw.png\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"How to create an Image Genaration App - Webdraw\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"How to use our prompt of Gen Image to generate an app based on it\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://data.decoassets.com/drawtheweb/9eb34e6f-4b01-42bb-bb7b-b7bc9536e7c9/banner_webdraw.png\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/_generated/favicon/browserconfig.xml?v=3\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Webdraw\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#16a249\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.webdraw.com/examples/how-to-create-image-generation-app\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/examples/how-to-create-image-generation-app.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.webdraw.com/#organization\",\"name\":\"Webdraw\",\"url\":\"https://docs.webdraw.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintlify.s3.us-west-1.amazonaws.com/webdraw/logo/light.svg\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.webdraw.com#website\",\"name\":\"Webdraw\",\"url\":\"https://docs.webdraw.com\",\"publisher\":{\"@id\":\"https://docs.webdraw.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app#webpage\",\"url\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app\",\"name\":\"How to create an Image Genaration App\",\"description\":\"How to use our prompt of Gen Image to generate an app based on it\",\"isPartOf\":{\"@id\":\"https://docs.webdraw.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Webdraw\",\"item\":\"https://docs.webdraw.com\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create an Image Genaration App\",\"item\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app#article\",\"headline\":\"How to create an Image Genaration App\",\"name\":\"How to create an Image Genaration App\",\"description\":\"How to use our prompt of Gen Image to generate an app based on it\",\"url\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app\",\"mainEntityOfPage\":{\"@id\":\"https://docs.webdraw.com/examples/how-to-create-image-generation-app#webpage\"},\"image\":\"https://data.decoassets.com/drawtheweb/9eb34e6f-4b01-42bb-bb7b-b7bc9536e7c9/banner_webdraw.png\",\"publisher\":{\"@id\":\"https://docs.webdraw.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.webdraw.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Webdraw\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Webdraw","nav":{"global":{"anchors":[{"anchor":"Documentation","href":"https://docs.webdraw.com","icon":"book-open-cover"},{"anchor":"Community","href":"https://webdraw.com/discord","icon":"discord"}]},"tabs":[{"tab":"Documentation","groups":[{"group":"Getting Started","pages":[{"title":"Introduction","href":"/introduction"},{"title":"Using Chat to App","href":"/chat-editor"},{"title":"Remixing an App","mode":"wide","href":"/remixing"},{"title":"Referencing Prompts \u0026 Files","href":"/prompts-files"},{"title":"Using Canvas to App","href":"/canvas-editor"}]},{"group":"Integrations","pages":[{"title":"AI models","icon":"brain","description":null,"href":"/integrations/ai-models"}]},{"group":"Examples","pages":[{"group":"AI Apps","icon":"brain","pages":[{"title":"How to create an Image Genaration App","icon":"","href":"/examples/how-to-create-image-generation-app"}]},{"group":"Firebase","icon":"fire","pages":[{"title":"Login with Google","description":"Learn how to add login with Google using Firebase to your Webdraw App","icon":"google","href":"/examples/firebase-login-with-google"}]}]},{"group":"FAQ","pages":[{"title":"❓ FAQs","href":"/faq"}]}]},{"tab":"API Reference","pages":[{"title":"API Reference","href":"/api-reference/introduction"}]}]},"basePath":"","title":"How to create an Image Genaration App - Webdraw","buildId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","deploymentId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-eHyQ0tlO.js","lightbox-handle-r17bVUz3.js"]}