{"id":2274,"date":"2024-05-03T13:03:07","date_gmt":"2024-05-03T13:03:07","guid":{"rendered":"https:\/\/www.jspanther.com\/blog\/?post_type=web-story&#038;p=2274"},"modified":"2024-05-03T13:08:41","modified_gmt":"2024-05-03T13:08:41","slug":"integrate-chatgpt-with-react-js-in-just-5-simple-steps","status":"publish","type":"web-story","link":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/","title":{"rendered":"Integrate  ChatGPT  With  React JS in Just 5 Simple Steps"},"content":{"rendered":"<p><html amp=\"\" lang=\"en\"><head><meta charSet=\"utf-8\"\/><meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"\/><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-story-1.0.js\" custom-element=\"amp-story\"><\/script><link href=\"https:\/\/fonts.googleapis.com\/css2?display=swap&amp;family=Titillium+Web%3Awght%40300%3B400%3B700&amp;family=Roboto%3Awght%40400%3B700\" rel=\"stylesheet\"\/><link href=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js.jpg\" rel=\"preload\" as=\"image\"\/>\n<style amp-boilerplate=\"\">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style>\n<p><noscript><\/p>\n<style amp-boilerplate=\"\">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style>\n<p><\/noscript><\/p>\n<style amp-custom=\"\">\n              h1, h2, h3 { font-weight: normal; }<\/p>\n<p>              amp-story-page {\n                background-color: #131516;\n              }<\/p>\n<p>              amp-story-grid-layer {\n                overflow: visible;\n              }<\/p>\n<p>              @media (max-aspect-ratio: 9 \/ 16)  {\n                @media (min-aspect-ratio: 320 \/ 678) {\n                  amp-story-grid-layer.grid-layer {\n                    margin-top: calc((100% \/ 0.5625 - 100% \/ 0.6666666666666666) \/ 2);\n                  }\n                }\n              }<\/p>\n<p>              @media not all and (min-resolution:.001dpcm) {\n                @media {\n                  p.text-wrapper > span {\n                    font-size: calc(100% - 0.5px);\n                  }\n                }\n              }<\/p>\n<p>              .page-fullbleed-area,\n              .page-background-overlay-area {\n                position: absolute;\n                overflow: hidden;\n                width: 100%;\n                left: 0;\n                height: calc(1.1851851851851851 * 100%);\n                top: calc((1 - 1.1851851851851851) * 100% \/ 2);\n              }<\/p>\n<p>              .element-overlay-area {\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n              }<\/p>\n<p>              .page-safe-area {\n                overflow: visible;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                width: 100%;\n                height: calc(0.84375 * 100%);\n                margin: auto 0;\n              }<\/p>\n<p>              .mask {\n                position: absolute;\n                overflow: hidden;\n              }<\/p>\n<p>              .fill {\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                margin: 0;\n              }<\/p>\n<p>              @media (prefers-reduced-motion: no-preference) {\n                .animation-wrapper {\n                  opacity: var(--initial-opacity);\n                  transform: var(--initial-transform);\n                }\n              }<\/p>\n<p>              amp-story-grid-layer.align-bottom {\n                align-content: end;\n                padding: 0;\n                \/* \n                  AMP CTA Layer will exactly occupy 74px regardless of any device.\n                  To space out captions 74px from the BOTTOM (AMP CTA Layer),\n                  74px from the TOP should also be spaced out and thus: 2 * 74px\n                  will be the desired max-height.\n                *\/\n                max-height: calc(100vh - (2 * 74px));\n              }<\/p>\n<p>              .captions-area {\n                padding: 0 32px 0;\n              }<\/p>\n<p>              amp-story-captions {\n                margin-bottom: 16px;\n                text-align: center;\n              }\n              <\/style>\n<p><meta name=\"web-stories-replace-head-start\"\/><title>Integrate  ChatGPT  With  React JS in Just 5 Simple Steps<\/title><link rel=\"canonical\" href=\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/\"\/><meta name=\"web-stories-replace-head-end\"\/><\/head><body data-rsssl=1><amp-story standalone=\"\" publisher=\"Blog\" publisher-logo-src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/JSP-Logo.jpg\" title=\"Integrate  ChatGPT  With  React JS in Just 5 Simple Steps\" poster-portrait-src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg\"><amp-story-page id=\"e5a0040d-67df-47af-b227-f31db2882ec3\" auto-advance-after=\"5s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#211b2b\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-723d48fb-ba99-4d15-bee5-2a2c7fc62f1b\">\n<div style=\"position:absolute;width:112%;height:112%;left:-5.31818%;top:-6.98958%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js.jpg\" alt=\"Chat GPT Integration\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js.jpg 1080w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-864x1536.jpg 864w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-768x1365.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-576x1024.jpg 576w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-169x300.jpg 169w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-150x267.jpg 150w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-27x48.jpg 27w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-20x36.jpg 20w\" sizes=\"(min-width: 1024px) 60vh, 133vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-image:linear-gradient(0.5turn, rgba(0,0,0,0) 0%, rgba(0,0,0,0.48999999999999994) 100%)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-image:linear-gradient(0.5turn, rgba(0,0,0,0) 0%, rgba(0,0,0,0.48999999999999994) 100%)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:50%;top:-36.24595%;width:87.86408%;height:58.57605%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-045aa174-4326-485e-ab49-061d5d7f517c\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Multiple Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 38.115a8.115 8.115 0 100-16.23 8.115 8.115 0 000 16.23zm0 .245a8.36 8.36 0 100-16.72 8.36 8.36 0 000 16.72z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".5\" filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 43.36c7.379 0 13.36-5.981 13.36-13.36S37.38 16.64 30 16.64 16.64 22.62 16.64 30 22.62 43.36 30 43.36zm0 .247c7.515 0 13.606-6.092 13.606-13.607S37.515 16.394 30 16.394 16.393 22.485 16.393 30 22.485 43.607 30 43.607z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".2\" filter=\"url(#filter2_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.754c10.91 0 19.754-8.844 19.754-19.754 0-10.91-8.844-19.754-19.754-19.754-10.91 0-19.754 8.844-19.754 19.754 0 10.91 8.844 19.754 19.754 19.754zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"11.639\" y=\"11.639\" width=\"36.721\" height=\"36.721\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"6.393\" y=\"6.394\" width=\"47.213\" height=\"47.213\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter2_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:13.34951%;top:55.50162%;width:48.54369%;height:4.04531%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-49925035-6a2a-40dd-89c8-3b37174f7620\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.6839999999999993% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.258900em;line-height:1.1;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">JS Panther<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:59.54693%;width:68.20388%;height:35.11327%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-6815fa2d-5446-4838-b840-c8ea6853a48f\">\n<h1 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:4.449822064056939% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.776699em;line-height:1;text-align:left;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"Integrate_ChatGPT_With_React_JS\"><\/span><span><span style=\"font-weight: 300; color: #a2f6fc\">Integrate ChatGPT With React JS&nbsp;<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:88.83495%;width:53.8835%;height:7.28155%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-ee6128ee-fe3f-4815-b672-671da2e5bcd5\">\n<div class=\"fill\" style=\"background-color:#000;will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:13.34951%;top:87.86408%;width:50.48544%;height:7.44337%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.9615384615384616% 0.9615384615384616% 0.9615384615384616% 0.9615384615384616% \/ 4.3478260869565215% 4.3478260869565215% 4.3478260869565215% 4.3478260869565215%\" id=\"el-d46f9337-c13e-4bc0-9550-12c6a6c6e532\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:2.314903846153845% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.485437em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"5_Simple_Steps\"><\/span><span><span style=\"color: #a2f6fc\">5 Simple Steps<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"98754efe-cae7-4513-94e6-59267bf1adc9\" auto-advance-after=\"5s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-59d84577-1013-4b0b-9488-7b47eeed3b34\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":200,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-af7185aa-9b7c-4f48-b4e0-aa738f0766c0\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":200,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#201e2a\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-3fe2b5f7-d3f7-4d4e-9e14-837b4a06dbbb\">\n<div style=\"position:absolute;width:102%;height:102%;left:0%;top:-0.0625%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt.jpg\" alt=\"chat gpt\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt.jpg 1080w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-864x1536.jpg 864w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-768x1365.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-576x1024.jpg 576w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-169x300.jpg 169w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-150x267.jpg 150w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-27x48.jpg 27w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-20x36.jpg 20w\" sizes=\"(min-width: 1024px) 55vh, 121vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-image:linear-gradient(0.5turn, rgba(0,0,0,0.48999999999999994) 0%, rgba(0,0,0,0) 100%)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-image:linear-gradient(0.5turn, rgba(0,0,0,0.48999999999999994) 0%, rgba(0,0,0,0) 100%)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:15.7767%;top:31.5534%;width:68.4466%;height:23.30097%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-482ef501-2ac0-4fd0-99d9-5a3511d253c1\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:0.7053191489361699% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.291262em;line-height:1.3;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #dffdff\">The chatbot AI tool known as ChatGPT was created and developed by OpenAI while ReactJS is a powerful JavaScript library ideal for building immersive user interfaces for frontends.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:74.51456%;top:90.45307%;width:41.50485%;height:27.6699%;opacity:1\">\n<div id=\"anim-59d84577-1013-4b0b-9488-7b47eeed3b34\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-af7185aa-9b7c-4f48-b4e0-aa738f0766c0\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-a0047d9a-0aeb-4d88-8df8-02a099aafcba\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30.377 44.528c7.816 0 14.151-6.335 14.151-14.15 0-7.816-6.335-14.152-14.15-14.152-7.816 0-14.152 6.336-14.152 14.151 0 7.816 6.336 14.151 14.151 14.151zm0 .566c8.128 0 14.717-6.589 14.717-14.717S38.505 15.66 30.377 15.66 15.66 22.25 15.66 30.377c0 8.128 6.59 14.717 14.717 14.717z\" fill=\"#00F0FF\"><\/path><\/g><g filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.434c10.733 0 19.434-8.7 19.434-19.434 0-10.733-8.7-19.434-19.434-19.434-10.733 0-19.434 8.7-19.434 19.434 0 10.733 8.7 19.434 19.434 19.434zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\" fill-opacity=\".4\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"5.66\" y=\"5.66\" width=\"49.434\" height=\"49.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"5a5a5532-8738-4dae-96ee-b7cccda85223\" auto-advance-after=\"5s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-cd604404-bd5a-41fe-96f3-acce26fa0456\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-dc9a0af0-680c-4536-b994-a1a2750bf5d0\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#211818\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-83199fef-2d31-474f-85a3-ab903730a8e8\">\n<div style=\"position:absolute;width:333.17066%;height:100%;left:-219.01557%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-scaled.jpg\" alt=\"10 Best Database Software for Web Apps in 2024\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-scaled.jpg 2560w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-2048x1093.jpg 2048w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-1536x820.jpg 1536w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-1024x547.jpg 1024w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-768x410.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-300x160.jpg 300w\" sizes=\"(min-width: 1024px) 88vh, 196vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:32.28155%;top:70.71197%;width:50%;height:23.46278%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-e777a152-66f7-41be-90c5-b8310f8d049e\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:4.046601941747572% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.517799em;line-height:1;text-align:left;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"Simple_Steps_to_Integrate_ChatGPT_with_React\"><\/span><span><span style=\"color: #fff\">Simple Steps to Integrate ChatGPT with React<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-55.82524%;top:-18.28479%;width:120.14563%;height:79.93528%;opacity:1\">\n<div id=\"anim-cd604404-bd5a-41fe-96f3-acce26fa0456\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-dc9a0af0-680c-4536-b994-a1a2750bf5d0\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-0be7ded0-d3d7-46d4-a0c2-e48f00b51273\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Multiple Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 38.115a8.115 8.115 0 100-16.23 8.115 8.115 0 000 16.23zm0 .245a8.36 8.36 0 100-16.72 8.36 8.36 0 000 16.72z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".5\" filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 43.36c7.379 0 13.36-5.981 13.36-13.36S37.38 16.64 30 16.64 16.64 22.62 16.64 30 22.62 43.36 30 43.36zm0 .247c7.515 0 13.606-6.092 13.606-13.607S37.515 16.394 30 16.394 16.393 22.485 16.393 30 22.485 43.607 30 43.607z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".2\" filter=\"url(#filter2_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.754c10.91 0 19.754-8.844 19.754-19.754 0-10.91-8.844-19.754-19.754-19.754-10.91 0-19.754 8.844-19.754 19.754 0 10.91 8.844 19.754 19.754 19.754zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"11.639\" y=\"11.639\" width=\"36.721\" height=\"36.721\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"6.393\" y=\"6.394\" width=\"47.213\" height=\"47.213\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter2_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:61.65049%;width:21.84466%;height:36.40777%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:2.2222222222222223% 2.2222222222222223% 2.2222222222222223% 2.2222222222222223% \/ 0.8888888888888888% 0.8888888888888888% 0.8888888888888888% 0.8888888888888888%\" id=\"el-f19ccb89-e472-4013-9bbb-f4afe5983847\">\n<h1 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:26.393333333333324% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:2.394822em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"5\"><\/span><span><span style=\"color: #fff\">5<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"ad88c646-11c4-4f68-8a34-95853bd62472\" auto-advance-after=\"6.2s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-68929ad2-a28e-4cc7-8820-dbd476fc2208\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-a819e06b-3778-4372-a512-a7de184461e5\",\"keyframes\":{\"transform\":[\"translate3d(-165.37102%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#fff\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-a3c2ccea-7fab-4d0d-94f6-f398ed3f2695\">\n<div class=\"fill\" style=\"will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:39.07767%;top:-3.72168%;width:34.46602%;height:22.16828%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-8401e2f6-fd99-43db-8e95-c957ef1520bc\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:16.510563380281685% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:1.456311em;line-height:1;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #002e73\">1.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:17.23301%;top:13.26861%;width:65.53398%;height:16.34304%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.7407407407407408% 0.7407407407407408% 0.7407407407407408% 0.7407407407407408% \/ 1.9801980198019802% 1.9801980198019802% 1.9801980198019802% 1.9801980198019802%\" id=\"el-96de7370-c0e7-43f2-a54e-ffe6d05f3db1\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:3.8592592592592587% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.647249em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #002e73\">Set Up Your React Project&nbsp;<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:44.90291%;top:-20.38835%;width:68.68932%;height:45.63107%;opacity:1\">\n<div id=\"anim-68929ad2-a28e-4cc7-8820-dbd476fc2208\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-a819e06b-3778-4372-a512-a7de184461e5\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-165.37102%, 0px, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-42357ead-4f0c-476c-bc48-5c6e479c29ec\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Multiple Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 38.115a8.115 8.115 0 100-16.23 8.115 8.115 0 000 16.23zm0 .245a8.36 8.36 0 100-16.72 8.36 8.36 0 000 16.72z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".5\" filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 43.36c7.379 0 13.36-5.981 13.36-13.36S37.38 16.64 30 16.64 16.64 22.62 16.64 30 22.62 43.36 30 43.36zm0 .247c7.515 0 13.606-6.092 13.606-13.607S37.515 16.394 30 16.394 16.393 22.485 16.393 30 22.485 43.607 30 43.607z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".2\" filter=\"url(#filter2_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.754c10.91 0 19.754-8.844 19.754-19.754 0-10.91-8.844-19.754-19.754-19.754-10.91 0-19.754 8.844-19.754 19.754 0 10.91 8.844 19.754 19.754 19.754zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"11.639\" y=\"11.639\" width=\"36.721\" height=\"36.721\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"6.393\" y=\"6.394\" width=\"47.213\" height=\"47.213\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter2_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-4.85437%;top:33.17152%;width:326.69903%;height:95.63107%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-8fbad8b8-7fa9-4a4e-a5ba-5e1fe34489ee\">\n<div style=\"position:absolute;width:100.13734%;height:100%;left:-0.06867%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1.jpg\" alt=\"Top brands using React\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1.jpg 1024w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-768x337.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-300x132.jpg 300w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-48x21.jpg 48w\" sizes=\"(min-width: 1024px) 147vh, 327vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"c3eba0e8-dd5e-416b-a362-8cb223b018ee\" auto-advance-after=\"6.2s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-d171dcd2-fbd1-4e05-b3f5-7971787ee30a\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-67498125-769a-49bc-8a4e-8d5d951ebfda\",\"keyframes\":{\"transform\":[\"translate3d(-60.77738%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#fff\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-684230f6-16ff-43ca-937d-e45df86aac84\">\n<div class=\"fill\" style=\"will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:30.33981%;top:57.9288%;width:34.46602%;height:22.16828%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-e2b1aebe-4007-4194-8898-752ae0e509ea\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:16.510563380281685% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:1.456311em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #002e73\">2.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:13.83495%;top:74.11003%;width:67.47573%;height:22.81553%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.7194244604316548% 0.7194244604316548% 0.7194244604316548% 0.7194244604316548% \/ 1.4184397163120568% 1.4184397163120568% 1.4184397163120568% 1.4184397163120568%\" id=\"el-c13f10fa-f0e7-485d-91f7-883db63a4c4d\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:3.74820143884892% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.647249em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #002e73\">&nbsp;Get ChatGPT API Key &amp; Install Dependencies<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-26.94175%;top:77.18447%;width:68.68932%;height:45.63107%;opacity:1\">\n<div id=\"anim-d171dcd2-fbd1-4e05-b3f5-7971787ee30a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-67498125-769a-49bc-8a4e-8d5d951ebfda\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-60.77738%, 0px, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-9fa4c365-7cb2-4807-93d2-f9ae2312f58f\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Multiple Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 38.115a8.115 8.115 0 100-16.23 8.115 8.115 0 000 16.23zm0 .245a8.36 8.36 0 100-16.72 8.36 8.36 0 000 16.72z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".5\" filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 43.36c7.379 0 13.36-5.981 13.36-13.36S37.38 16.64 30 16.64 16.64 22.62 16.64 30 22.62 43.36 30 43.36zm0 .247c7.515 0 13.606-6.092 13.606-13.607S37.515 16.394 30 16.394 16.393 22.485 16.393 30 22.485 43.607 30 43.607z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".2\" filter=\"url(#filter2_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.754c10.91 0 19.754-8.844 19.754-19.754 0-10.91-8.844-19.754-19.754-19.754-10.91 0-19.754 8.844-19.754 19.754 0 10.91 8.844 19.754 19.754 19.754zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"11.639\" y=\"11.639\" width=\"36.721\" height=\"36.721\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"6.393\" y=\"6.394\" width=\"47.213\" height=\"47.213\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter2_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-4.12621%;top:-29.44984%;width:260.43689%;height:87.54045%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-3aafbf48-c929-4379-a358-4db7cd1220e2\">\n<div style=\"position:absolute;width:123.13419%;height:130.31424%;left:-11.71171%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg\" alt=\"Integrate chatgpt with react\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg 2560w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-2048x1093.jpg 2048w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1536x820.jpg 1536w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1024x547.jpg 1024w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-768x410.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-300x160.jpg 300w\" sizes=\"(min-width: 1024px) 117vh, 260vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"b665d313-7702-447d-a067-e7ec0ed3efb3\" auto-advance-after=\"6.2s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c0947302-fe9d-4743-90cc-d026f6d2f4f8\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-4046d65f-e0ff-4a0e-815d-0422bdebef7d\",\"keyframes\":{\"transform\":[\"translate3d(-51.94346%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#fff\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-0f45d342-0334-42be-ad68-e39b99d71832\">\n<div class=\"fill\" style=\"will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:41.50485%;top:-3.72168%;width:34.46602%;height:22.16828%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-4bc17aa7-f736-46bb-aed2-1e247dd50a14\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:16.510563380281685% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:1.456311em;line-height:1;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #002e73\">3.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:17.23301%;top:13.26861%;width:65.53398%;height:16.34304%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.7407407407407408% 0.7407407407407408% 0.7407407407407408% 0.7407407407407408% \/ 1.9801980198019802% 1.9801980198019802% 1.9801980198019802% 1.9801980198019802%\" id=\"el-325a4f4a-6515-463f-9651-dba871b006af\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:3.8592592592592587% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.647249em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #002e73\">Develop Chat Component<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-33.00971%;top:-24.91909%;width:68.68932%;height:45.63107%;opacity:1\">\n<div id=\"anim-c0947302-fe9d-4743-90cc-d026f6d2f4f8\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-4046d65f-e0ff-4a0e-815d-0422bdebef7d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-51.94346%, 0px, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-23b3de0e-8504-429d-b53e-943a548f4759\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Multiple Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 38.115a8.115 8.115 0 100-16.23 8.115 8.115 0 000 16.23zm0 .245a8.36 8.36 0 100-16.72 8.36 8.36 0 000 16.72z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".5\" filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 43.36c7.379 0 13.36-5.981 13.36-13.36S37.38 16.64 30 16.64 16.64 22.62 16.64 30 22.62 43.36 30 43.36zm0 .247c7.515 0 13.606-6.092 13.606-13.607S37.515 16.394 30 16.394 16.393 22.485 16.393 30 22.485 43.607 30 43.607z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".2\" filter=\"url(#filter2_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.754c10.91 0 19.754-8.844 19.754-19.754 0-10.91-8.844-19.754-19.754-19.754-10.91 0-19.754 8.844-19.754 19.754 0 10.91 8.844 19.754 19.754 19.754zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"11.639\" y=\"11.639\" width=\"36.721\" height=\"36.721\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"6.393\" y=\"6.394\" width=\"47.213\" height=\"47.213\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter2_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-42.71845%;top:36.56958%;width:200.48544%;height:90.61489%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-de650021-2a2c-4989-bf68-ec202c414a5e\">\n<div style=\"position:absolute;width:108.47458%;height:100%;left:-4.23729%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python.jpg\" alt=\"\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python.jpg 800w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-768x480.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-300x188.jpg 300w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-48x30.jpg 48w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-24x15.jpg 24w\" sizes=\"(min-width: 1024px) 90vh, 200vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"5af583a7-6046-45fb-8e47-2d13f231861b\" auto-advance-after=\"6.2s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-d5d502b0-291c-40e4-9d6b-9f723579d309\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-f501717e-2859-48b4-9a01-4ddaa89427c1\",\"keyframes\":{\"transform\":[\"translate3d(-60.77738%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#fff\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-f8a1cfb1-ba94-4a53-81e1-dc9352eb3b5d\">\n<div class=\"fill\" style=\"will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:30.33981%;top:57.9288%;width:34.46602%;height:22.16828%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-ab3cd639-ecf1-4f4d-b881-ec9495cfd697\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:16.510563380281685% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:1.456311em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #002e73\">4.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:13.83495%;top:74.11003%;width:67.47573%;height:22.81553%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.7194244604316548% 0.7194244604316548% 0.7194244604316548% 0.7194244604316548% \/ 1.4184397163120568% 1.4184397163120568% 1.4184397163120568% 1.4184397163120568%\" id=\"el-38fb78f1-2498-49e5-96be-1c1a006ad191\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:3.74820143884892% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.647249em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #002e73\">Connect ChatComponent Into the App<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-26.94175%;top:77.18447%;width:68.68932%;height:45.63107%;opacity:1\">\n<div id=\"anim-d5d502b0-291c-40e4-9d6b-9f723579d309\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-f501717e-2859-48b4-9a01-4ddaa89427c1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-60.77738%, 0px, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-8a0dd7ee-9422-42bf-ace0-a9097978eedd\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Multiple Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 38.115a8.115 8.115 0 100-16.23 8.115 8.115 0 000 16.23zm0 .245a8.36 8.36 0 100-16.72 8.36 8.36 0 000 16.72z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".5\" filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 43.36c7.379 0 13.36-5.981 13.36-13.36S37.38 16.64 30 16.64 16.64 22.62 16.64 30 22.62 43.36 30 43.36zm0 .247c7.515 0 13.606-6.092 13.606-13.607S37.515 16.394 30 16.394 16.393 22.485 16.393 30 22.485 43.607 30 43.607z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".2\" filter=\"url(#filter2_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.754c10.91 0 19.754-8.844 19.754-19.754 0-10.91-8.844-19.754-19.754-19.754-10.91 0-19.754 8.844-19.754 19.754 0 10.91 8.844 19.754 19.754 19.754zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"11.639\" y=\"11.639\" width=\"36.721\" height=\"36.721\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"6.393\" y=\"6.394\" width=\"47.213\" height=\"47.213\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter2_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-93.20388%;top:-30.90615%;width:200.97087%;height:90.45307%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-0b9503df-b944-460f-bf21-1503053dfb0c\">\n<div style=\"position:absolute;width:158.37968%;height:100%;left:-58.08506%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1.jpg\" alt=\"\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1.jpg 1302w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-1024x436.jpg 1024w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-768x327.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-300x128.jpg 300w\" sizes=\"(min-width: 1024px) 90vh, 201vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"72e0e5c3-c99e-4d06-9461-14b0afabfd43\" auto-advance-after=\"6.2s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b823fd69-b1dd-4cac-bb67-0cc972f59bf4\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0dc84dff-28c8-4e68-b7c8-81e97d3cf232\",\"keyframes\":{\"transform\":[\"translate3d(-51.94346%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":1200,\"duration\":5000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#fff\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-14e0d5d1-8146-4cd2-9497-1db08044d81a\">\n<div class=\"fill\" style=\"will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:41.50485%;top:-3.72168%;width:34.46602%;height:22.16828%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-407dbef6-592a-4d17-81f5-c04849bf4063\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:16.510563380281685% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:1.456311em;line-height:1;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #002e73\">5.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:17.23301%;top:8.09061%;width:65.53398%;height:29.28803%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.7407407407407408% 0.7407407407407408% 0.7407407407407408% 0.7407407407407408% \/ 1.1049723756906076% 1.1049723756906076% 1.1049723756906076% 1.1049723756906076%\" id=\"el-97020c9f-f2f8-4a8a-ac5a-d053f60c05d1\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:3.8592592592592587% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.647249em;line-height:1;text-align:center;padding:0;color:#000000\"><span><br \/>\n<span style=\"color: #002e73\">Style Your Chat Interface<\/span><br \/>\n<span style=\"color: #002e73\">&amp; Test<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-33.00971%;top:-24.91909%;width:68.68932%;height:45.63107%;opacity:1\">\n<div id=\"anim-b823fd69-b1dd-4cac-bb67-0cc972f59bf4\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-0dc84dff-28c8-4e68-b7c8-81e97d3cf232\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-51.94346%, 0px, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-6064d4ac-bb65-4627-842f-31a79228ba5d\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Multiple Blue Rings<\/title><g filter=\"url(#filter0_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 38.115a8.115 8.115 0 100-16.23 8.115 8.115 0 000 16.23zm0 .245a8.36 8.36 0 100-16.72 8.36 8.36 0 000 16.72z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".5\" filter=\"url(#filter1_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 43.36c7.379 0 13.36-5.981 13.36-13.36S37.38 16.64 30 16.64 16.64 22.62 16.64 30 22.62 43.36 30 43.36zm0 .247c7.515 0 13.606-6.092 13.606-13.607S37.515 16.394 30 16.394 16.393 22.485 16.393 30 22.485 43.607 30 43.607z\" fill=\"#00F0FF\"><\/path><\/g><g opacity=\".2\" filter=\"url(#filter2_d)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30 49.754c10.91 0 19.754-8.844 19.754-19.754 0-10.91-8.844-19.754-19.754-19.754-10.91 0-19.754 8.844-19.754 19.754 0 10.91 8.844 19.754 19.754 19.754zM30 50c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z\" fill=\"#00F0FF\"><\/path><\/g><defs><filter id=\"filter0_d\" x=\"11.639\" y=\"11.639\" width=\"36.721\" height=\"36.721\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter1_d\" x=\"6.393\" y=\"6.394\" width=\"47.213\" height=\"47.213\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><filter id=\"filter2_d\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"><\/feFlood><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"><\/feColorMatrix><feOffset><\/feOffset><feGaussianBlur stdDeviation=\"5\"><\/feGaussianBlur><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0\"><\/feColorMatrix><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"><\/feBlend><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"><\/feBlend><\/filter><\/defs><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:-33.00971%;top:40.7767%;width:208.98058%;height:69.57929%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-88344f7a-4abc-4045-82be-ab9bf33665bf\">\n<div style=\"position:absolute;width:100%;height:116.85446%;left:0%;top:-8.42723%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-scaled.jpg\" alt=\"\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-scaled.jpg 2560w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-2048x1195.jpg 2048w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-1536x896.jpg 1536w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-1024x598.jpg 1024w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-768x448.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-300x175.jpg 300w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-48x28.jpg 48w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-36x21.jpg 36w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-24x14.jpg 24w\" sizes=\"(min-width: 1024px) 94vh, 209vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"33c9d3cf-e900-457a-8bc3-a09452f6d8b6\" auto-advance-after=\"5s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e93c95d8-f062-433c-9b12-4956af150b31\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-77e9602d-281d-45fa-997a-05f4ce6c093a\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0e1f2a04-ee34-431a-8a67-a02bdf91cd45\",\"keyframes\":{\"transform\":[\"translate3d(0px, 540.40381%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ed339d1c-d81d-455d-a815-6537bcc7ba4e\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-193b8454-c518-49cd-babb-3b36c2c1cc00\",\"keyframes\":{\"transform\":[\"translate3d(0px, 1200.82354%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-5d9373ee-06a1-46c7-afb4-66083f51cd66\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":2000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#152132\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-f0c28e66-fa06-468a-abf2-b58701a1d704\">\n<div class=\"fill\" style=\"will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.37864%;top:17.1521%;width:55.58252%;height:27.34628%;opacity:1\">\n<div id=\"anim-e93c95d8-f062-433c-9b12-4956af150b31\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-51508948-08ab-4382-aa39-571326a74741\">\n<h1 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:5.460262008733623% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.776699em;line-height:1;text-align:left;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"Read_in_Detail\"><\/span><span><span style=\"font-weight: 300; color: #a2f6fc\">Read&nbsp;<\/span><br \/>\n<span style=\"font-weight: 300; color: #a2f6fc\">in&nbsp;<\/span><br \/>\n<span style=\"font-weight: 300; color: #a2f6fc\">Detail&nbsp;<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:35.92233%;top:56.79612%;width:16.99029%;height:4.36893%;opacity:1\">\n<div id=\"anim-ed339d1c-d81d-455d-a815-6537bcc7ba4e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-193b8454-c518-49cd-babb-3b36c2c1cc00\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 1200.82354%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-6819b5a8-2bb7-4c06-94ed-2f447cf88497\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.5557142857142863% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.291262em;line-height:1.4;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #00f0ff\">React &amp;<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:35.92233%;top:61.16505%;width:44.41748%;height:8.89968%;opacity:1\">\n<div id=\"anim-77e9602d-281d-45fa-997a-05f4ce6c093a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-0e1f2a04-ee34-431a-8a67-a02bdf91cd45\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 540.40381%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-a97a3a00-d7c3-4786-9033-524993ffd119\">\n<h3 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:3.1316939890710374% 0;font-family:&quot;Titillium Web&quot;,sans-serif;font-size:0.355987em;line-height:1;text-align:left;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"ChatGPT_Integrations\"><\/span><span><span style=\"font-weight: 700; color: #dffdff\">ChatGPT Integrations<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.37864%;top:45.46926%;width:75.97087%;height:2.10356%;opacity:1\">\n<div id=\"anim-5d9373ee-06a1-46c7-afb4-66083f51cd66\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0% 0% 0% 0% \/ 0% 0% 0% 0%\" id=\"el-f1964199-53b7-4dca-8eb1-435a693f28c3\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.053913738019169107% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.194175em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff; letter-spacing: 0.25em\">&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;..<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:14.56311%;top:60.03236%;width:15.7767%;height:10.03236%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-9dca8c44-b0b1-487f-8842-987af6941e7a\">\n<div style=\"position:absolute;width:178.75881%;height:100%;left:-39.2686%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg\" alt=\"Integrate chatgpt with react\" srcSet=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg 2560w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-2048x1093.jpg 2048w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1536x820.jpg 1536w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1024x547.jpg 1024w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-768x410.jpg 768w,https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-300x160.jpg 300w\" sizes=\"(min-width: 1024px) 7vh, 16vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:18.68932%;top:82.52427%;width:56.79612%;height:7.11974%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-5b648d7e-c4db-41e0-8abd-789e2012fdb1\"><a href=\"https:\/\/www.jspanther.com\/blog\/chatgpt-integration-with-react\/\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<div class=\"fill\" style=\"background-color:#a2f6fc;will-change:transform\"><\/div>\n<p><\/a><\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:30.33981%;top:83.49515%;width:70.38835%;height:5.17799%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6896551724137931% 0.6896551724137931% 0.6896551724137931% 0.6896551724137931% \/ 6.25% 6.25% 6.25% 6.25%\" id=\"el-622f4468-1d34-48a5-9123-895bcaee936b\"><a href=\"https:\/\/www.jspanther.com\/blog\/chatgpt-integration-with-react\/\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.13092672413793077% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.436893em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"CLICK_HERE\"><\/span><span><span style=\"font-weight: 700; color: #002e73\">CLICK HERE&nbsp;<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><\/amp-story><\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to Integrate ChatGPT With React JS  As Various companies nowadays demand ChatGPT integration with React technology to build futuristic applications.  <\/p>\n","protected":false},"author":1,"featured_media":2278,"template":"","meta":{"inline_featured_image":false,"web_stories_products":[],"web_stories_publisher_logo":2268,"web_stories_poster":[],"footnotes":""},"web_story_category":[],"web_story_tag":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Integrate ChatGPT With React JS in Just 5 Simple Steps - Blog<\/title>\n<meta name=\"description\" content=\"Learn how to Integrate ChatGPT With React JS  As Various companies nowadays demand ChatGPT integration with React technology to build futuristic applications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrate ChatGPT With React JS in Just 5 Simple Steps - Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to Integrate ChatGPT With React JS As Various companies nowadays demand ChatGPT integration with React technology to build futuristic applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T13:08:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/\",\"url\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/\",\"name\":\"Integrate ChatGPT With React JS in Just 5 Simple Steps - Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jspanther.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg\",\"datePublished\":\"2024-05-03T13:03:07+00:00\",\"dateModified\":\"2024-05-03T13:08:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#primaryimage\",\"url\":\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg\",\"contentUrl\":\"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg\",\"width\":640,\"height\":853,\"caption\":\"Chat GPT Integration\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jspanther.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Stories\",\"item\":\"https:\/\/www.jspanther.com\/blog\/web-stories\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Integrate ChatGPT With React JS in Just 5 Simple Steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jspanther.com\/blog\/#website\",\"url\":\"https:\/\/www.jspanther.com\/blog\/\",\"name\":\"Blog\",\"description\":\"JS Panther Tech Blogs\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jspanther.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jspanther.com\/blog\/#\/schema\/person\/f2d27cfcd2a04d610300573ae24fd29a\",\"name\":\"jspadmin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jspanther.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/26484c9f7fc46ac48ed43469b6973647?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/26484c9f7fc46ac48ed43469b6973647?s=96&d=mm&r=g\",\"caption\":\"jspadmin\"},\"url\":\"https:\/\/www.jspanther.com\/blog\/author\/jspadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrate ChatGPT With React JS in Just 5 Simple Steps - Blog","description":"Learn how to Integrate ChatGPT With React JS  As Various companies nowadays demand ChatGPT integration with React technology to build futuristic applications.","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:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/","og_locale":"en_US","og_type":"article","og_title":"Integrate ChatGPT With React JS in Just 5 Simple Steps - Blog","og_description":"Learn how to Integrate ChatGPT With React JS As Various companies nowadays demand ChatGPT integration with React technology to build futuristic applications.","og_url":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/","og_site_name":"Blog","article_modified_time":"2024-05-03T13:08:41+00:00","og_image":[{"width":640,"height":853,"url":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/","url":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/","name":"Integrate ChatGPT With React JS in Just 5 Simple Steps - Blog","isPartOf":{"@id":"https:\/\/www.jspanther.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#primaryimage"},"image":{"@id":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg","datePublished":"2024-05-03T13:03:07+00:00","dateModified":"2024-05-03T13:08:41+00:00","breadcrumb":{"@id":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#primaryimage","url":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg","contentUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg","width":640,"height":853,"caption":"Chat GPT Integration"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jspanther.com\/blog\/web-stories\/integrate-chatgpt-with-react-js-in-just-5-simple-steps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jspanther.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Stories","item":"https:\/\/www.jspanther.com\/blog\/web-stories\/"},{"@type":"ListItem","position":3,"name":"Integrate ChatGPT With React JS in Just 5 Simple Steps"}]},{"@type":"WebSite","@id":"https:\/\/www.jspanther.com\/blog\/#website","url":"https:\/\/www.jspanther.com\/blog\/","name":"Blog","description":"JS Panther Tech Blogs","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jspanther.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jspanther.com\/blog\/#\/schema\/person\/f2d27cfcd2a04d610300573ae24fd29a","name":"jspadmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jspanther.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/26484c9f7fc46ac48ed43469b6973647?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/26484c9f7fc46ac48ed43469b6973647?s=96&d=mm&r=g","caption":"jspadmin"},"url":"https:\/\/www.jspanther.com\/blog\/author\/jspadmin\/"}]}},"story_data":{"version":47,"pages":[{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"x":48,"y":0,"width":330,"height":494,"mask":{"type":"rectangle"},"isBackground":true,"type":"image","id":"723d48fb-ba99-4d15-bee5-2a2c7fc62f1b","scale":112,"focalX":49.3912337578267255366881727240979671478271484375,"focalY":50.88355656165581564209787757135927677154541015625,"resource":{"type":"image","mimeType":"image\/jpeg","width":1080,"height":1920,"sizes":{"medium":{"file":"react-js-169x300.jpg","width":169,"height":300,"filesize":10030,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-169x300.jpg"},"large":{"file":"react-js-576x1024.jpg","width":576,"height":1024,"filesize":65344,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-576x1024.jpg"},"thumbnail":{"file":"react-js-150x150.jpg","width":150,"height":150,"filesize":5859,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-150x150.jpg"},"medium_large":{"file":"react-js-768x1365.jpg","width":768,"height":1365,"filesize":98327,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-768x1365.jpg"},"1536x1536":{"file":"react-js-864x1536.jpg","width":864,"height":1536,"filesize":114572,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-864x1536.jpg"},"menu-24x24":{"file":"react-js-14x24.jpg","width":14,"height":24,"filesize":761,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-14x24.jpg"},"menu-36x36":{"file":"react-js-20x36.jpg","width":20,"height":36,"filesize":870,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-20x36.jpg"},"menu-48x48":{"file":"react-js-27x48.jpg","width":27,"height":48,"filesize":960,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-27x48.jpg"},"web-stories-poster-portrait":{"file":"react-js-640x853.jpg","width":640,"height":853,"filesize":65890,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-640x853.jpg"},"web-stories-publisher-logo":{"file":"react-js-96x96.jpg","width":96,"height":96,"filesize":2776,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-96x96.jpg"},"web-stories-thumbnail":{"file":"react-js-150x267.jpg","width":150,"height":267,"filesize":8229,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js-150x267.jpg"},"full":{"file":"react-js.jpg","width":1080,"height":1920,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#211b2b","blurHash":"U03um3+JtR-qm-xZtRRim6o#Z~t7xZo#ROkX","creationDate":1714735183000,"src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/react-js.jpg","id":2275,"alt":"Chat GPT Integration","local":false},"overlay":{"type":"linear","stops":[{"color":{"r":0,"g":0,"b":0,"a":0},"position":0},{"color":{"r":0,"g":0,"b":0,"a":0.6999999999999999555910790149937383830547332763671875},"position":1}],"alpha":0.6999999999999999555910790149937383830547332763671875}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"type":"sticker","x":206,"y":-224,"width":362,"height":362,"sticker":{"type":"selfDrivingCarsMultipleBlueRings"},"id":"045aa174-4326-485e-ab49-061d5d7f517c"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":16,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #fff\">JS Panther<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"x":55,"y":343,"width":200,"height":25,"id":"49925035-6a2a-40dd-89c8-3b37174f7620","type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":48,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"font-weight: 300; color: #a2f6fc\">Integrate ChatGPT With React JS&nbsp;<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":281,"height":217,"id":"6815fa2d-5446-4838-b840-c8ea6853a48f","x":48,"y":368,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"backgroundColor":{"color":{"r":0,"g":0,"b":0}},"width":222,"height":45,"type":"shape","x":48,"y":549,"mask":{"type":"rectangle"},"id":"ee6128ee-fe3f-4815-b672-671da2e5bcd5"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":30,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.1999999999999999555910790149937383830547332763671875,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"content":"<span style=\"color: #a2f6fc\">5 Simple Steps<\/span>","x":55,"y":543,"width":208,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"type":"text","height":46,"id":"d46f9337-c13e-4bc0-9550-12c6a6c6e532","marginOffset":0.84375}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"e5a0040d-67df-47af-b227-f31db2882ec3","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"5c022335-01a0-425b-ade6-af8c5f09c80d"},"pageTemplateType":"cover"},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"x":48,"y":0,"width":330,"height":494,"mask":{"type":"rectangle"},"isBackground":true,"type":"image","id":"3fe2b5f7-d3f7-4d4e-9e14-837b4a06dbbb","scale":102,"focalX":48.85110294117647100620160927064716815948486328125,"focalY":49.0808823529411739627903443761169910430908203125,"resource":{"type":"image","mimeType":"image\/jpeg","width":1080,"height":1920,"sizes":{"medium":{"file":"chat-gpt-169x300.jpg","width":169,"height":300,"filesize":12106,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-169x300.jpg"},"large":{"file":"chat-gpt-576x1024.jpg","width":576,"height":1024,"filesize":86028,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-576x1024.jpg"},"thumbnail":{"file":"chat-gpt-150x150.jpg","width":150,"height":150,"filesize":6447,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-150x150.jpg"},"medium_large":{"file":"chat-gpt-768x1365.jpg","width":768,"height":1365,"filesize":131931,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-768x1365.jpg"},"1536x1536":{"file":"chat-gpt-864x1536.jpg","width":864,"height":1536,"filesize":154834,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-864x1536.jpg"},"menu-24x24":{"file":"chat-gpt-14x24.jpg","width":14,"height":24,"filesize":810,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-14x24.jpg"},"menu-36x36":{"file":"chat-gpt-20x36.jpg","width":20,"height":36,"filesize":955,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-20x36.jpg"},"menu-48x48":{"file":"chat-gpt-27x48.jpg","width":27,"height":48,"filesize":1090,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-27x48.jpg"},"web-stories-poster-portrait":{"file":"chat-gpt-640x853.jpg","width":640,"height":853,"filesize":84893,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-640x853.jpg"},"web-stories-publisher-logo":{"file":"chat-gpt-96x96.jpg","width":96,"height":96,"filesize":3104,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-96x96.jpg"},"web-stories-thumbnail":{"file":"chat-gpt-150x267.jpg","width":150,"height":267,"filesize":9765,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt-150x267.jpg"},"full":{"file":"chat-gpt.jpg","width":1080,"height":1920,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#201e2a","blurHash":"U45O:2=|D49b^+%#M}D4vyt,XmQ,KRMcrq*J","creationDate":1714735740000,"src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/chat-gpt.jpg","id":2277,"alt":"chat gpt","local":false},"overlay":{"type":"linear","stops":[{"color":{"r":0,"g":0,"b":0,"a":0.6999999999999999555910790149937383830547332763671875},"position":0},{"color":{"r":0,"g":0,"b":0,"a":0},"position":1}],"alpha":0.6999999999999999555910790149937383830547332763671875}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":18,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3000000000000000444089209850062616169452667236328125,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #dffdff\">The chatbot AI tool known as ChatGPT was created and developed by OpenAI while ReactJS is a powerful JavaScript library ideal for building immersive user interfaces for frontends.<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":282,"height":144,"id":"482ef501-2ac0-4fd0-99d9-5a3511d253c1","x":65,"y":195,"type":"text","tagName":"p","marginOffset":-3.977999999999997982058630441315472126007080078125},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"type":"sticker","x":307,"y":559,"width":171,"height":171,"sticker":{"type":"selfDrivingCarsBlueRings"},"id":"a0047d9a-0aeb-4d88-8df8-02a099aafcba","groupId":null}],"animations":[{"id":"61704de9-de3d-4498-b1ba-975e25c8685c","type":"effect-zoom","targets":["a0047d9a-0aeb-4d88-8df8-02a099aafcba"],"scaleDirection":"scaleIn","duration":2000,"delay":200}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"98754efe-cae7-4513-94e6-59267bf1adc9","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"ce450633-fd8a-444c-a29e-45ea32b16a9d"},"pageTemplateType":null,"groups":{"1609c38a-c682-4e86-89f8-4c38e65ed0a3":{"name":"Level 4","isLocked":false,"isCollapsed":false},"161dad7f-46c9-4578-a8d3-dc5c789f1564":{"name":"Level 1","isLocked":false,"isCollapsed":false}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":80.7440752535000427769773523323237895965576171875,"focalY":50.06800135823369402032767538912594318389892578125,"resource":{"type":"image","mimeType":"image\/jpeg","width":2560,"height":1366,"sizes":{"medium":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-300x160.jpg","width":300,"height":160,"filesize":6567,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-300x160.jpg"},"large":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-1024x547.jpg","width":1024,"height":547,"filesize":39737,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-1024x547.jpg"},"thumbnail":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-150x150.jpg","width":150,"height":150,"filesize":3963,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-150x150.jpg"},"medium_large":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-768x410.jpg","width":768,"height":410,"filesize":25644,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-768x410.jpg"},"1536x1536":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-1536x820.jpg","width":1536,"height":820,"filesize":73572,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-1536x820.jpg"},"2048x2048":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-2048x1093.jpg","width":2048,"height":1093,"filesize":114508,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-2048x1093.jpg"},"menu-24x24":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-24x13.jpg","width":24,"height":13,"filesize":779,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-24x13.jpg"},"menu-36x36":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-36x19.jpg","width":36,"height":19,"filesize":877,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-36x19.jpg"},"menu-48x48":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-48x26.jpg","width":48,"height":26,"filesize":986,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-48x26.jpg"},"full":{"file":"10-Best-Database-Software-for-Web-Apps-in-2024-scaled.jpg","width":2560,"height":1366,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-scaled.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#211818","blurHash":"U15XP.-A1H0|VsWV%2xG0y9[-B}t^kofEL9t","creationDate":"2024-03-06T10:33:31.000Z","src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/03\/10-Best-Database-Software-for-Web-Apps-in-2024-scaled.jpg","id":2092,"alt":"10 Best Database Software for Web Apps in 2024","local":false},"type":"image","x":-139,"y":-94,"width":879,"height":797,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"83199fef-2d31-474f-85a3-ab903730a8e8","isBackground":true,"isHidden":false},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":32,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"type":"text","content":"<span style=\"color: #fff\">Simple Steps to Integrate ChatGPT with React<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":206,"height":145,"id":"e777a152-66f7-41be-90c5-b8310f8d049e","x":133,"y":437,"groupId":null,"marginOffset":-16.671999999999997044142219237983226776123046875},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"type":"sticker","width":495,"height":494,"sticker":{"type":"selfDrivingCarsMultipleBlueRings"},"id":"0be7ded0-d3d7-46d4-a0c2-e48f00b51273","x":-230,"y":-113,"groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":148,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.1999999999999999555910790149937383830547332763671875,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"content":"<span style=\"color: #fff\">5<\/span>","x":48,"y":381,"width":90,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"type":"text","height":225,"id":"f19ccb89-e472-4013-9bbb-f4afe5983847","marginOffset":-47.50799999999998135535861365497112274169921875}],"animations":[{"id":"1d24f4c2-ed60-4d01-859f-101e2c6a3df3","type":"effect-zoom","scaleDirection":"scaleIn","duration":2000,"delay":0,"targets":["0be7ded0-d3d7-46d4-a0c2-e48f00b51273"]}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"5a5a5532-8738-4dae-96ee-b7cccda85223","pageTemplateType":null,"groups":[],"defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"cda90cb3-d7b6-42d6-9868-6c763991efa0"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"id":"a3c2ccea-7fab-4d0d-94f6-f398ed3f2695","type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":90,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">1.<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":142,"height":137,"id":"8401e2f6-fd99-43db-8e95-c957ef1520bc","x":161,"y":-23,"type":"text","tagName":"p","groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">Set Up Your React Project&nbsp;<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"width":270,"height":101,"id":"96de7370-c0e7-43f2-a54e-ffe6d05f3db1","x":71,"y":82,"type":"text","tagName":"p","groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"type":"sticker","width":283,"height":282,"sticker":{"type":"selfDrivingCarsMultipleBlueRings"},"id":"42357ead-4f0c-476c-bc48-5c6e479c29ec","x":185,"y":-126,"groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"type":"image","mimeType":"image\/jpeg","width":1024,"height":449,"sizes":{"medium":{"file":"Top-brands-using-React-1-300x132.jpg","width":300,"height":132,"filesize":7792,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-300x132.jpg"},"thumbnail":{"file":"Top-brands-using-React-1-150x150.jpg","width":150,"height":150,"filesize":3819,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-150x150.jpg"},"medium_large":{"file":"Top-brands-using-React-1-768x337.jpg","width":768,"height":337,"filesize":25893,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-768x337.jpg"},"menu-24x24":{"file":"Top-brands-using-React-1-24x11.jpg","width":24,"height":11,"filesize":815,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-24x11.jpg"},"menu-36x36":{"file":"Top-brands-using-React-1-36x16.jpg","width":36,"height":16,"filesize":975,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-36x16.jpg"},"menu-48x48":{"file":"Top-brands-using-React-1-48x21.jpg","width":48,"height":21,"filesize":1128,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1-48x21.jpg"},"full":{"file":"Top-brands-using-React-1.jpg","width":1024,"height":449,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#1b4284","blurHash":"U7C+G8004Tlovxp0NITHADqaMcwbPCRj#jwI","creationDate":"2023-05-04T10:07:28","src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/Top-brands-using-React-1.jpg","id":1176,"alt":"Top brands using React","local":false,"provider":"local"},"type":"image","x":-20,"y":205,"width":1346,"height":591,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"8fbad8b8-7fa9-4a4e-a5ba-5e1fe34489ee"}],"animations":[{"id":"3cd4ae30-e957-48a3-9e18-2c90a0207299","type":"effect-fly-in","targets":["42357ead-4f0c-476c-bc48-5c6e479c29ec"],"flyInDir":"leftToRight","duration":5000,"delay":1200}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"ad88c646-11c4-4f68-8a34-95853bd62472","pageTemplateType":null,"groups":{"a441d415-f1be-4f29-b8e5-fe56cb9554b9":{"name":"Graphic","isLocked":false,"isCollapsed":true},"2ad115f4-812d-4816-919f-b050bb9d00e2":{"name":"Graphic","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"id":"684230f6-16ff-43ca-937d-e45df86aac84","type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":90,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">2.<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":142,"height":137,"id":"e2b1aebe-4007-4194-8898-752ae0e509ea","x":125,"y":358,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">&nbsp;Get ChatGPT API Key &amp; Install Dependencies<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"width":278,"height":141,"id":"c13f10fa-f0e7-485d-91f7-883db63a4c4d","x":57,"y":458,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"width":283,"height":282,"sticker":{"type":"selfDrivingCarsMultipleBlueRings"},"id":"9fa4c365-7cb2-4807-93d2-f9ae2312f58f","x":-111,"y":477,"groupId":null,"type":"sticker"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":123.1341911356934559762521530501544475555419921875,"focalX":50.11744258845599375717938528396189212799072265625,"focalY":38.35106364433721637396956793963909149169921875,"resource":{"type":"image","mimeType":"image\/jpeg","width":2560,"height":1366,"sizes":{"medium":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-300x160.jpg","width":300,"height":160,"filesize":11135,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-300x160.jpg"},"large":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1024x547.jpg","width":1024,"height":547,"filesize":78299,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1024x547.jpg"},"thumbnail":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-150x150.jpg","width":150,"height":150,"filesize":6590,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-150x150.jpg"},"medium_large":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-768x410.jpg","width":768,"height":410,"filesize":50096,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-768x410.jpg"},"1536x1536":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1536x820.jpg","width":1536,"height":820,"filesize":141226,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1536x820.jpg"},"2048x2048":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-2048x1093.jpg","width":2048,"height":1093,"filesize":213368,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-2048x1093.jpg"},"menu-24x24":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-24x13.jpg","width":24,"height":13,"filesize":808,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-24x13.jpg"},"menu-36x36":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-36x19.jpg","width":36,"height":19,"filesize":970,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-36x19.jpg"},"menu-48x48":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-48x26.jpg","width":48,"height":26,"filesize":1071,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-48x26.jpg"},"full":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg","width":2560,"height":1366,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#1d1e26","blurHash":"U45~2.~DIS9ItlxskARl00D+x^-.L~M|oz%1","creationDate":"2023-12-28T08:06:26","src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg","id":1989,"alt":"Integrate chatgpt with react","local":false},"type":"image","x":-17,"y":-182,"width":1073,"height":541,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"3aafbf48-c929-4379-a358-4db7cd1220e2","resizeWidth":1375.10680000000002110027708113193511962890625,"resizeHeight":693}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"2ed7a31b-6f78-4a08-8486-148506792ab4","type":"effect-fly-in","targets":["9fa4c365-7cb2-4807-93d2-f9ae2312f58f"],"flyInDir":"leftToRight","duration":5000,"delay":1200}],"type":"page","id":"c3eba0e8-dd5e-416b-a362-8cb223b018ee","pageTemplateType":null,"groups":{"a441d415-f1be-4f29-b8e5-fe56cb9554b9":{"name":"Graphic","isLocked":false,"isCollapsed":true},"2ad115f4-812d-4816-919f-b050bb9d00e2":{"name":"Graphic","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"id":"0f45d342-0334-42be-ad68-e39b99d71832","type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":90,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">3.<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":142,"height":137,"id":"4bc17aa7-f736-46bb-aed2-1e247dd50a14","x":171,"y":-23,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">Develop Chat Component<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"width":270,"height":101,"id":"325a4f4a-6515-463f-9651-dba871b006af","x":71,"y":82,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"width":283,"height":282,"sticker":{"type":"selfDrivingCarsMultipleBlueRings"},"id":"23b3de0e-8504-429d-b53e-943a548f4759","x":-136,"y":-154,"groupId":null,"type":"sticker"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"type":"image","mimeType":"image\/jpeg","width":800,"height":500,"sizes":{"medium":{"file":"How-To-Use-ChatGPT-API-in-Python-300x188.jpg","width":300,"height":188,"filesize":14822,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-300x188.jpg"},"thumbnail":{"file":"How-To-Use-ChatGPT-API-in-Python-150x150.jpg","width":150,"height":150,"filesize":6152,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-150x150.jpg"},"medium_large":{"file":"How-To-Use-ChatGPT-API-in-Python-768x480.jpg","width":768,"height":480,"filesize":67791,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-768x480.jpg"},"menu-24x24":{"file":"How-To-Use-ChatGPT-API-in-Python-24x15.jpg","width":24,"height":15,"filesize":841,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-24x15.jpg"},"menu-36x36":{"file":"How-To-Use-ChatGPT-API-in-Python-36x23.jpg","width":36,"height":23,"filesize":1022,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-36x23.jpg"},"menu-48x48":{"file":"How-To-Use-ChatGPT-API-in-Python-48x30.jpg","width":48,"height":30,"filesize":1198,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python-48x30.jpg"},"full":{"file":"How-To-Use-ChatGPT-API-in-Python.jpg","width":800,"height":500,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#102819","blurHash":"U45?FsD4z|LwHPL-Z**E4m-;NFr;-ox?bbIX","creationDate":"2023-06-28T11:58:55","src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/06\/How-To-Use-ChatGPT-API-in-Python.jpg","id":1578,"alt":"","local":false},"type":"image","x":-176,"y":226,"width":826,"height":560,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"de650021-2a2c-4989-bf68-ec202c414a5e"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"db33cd41-d7d2-4034-80d9-a1477ea334d0","type":"effect-fly-in","targets":["23b3de0e-8504-429d-b53e-943a548f4759"],"flyInDir":"leftToRight","duration":5000,"delay":1200}],"type":"page","id":"b665d313-7702-447d-a067-e7ec0ed3efb3","pageTemplateType":null,"groups":{"a441d415-f1be-4f29-b8e5-fe56cb9554b9":{"name":"Graphic","isLocked":false,"isCollapsed":true},"2ad115f4-812d-4816-919f-b050bb9d00e2":{"name":"Graphic","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"id":"f8a1cfb1-ba94-4a53-81e1-dc9352eb3b5d","type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":90,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">4.<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":142,"height":137,"id":"ab3cd639-ecf1-4f4d-b881-ec9495cfd697","x":125,"y":358,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">Connect ChatComponent Into the App<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"width":278,"height":141,"id":"38fb78f1-2498-49e5-96be-1c1a006ad191","x":57,"y":458,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"width":283,"height":282,"sticker":{"type":"selfDrivingCarsMultipleBlueRings"},"id":"8a0dd7ee-9422-42bf-ace0-a9097978eedd","x":-111,"y":477,"groupId":null,"type":"sticker"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":69.350449093444922255002893507480621337890625,"focalX":68.244269413266493984338012523949146270751953125,"focalY":49.95663246059208262295214808546006679534912109375,"resource":{"type":"image","mimeType":"image\/jpeg","width":1302,"height":555,"sizes":{"medium":{"file":"React-Native-1-300x128.jpg","width":300,"height":128,"filesize":6906,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-300x128.jpg"},"large":{"file":"React-Native-1-1024x436.jpg","width":1024,"height":436,"filesize":38028,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-1024x436.jpg"},"thumbnail":{"file":"React-Native-1-150x150.jpg","width":150,"height":150,"filesize":3873,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-150x150.jpg"},"medium_large":{"file":"React-Native-1-768x327.jpg","width":768,"height":327,"filesize":25575,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-768x327.jpg"},"menu-24x24":{"file":"React-Native-1-24x10.jpg","width":24,"height":10,"filesize":779,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-24x10.jpg"},"menu-36x36":{"file":"React-Native-1-36x15.jpg","width":36,"height":15,"filesize":902,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-36x15.jpg"},"menu-48x48":{"file":"React-Native-1-48x20.jpg","width":48,"height":20,"filesize":994,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1-48x20.jpg"},"full":{"file":"React-Native-1.jpg","width":1302,"height":555,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#282b34","blurHash":"U556SMu%TyMcU]WVjFkrQ8T}rWozu5ofbwVr","creationDate":"2023-05-04T10:01:59","src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2022\/03\/React-Native-1.jpg","id":1175,"alt":"","local":false},"type":"image","x":-384,"y":-191,"width":828,"height":559,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"0b9503df-b944-460f-bf21-1503053dfb0c","resizeWidth":1061,"resizeHeight":717}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"a7827da0-ae71-42b4-9b56-71c7fb584817","type":"effect-fly-in","targets":["8a0dd7ee-9422-42bf-ace0-a9097978eedd"],"flyInDir":"leftToRight","duration":5000,"delay":1200}],"type":"page","id":"5af583a7-6046-45fb-8e47-2d13f231861b","pageTemplateType":null,"groups":{"a441d415-f1be-4f29-b8e5-fe56cb9554b9":{"name":"Graphic","isLocked":false,"isCollapsed":true},"2ad115f4-812d-4816-919f-b050bb9d00e2":{"name":"Graphic","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"id":"14e0d5d1-8146-4cd2-9497-1db08044d81a","type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":90,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #002e73\">5.<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":142,"height":137,"id":"407dbef6-592a-4d17-81f5-c04849bf4063","x":171,"y":-23,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"content":"\n<span style=\"color: #002e73\">Style Your Chat Interface<\/span>\n<span style=\"color: #002e73\">&amp; Test<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"width":270,"height":181,"id":"97020c9f-f2f8-4a8a-ac5a-d053f60c05d1","x":71,"y":50,"tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"width":283,"height":282,"sticker":{"type":"selfDrivingCarsMultipleBlueRings"},"id":"6064d4ac-bb65-4627-842f-31a79228ba5d","x":-136,"y":-154,"groupId":null,"type":"sticker"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"type":"image","mimeType":"image\/jpeg","width":2560,"height":1494,"sizes":{"medium":{"file":"Hire-ReactJS-Development-Company-300x175.jpg","width":300,"height":175,"filesize":10213,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-300x175.jpg"},"large":{"file":"Hire-ReactJS-Development-Company-1024x598.jpg","width":1024,"height":598,"filesize":61192,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-1024x598.jpg"},"thumbnail":{"file":"Hire-ReactJS-Development-Company-150x150.jpg","width":150,"height":150,"filesize":6212,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-150x150.jpg"},"medium_large":{"file":"Hire-ReactJS-Development-Company-768x448.jpg","width":768,"height":448,"filesize":39974,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-768x448.jpg"},"1536x1536":{"file":"Hire-ReactJS-Development-Company-1536x896.jpg","width":1536,"height":896,"filesize":109558,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-1536x896.jpg"},"2048x2048":{"file":"Hire-ReactJS-Development-Company-2048x1195.jpg","width":2048,"height":1195,"filesize":166435,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-2048x1195.jpg"},"menu-24x24":{"file":"Hire-ReactJS-Development-Company-24x14.jpg","width":24,"height":14,"filesize":842,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-24x14.jpg"},"menu-36x36":{"file":"Hire-ReactJS-Development-Company-36x21.jpg","width":36,"height":21,"filesize":1024,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-36x21.jpg"},"menu-48x48":{"file":"Hire-ReactJS-Development-Company-48x28.jpg","width":48,"height":28,"filesize":1170,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-48x28.jpg"},"full":{"file":"Hire-ReactJS-Development-Company-scaled.jpg","width":2560,"height":1494,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-scaled.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#262c30","blurHash":"U38}729G00-o9a?w-:4TX8tRD%Rk?wD$NF-;","creationDate":"2023-04-18T07:00:05","src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/04\/Hire-ReactJS-Development-Company-scaled.jpg","id":1093,"alt":"","local":false},"type":"image","x":-136,"y":252,"width":861,"height":430,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"88344f7a-4abc-4045-82be-ab9bf33665bf"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"98bc5129-a2fa-454f-bd9e-96c9bf738d4b","type":"effect-fly-in","targets":["6064d4ac-bb65-4627-842f-31a79228ba5d"],"flyInDir":"leftToRight","duration":5000,"delay":1200}],"type":"page","id":"72e0e5c3-c99e-4d06-9461-14b0afabfd43","pageTemplateType":null,"groups":{"a441d415-f1be-4f29-b8e5-fe56cb9554b9":{"name":"Graphic","isLocked":false,"isCollapsed":true},"2ad115f4-812d-4816-919f-b050bb9d00e2":{"name":"Graphic","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"id":"f0c28e66-fa06-468a-abf2-b58701a1d704","type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":48,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"font-weight: 300; color: #a2f6fc\">Read&nbsp;<\/span>\n<span style=\"font-weight: 300; color: #a2f6fc\">in&nbsp;<\/span>\n<span style=\"font-weight: 300; color: #a2f6fc\">Detail&nbsp;<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":229,"height":169,"id":"51508948-08ab-4382-aa39-571326a74741","x":51,"y":106,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":18,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.399999999999999911182158029987476766109466552734375,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #00f0ff\">React &amp;<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":70,"height":27,"id":"6819b5a8-2bb7-4c06-94ed-2f447cf88497","x":148,"y":351,"type":"text","groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Titillium Web"},"fontSize":22,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"font-weight: 700; color: #dffdff\">ChatGPT Integrations<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"width":183,"height":55,"id":"a97a3a00-d7c3-4786-9033-524993ffd119","x":148,"y":378,"type":"text","groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":12,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.1999999999999999555910790149937383830547332763671875,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false},"content":"<span style=\"color: #fff; letter-spacing: 0.25em\">..................................................<\/span>","borderRadius":{"locked":true,"topLeft":0,"topRight":0,"bottomRight":0,"bottomLeft":0},"x":51,"y":281,"width":313,"height":13,"id":"f1964199-53b7-4dca-8eb1-435a693f28c3","type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":49.93801556453907863897256902419030666351318359375,"focalY":50.20747667923205170836808974854648113250732421875,"resource":{"type":"image","mimeType":"image\/jpeg","width":2560,"height":1366,"sizes":{"medium":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-300x160.jpg","width":300,"height":160,"filesize":11135,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-300x160.jpg"},"large":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1024x547.jpg","width":1024,"height":547,"filesize":78299,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1024x547.jpg"},"thumbnail":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-150x150.jpg","width":150,"height":150,"filesize":6590,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-150x150.jpg"},"medium_large":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-768x410.jpg","width":768,"height":410,"filesize":50096,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-768x410.jpg"},"1536x1536":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1536x820.jpg","width":1536,"height":820,"filesize":141226,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-1536x820.jpg"},"2048x2048":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-2048x1093.jpg","width":2048,"height":1093,"filesize":213368,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-2048x1093.jpg"},"menu-24x24":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-24x13.jpg","width":24,"height":13,"filesize":808,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-24x13.jpg"},"menu-36x36":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-36x19.jpg","width":36,"height":19,"filesize":970,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-36x19.jpg"},"menu-48x48":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-48x26.jpg","width":48,"height":26,"filesize":1071,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-48x26.jpg"},"full":{"file":"JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg","width":2560,"height":1366,"mimeType":"image\/jpeg","sourceUrl":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#1d1e26","blurHash":"U45~2.~DIS9ItlxskARl00D+x^-.L~M|oz%1","creationDate":"2023-12-28T08:06:26","src":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2023\/12\/JS-Panthar-Blog-Image-Integrate-ChatGPT-with-React-scaled.jpg","id":1989,"alt":"Integrate chatgpt with react","local":false},"type":"image","x":60,"y":371,"width":65,"height":62,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"9dca8c44-b0b1-487f-8842-987af6941e7a"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"backgroundColor":{"color":{"r":162,"g":246,"b":252}},"width":234,"height":44,"type":"shape","x":77,"y":510,"mask":{"type":"rectangle"},"id":"5b648d7e-c4db-41e0-8abd-789e2012fdb1","link":{"needsProxy":false,"url":"https:\/\/www.jspanther.com\/blog\/chatgpt-integration-with-react\/","rel":[],"type":"regular","pageId":null,"icon":null,"desc":null}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":27,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.1999999999999999555910790149937383830547332763671875,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"content":"<span style=\"font-weight: 700; color: #002e73\">CLICK HERE&nbsp;<\/span>","x":125,"y":516,"width":290,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"type":"text","height":32,"id":"622f4468-1d34-48a5-9123-895bcaee936b","link":{"needsProxy":false,"url":"https:\/\/www.jspanther.com\/blog\/chatgpt-integration-with-react\/","rel":[],"type":"regular","pageId":null,"icon":null,"desc":null}}],"animations":[{"id":"6791cdae-dd45-4048-b79d-afff5156830c","type":"effect-fade-in","targets":["51508948-08ab-4382-aa39-571326a74741"],"duration":1200,"delay":0},{"id":"1e766e24-daac-4ff8-bcea-69ff5efcc35c","type":"effect-fly-in","targets":["a97a3a00-d7c3-4786-9033-524993ffd119"],"flyInDir":"bottomToTop","duration":1200,"delay":0},{"id":"503da795-17c7-4e76-ab12-48d1a44e8d2d","type":"effect-fly-in","targets":["6819b5a8-2bb7-4c06-94ed-2f447cf88497"],"flyInDir":"bottomToTop","duration":1200,"delay":0},{"id":"6582d22b-817f-4f90-a52a-43498a5de451","type":"effect-fade-in","targets":["f1964199-53b7-4dca-8eb1-435a693f28c3"],"duration":2000,"delay":0}],"backgroundColor":{"color":{"r":21,"g":33,"b":50}},"type":"page","id":"33c9d3cf-e900-457a-8bc3-a09452f6d8b6","pageTemplateType":"list","groups":{"f53a69c3-293c-42be-b4e4-2da6a4f9b81d":{"name":"Story 2","isLocked":false,"isCollapsed":true}}}],"fonts":{"Titillium Web":{"family":"Titillium Web","fallbacks":["sans-serif"],"weights":[200,300,400,600,700,900],"styles":["italic","regular"],"variants":[[0,200],[1,200],[0,300],[1,300],[0,400],[1,400],[0,600],[1,600],[0,700],[1,700],[0,900]],"service":"fonts.google.com","metrics":{"upm":1000,"asc":1133,"des":-388,"tAsc":1133,"tDes":-388,"tLGap":0,"wAsc":1133,"wDes":388,"xH":500,"capH":692,"yMin":-285,"yMax":1082,"hAsc":1133,"hDes":-388,"lGap":0}},"Roboto":{"family":"Roboto","fallbacks":["sans-serif"],"weights":[100,300,400,500,700,900],"styles":["italic","regular"],"variants":[[0,100],[1,100],[0,300],[1,300],[0,400],[1,400],[0,500],[1,500],[0,700],[1,700],[0,900],[1,900]],"service":"fonts.google.com","metrics":{"upm":2048,"asc":1900,"des":-500,"tAsc":1536,"tDes":-512,"tLGap":102,"wAsc":1946,"wDes":512,"xH":1082,"capH":1456,"yMin":-555,"yMax":2163,"hAsc":1900,"hDes":-500,"lGap":0}}},"autoAdvance":true,"defaultPageDuration":5,"currentStoryStyles":{"colors":[{"color":{"r":0,"g":240,"b":255}},{"color":{"r":0,"g":46,"b":115}},{"color":{"r":162,"g":246,"b":252}},{"color":{"r":255,"g":255,"b":255}},{"color":{"r":21,"g":33,"b":50}}]}},"story_poster":{"id":2278,"url":"https:\/\/www.jspanther.com\/blog\/app\/uploads\/2024\/05\/cropped-react-js.jpg","width":640,"height":853,"needsProxy":false},"_links":{"self":[{"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/web-story\/2274"}],"collection":[{"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/web-story"}],"about":[{"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/wp\/v2\/types\/web-story"}],"author":[{"embeddable":true,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/users\/1"}],"version-history":[{"count":4,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/web-story\/2274\/revisions"}],"predecessor-version":[{"id":2283,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/web-story\/2274\/revisions\/2283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/media\/2278"}],"wp:attachment":[{"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/media?parent=2274"}],"wp:term":[{"taxonomy":"web_story_category","embeddable":true,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/web_story_category?post=2274"},{"taxonomy":"web_story_tag","embeddable":true,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/web_story_tag?post=2274"}],"wp:lock":[{"embeddable":true,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/web-story\/2274\/lock"}],"wp:publisherlogo":[{"embeddable":true,"href":"https:\/\/www.jspanther.com\/blog\/wp-json\/web-stories\/v1\/media\/2268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}