{"id":8752,"date":"2024-09-19T14:00:17","date_gmt":"2024-09-19T14:00:17","guid":{"rendered":"https:\/\/tup.kxe.temporary.site\/how-to-build-interactive-applications-with-generative-ai\/"},"modified":"2024-09-19T14:00:17","modified_gmt":"2024-09-19T14:00:17","slug":"how-to-build-interactive-applications-with-generative-ai","status":"publish","type":"post","link":"https:\/\/okdesign.ca\/fr\/how-to-build-interactive-applications-with-generative-ai\/","title":{"rendered":"How to build interactive applications with generative AI"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p>One of the most powerful things about generative AI is how quickly you can turn ideas into reality. After watching a video from my friend <a rel=\"nofollow noopener\" href=\"https:\/\/www.linkedin.com\/in\/shawnkanungo\/\" target=\"_blank\">Shawn Kanungo<\/a>, I was inspired to create a series of interactive marketing calculators designed to help marketers quickly calculate common campaign metrics. Think Bankrate mortgage calculators, but for marketers.\u00a0<\/p>\n<p>Keep reading to learn how I used a combination of spreadsheets and generative AI to create <a rel=\"nofollow noopener\" href=\"https:\/\/thirddoormedia.com\/marketing-tools\/\" target=\"_blank\">fully functioning calculators<\/a>. In this article, I\u2019ll walk you through creating a Lead Gen Calculator for SaaS marketers.\u00a0<\/p>\n<p>Before we jump in, it\u2019s worth noting that my background is in graphic design and marketing strategy. I\u2019m not a coder.\u00a0<\/p>\n<h2 class=\"wp-block-heading\">Creating the base marketing calculators<\/h2>\n<p>I started by building the calculators in a spreadsheet, just to make sure the math worked as a good ol\u2019 sanity check. Once the calculators were working, I pasted one into ChatGPT-4.0 mini to build the baseline code. It\u2019s worth noting that I quite literally pasted in the rows and columns. Yea\u2026 really.\u00a0<\/p>\n<p>That\u2019s when the <em>real<\/em> fun started.<\/p>\n<p>Here\u2019s the part of the spreadsheet for the lead gen calculator that I built to make sure the math worked correctly and to get the formulas:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" alt=\"Lead gen calculator spreadsheet.\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeWRcvsA-tKwcgFoZwCbbpN2BXFHKo1PEigakkK8d4X6WbUC8WT26FwR3jZh2x0aDhqTVKSA4_wWhREemoWmcTz82cfIQ_rAyB6FM8F8rqYWBydaPUa1hWdrff72HrulXoDPdzFUSYM4X3jVji4zAPV1Rtk?key=dxq0bdHXwvjNn2uQmgVWFw\"\/><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeWRcvsA-tKwcgFoZwCbbpN2BXFHKo1PEigakkK8d4X6WbUC8WT26FwR3jZh2x0aDhqTVKSA4_wWhREemoWmcTz82cfIQ_rAyB6FM8F8rqYWBydaPUa1hWdrff72HrulXoDPdzFUSYM4X3jVji4zAPV1Rtk?key=dxq0bdHXwvjNn2uQmgVWFw\" alt=\"Lead gen calculator spreadsheet.\"\/><\/figure>\n<\/div>\n<p><strong><em>Dig deeper: <a rel=\"nofollow\" href=\"https:\/\/martech.org\/how-to-use-chatgpt-to-simulate-martech-tools-and-marketing-strategy\/\">How to use ChatGPT to simulate martech tools and marketing strategy<\/a><\/em><\/strong><\/p>\n<h2 class=\"wp-block-heading\" id=\"h-how-to-talk-to-developers-who-aren-t-human\">How to talk to developers who aren\u2019t human<\/h2>\n<p>It\u2019s worth saying that this exercise was not a single, simple prompt like, \u201cCreate a calculator.\u201d I really had to lean into coaxing ChatGPT to get what I wanted. I ran into more than a few dead ends, token limits and lots of confusion. And yes, I could have done this in Claude, which apparently is better at this sort of thing, but here we are.<\/p>\n<p>Here\u2019s one example: I had to learn to give the AI enough context and information to get what I wanted. When ChatGPT wasn\u2019t giving me what I wanted, I found myself chatting back with replies like this:<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The point of this exercise is to create a simple PLG calculator designed for marketers to get a sense of how to scale up their marketing efforts. Let\u2019s start again fresh and think through the marketing elements and not worry about monthly churn rates or getting deep into retention since this is about marketing and driving trials.<\/p>\n<\/blockquote>\n<p>I found chatting with the AI in this manner both progressed the quality of the responses I was getting and forced me to clarify my thinking, precisely as I would with a human developer.\u00a0<\/p>\n<p>The AI provided solid feedback, and thus began and continued my dance, back and forth on requirements and coding, with each version giving me a few steps forward before retreating again and again.<\/p>\n<p>At one point, the math stopped mathing, and so, using my spreadsheet as a reference, I was able to get the AI back on track:<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Explain to me how if the churn rate is 100% why doesn\u2019t this go to 0?<\/p>\n<\/blockquote>\n<p>The AI understood and fixed the math problem, though I\u2019m unsure exactly why it made the mistake in the first place. Oh, silly LLM.<\/p>\n<p>It\u2019s important to remember that chatbots have <a rel=\"nofollow noopener\" href=\"https:\/\/help.openai.com\/en\/articles\/4936856-what-are-tokens-and-how-to-count-them\" target=\"_blank\">token limits<\/a>, which is effectively how much the chatbot can remember about your given conversation. An oversimplification: You can tell when you hit token limits when you feel that the bot is no longer listening to you or can\u2019t recall things from earlier in your chat.<\/p>\n<p>For me, the way around this was to start a fresh chat to reset the token limits. I\u2019d paste the latest working code and ask the bot for additional changes and code checks.<\/p>\n<p>Through rapid iteration, testing and tons of trial and error, the calculator worked perfectly.\u00a0<\/p>\n<h2 class=\"wp-block-heading\">Faster, better, smarter LLM models improve the code base<\/h2>\n<p>As I was finalizing and preparing landing pages for each calculator, OpenAI released the 01-preview model, which gave me an idea. In a new chat window, I prompted:<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Good morning! I had a different model create this code for a lead generation calculator. I\u2019d like you to perform the following tasks: 1. review the code and improve it. 2. suggest any enhancements that would make it easier to use, or more useful for marketers to do each step separately, pausing between steps and giving me your responses and asking if it is ok to proceed.\u00a0<\/p>\n<\/blockquote>\n<p>The new model suggested improvements such as better error handling, code cleanup, verifying logic and design tweaks. It is an instant upgrade.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" alt=\"The lead gen calculator 2.0.\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfzY9fwOzJdU7FfXoAcgfXAppsrqQATvhFJlfniLTLLIhyoQpRHQHyalCs87wDn8pjLJlLtlCbYGzpZ-mTanAVnAqR3wAMP4mBqkGsk-ZyhiB_YpjiIZr3SpM5OXcDkoM6WfVeTNuT-jpDFLK4GN9N-gHc5?key=dxq0bdHXwvjNn2uQmgVWFw\"\/><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfzY9fwOzJdU7FfXoAcgfXAppsrqQATvhFJlfniLTLLIhyoQpRHQHyalCs87wDn8pjLJlLtlCbYGzpZ-mTanAVnAqR3wAMP4mBqkGsk-ZyhiB_YpjiIZr3SpM5OXcDkoM6WfVeTNuT-jpDFLK4GN9N-gHc5?key=dxq0bdHXwvjNn2uQmgVWFw\" alt=\"The lead gen calculator 2.0.\"\/><\/figure>\n<\/div>\n<p>What\u2019s exciting here isn\u2019t just the calculators \u2014 it\u2019s the potential for mass customization, personalization and integration across other tools. We\u2019re just scratching the surface of what\u2019s possible.<\/p>\n<p>For example, ChatGPT suggested adding scenario options, multilingual support, allowing users to export data directly from popular <a rel=\"nofollow\" href=\"https:\/\/martech.org\/topic\/customer-relationship-management-crm\/\">CRM<\/a> systems like <a rel=\"nofollow\" href=\"https:\/\/martech.org\/topic\/marketing-technology\/salesforce\/\">Salesforce<\/a> or <a rel=\"nofollow\" href=\"https:\/\/martech.org\/topic\/marketing-technology\/hubspot\/\">HubSpot<\/a>, an integrated feedback mechanism and my favorite: dynamic charting with chart.js or Google Charts. I\u2019ll leave those ideas in the backlog for now, so I can at least get the initial versions live for you to play with!<\/p>\n<p>All in all, over about two weeks, this project took me somewhere between five and six hours total. That includes creating the initial spreadsheets, messing with prompts trying different configurations and ultimately taking the time to create the final versions.\u00a0<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-3-2-1-let-s-calculate\">3-2-1\u2026 let\u2019s calculate!<\/h2>\n<p>This exercise pushed me to figure out how to create working code and to think through different use cases that marketers might find useful. Internal testing helped me bring additional context and resources to each landing page and, finally, the confidence to launch!<\/p>\n<p>Here are the four initial calculators we created and links:<\/p>\n<p><a rel=\"nofollow\" href=\"https:\/\/thirddoormedia.com\/lead-gen-calculator\/\"><strong>The Lead Gen Calculator<\/strong><\/a> is designed to help SaaS marketers simulate the ROI of lead generation campaigns by calculating costs, conversions and potential revenue. By entering variables like the number of leads, conversion rates and sales metrics, you\u2019ll get instant feedback. Try different combinations to simulate the effectiveness of a given marketing tactic.<\/p>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/thirddoormedia.com\/cpm-calculator\/\" target=\"_blank\"><strong>The CPM Calculator<\/strong><\/a> helps you maximize your ad budgets by estimating impressions, clicks and cost per click based on budget, channel and click-through rate (CTR). It\u2019s a quick, essential simulator for planning and optimizing ad campaigns to ensure you get the most out of every dollar spent.<\/p>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/thirddoormedia.com\/plg-calculator\/\" target=\"_blank\"><strong>The PLG Calculator<\/strong><\/a><strong> <\/strong>is a strategic simulator for you to estimate the impact of your product-led growth (PLG) initiatives. By entering key metrics like users, conversion rates and churn rate, this calculator will provide you with user growth projections, revenue and overall business impact.<\/p>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/thirddoormedia.com\/roas-calculator\/\" target=\"_blank\"><strong>The Return on Ad Spend (ROAS) Calculator<\/strong><\/a> helps you quickly evaluate the effectiveness of your ad campaigns by calculating the ratio of revenue generated to the amount spent on advertising. With default values pre-set, this tool allows you to effortlessly adjust inputs and instantly see the results, making it easier to optimize your marketing efforts.<\/p>\n<p><!-- START INLINE FORM --><\/p>\n<p><!-- END INLINE FORM -->\n<\/div>\n<p><br \/>\n<br \/><a href=\"https:\/\/martech.org\/how-to-build-interactive-applications-with-generative-ai\/\">Source link <\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>One of the most powerful things about generative AI is how quickly you can turn ideas into reality. After watching a video from my friend Shawn Kanungo, I was inspired to create a series of interactive marketing calculators designed to help marketers quickly calculate common campaign metrics. Think Bankrate mortgage calculators, but for marketers.\u00a0 Keep [&hellip;]<\/p>","protected":false},"author":3,"featured_media":8753,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-8752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-agency"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6.1 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to build interactive applications with generative AI - OK Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/okdesign.ca\/fr\/how-to-build-interactive-applications-with-generative-ai\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build interactive applications with generative AI - OK Design\" \/>\n<meta property=\"og:description\" content=\"One of the most powerful things about generative AI is how quickly you can turn ideas into reality. After watching a video from my friend Shawn Kanungo, I was inspired to create a series of interactive marketing calculators designed to help marketers quickly calculate common campaign metrics. Think Bankrate mortgage calculators, but for marketers.\u00a0 Keep [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/okdesign.ca\/fr\/how-to-build-interactive-applications-with-generative-ai\/\" \/>\n<meta property=\"og:site_name\" content=\"OK Design\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/okdesign.ca\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-19T14:00:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"OK Design\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"OK Design\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/\"},\"author\":{\"name\":\"OK Design\",\"@id\":\"https:\/\/okdesign.ca\/en\/#\/schema\/person\/a8cdeff6d4fdb205ceabe60a22c77a75\"},\"headline\":\"How to build interactive applications with generative AI\",\"datePublished\":\"2024-09-19T14:00:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/\"},\"wordCount\":1157,\"publisher\":{\"@id\":\"https:\/\/okdesign.ca\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1\",\"articleSection\":[\"Agency\"],\"inLanguage\":\"fr-CA\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/\",\"url\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/\",\"name\":\"How to build interactive applications with generative AI - OK Design\",\"isPartOf\":{\"@id\":\"https:\/\/okdesign.ca\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1\",\"datePublished\":\"2024-09-19T14:00:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1\",\"width\":800,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/okdesign.ca\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build interactive applications with generative AI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/okdesign.ca\/en\/#website\",\"url\":\"https:\/\/okdesign.ca\/en\/\",\"name\":\"OK Design - Conception Graphiques et Sites Web\",\"description\":\"Conception graphique et sites Web\",\"publisher\":{\"@id\":\"https:\/\/okdesign.ca\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/okdesign.ca\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/okdesign.ca\/en\/#organization\",\"name\":\"OK Web Design\",\"url\":\"https:\/\/okdesign.ca\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\/\/okdesign.ca\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2020\/09\/OKDesign-W.png?fit=7001%2C1376&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2020\/09\/OKDesign-W.png?fit=7001%2C1376&ssl=1\",\"width\":7001,\"height\":1376,\"caption\":\"OK Web Design\"},\"image\":{\"@id\":\"https:\/\/okdesign.ca\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/okdesign.ca\",\"https:\/\/www.instagram.com\/okdesignca\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/okdesign.ca\/en\/#\/schema\/person\/a8cdeff6d4fdb205ceabe60a22c77a75\",\"name\":\"OK Design\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/414d6a655f4d2b769d207dd5f01fd608ffbb3f6a8992a451bdb6d00e62dac102?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/414d6a655f4d2b769d207dd5f01fd608ffbb3f6a8992a451bdb6d00e62dac102?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/414d6a655f4d2b769d207dd5f01fd608ffbb3f6a8992a451bdb6d00e62dac102?s=96&d=mm&r=g\",\"caption\":\"OK Design\"},\"sameAs\":[\"https:\/\/tup.kxe.temporary.site\"],\"url\":\"https:\/\/okdesign.ca\/fr\/author\/okdesign\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to build interactive applications with generative AI - OK Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/okdesign.ca\/fr\/how-to-build-interactive-applications-with-generative-ai\/","og_locale":"fr_CA","og_type":"article","og_title":"How to build interactive applications with generative AI - OK Design","og_description":"One of the most powerful things about generative AI is how quickly you can turn ideas into reality. After watching a video from my friend Shawn Kanungo, I was inspired to create a series of interactive marketing calculators designed to help marketers quickly calculate common campaign metrics. Think Bankrate mortgage calculators, but for marketers.\u00a0 Keep [&hellip;]","og_url":"https:\/\/okdesign.ca\/fr\/how-to-build-interactive-applications-with-generative-ai\/","og_site_name":"OK Design","article_publisher":"https:\/\/www.facebook.com\/okdesign.ca","article_published_time":"2024-09-19T14:00:17+00:00","og_image":[{"width":800,"height":450,"url":"https:\/\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png","type":"image\/png"}],"author":"OK Design","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"OK Design","Estimation du temps de lecture":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#article","isPartOf":{"@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/"},"author":{"name":"OK Design","@id":"https:\/\/okdesign.ca\/en\/#\/schema\/person\/a8cdeff6d4fdb205ceabe60a22c77a75"},"headline":"How to build interactive applications with generative AI","datePublished":"2024-09-19T14:00:17+00:00","mainEntityOfPage":{"@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/"},"wordCount":1157,"publisher":{"@id":"https:\/\/okdesign.ca\/en\/#organization"},"image":{"@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1","articleSection":["Agency"],"inLanguage":"fr-CA"},{"@type":"WebPage","@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/","url":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/","name":"How to build interactive applications with generative AI - OK Design","isPartOf":{"@id":"https:\/\/okdesign.ca\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage"},"image":{"@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1","datePublished":"2024-09-19T14:00:17+00:00","breadcrumb":{"@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/"]}]},{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#primaryimage","url":"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1","contentUrl":"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1","width":800,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/okdesign.ca\/how-to-build-interactive-applications-with-generative-ai\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/okdesign.ca\/"},{"@type":"ListItem","position":2,"name":"How to build interactive applications with generative AI"}]},{"@type":"WebSite","@id":"https:\/\/okdesign.ca\/en\/#website","url":"https:\/\/okdesign.ca\/en\/","name":"OK Design - Conception Graphiques et Sites Web","description":"Conception graphique et sites Web","publisher":{"@id":"https:\/\/okdesign.ca\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/okdesign.ca\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":"Organization","@id":"https:\/\/okdesign.ca\/en\/#organization","name":"OK Web Design","url":"https:\/\/okdesign.ca\/en\/","logo":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/okdesign.ca\/en\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2020\/09\/OKDesign-W.png?fit=7001%2C1376&ssl=1","contentUrl":"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2020\/09\/OKDesign-W.png?fit=7001%2C1376&ssl=1","width":7001,"height":1376,"caption":"OK Web Design"},"image":{"@id":"https:\/\/okdesign.ca\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/okdesign.ca","https:\/\/www.instagram.com\/okdesignca\/"]},{"@type":"Person","@id":"https:\/\/okdesign.ca\/en\/#\/schema\/person\/a8cdeff6d4fdb205ceabe60a22c77a75","name":"OK Design","image":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/secure.gravatar.com\/avatar\/414d6a655f4d2b769d207dd5f01fd608ffbb3f6a8992a451bdb6d00e62dac102?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/414d6a655f4d2b769d207dd5f01fd608ffbb3f6a8992a451bdb6d00e62dac102?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/414d6a655f4d2b769d207dd5f01fd608ffbb3f6a8992a451bdb6d00e62dac102?s=96&d=mm&r=g","caption":"OK Design"},"sameAs":["https:\/\/tup.kxe.temporary.site"],"url":"https:\/\/okdesign.ca\/fr\/author\/okdesign\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/okdesign.ca\/wp-content\/uploads\/2024\/09\/robot-coding-800x450.png?fit=800%2C450&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/posts\/8752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/comments?post=8752"}],"version-history":[{"count":0,"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/posts\/8752\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/media\/8753"}],"wp:attachment":[{"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/media?parent=8752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/categories?post=8752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okdesign.ca\/fr\/wp-json\/wp\/v2\/tags?post=8752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}