{"id":21710282,"url":"https://github.com/cloudinary-devs/cloudinary-chatbot-openai-demo","last_synced_at":"2025-03-20T17:50:39.230Z","repository":{"id":244321224,"uuid":"804294439","full_name":"cloudinary-devs/Cloudinary-Chatbot-OpenAI-Demo","owner":"cloudinary-devs","description":"This sample app shows how to build and customize a a chatbot using OpenAI APIs and SDK. In this demo we also make use of DALLE for the generation of AI image to be used as avatars in the chat.","archived":false,"fork":false,"pushed_at":"2024-06-14T00:36:35.000Z","size":110,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-25T16:32:07.290Z","etag":null,"topics":["cloudinary","openai","openai-api","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudinary-devs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-22T10:22:57.000Z","updated_at":"2024-06-14T00:36:39.000Z","dependencies_parsed_at":"2024-06-14T02:09:04.120Z","dependency_job_id":"03ef1953-f3b0-4744-917b-09aa46ede3c6","html_url":"https://github.com/cloudinary-devs/Cloudinary-Chatbot-OpenAI-Demo","commit_stats":null,"previous_names":["cloudinary-devs/cloudinary-chatbot-openai-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2FCloudinary-Chatbot-OpenAI-Demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2FCloudinary-Chatbot-OpenAI-Demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2FCloudinary-Chatbot-OpenAI-Demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2FCloudinary-Chatbot-OpenAI-Demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudinary-devs","download_url":"https://codeload.github.com/cloudinary-devs/Cloudinary-Chatbot-OpenAI-Demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244666423,"owners_count":20490286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudinary","openai","openai-api","react"],"created_at":"2024-11-25T23:14:34.144Z","updated_at":"2025-03-20T17:50:39.206Z","avatar_url":"https://github.com/cloudinary-devs.png","language":"JavaScript","readme":"![Cloudinary Developers](https://github.com/cloudinary-devs/.github/blob/main/assets/cloudinary-banner.png?raw=true)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://twitter.com/cloudinary\" target=\"_blank\"\u003eTwitter\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;-\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n  \u003ca href=\"https://cloudinary.com/\" target=\"_blank\"\u003eCloudinary\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;-\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n  \u003ca href=\"https://cloudinary.com/documentation\" target=\"_blank\"\u003eDocs\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;-\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n  \u003ca href=\"https://github.com/cloudinary-devs\" target=\"_blank\"\u003eCode Samples\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;-\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n  \u003ca href=\"https://cloudinary.com/blog/\" target=\"_blank\"\u003eBlog\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;-\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n  \u003ca href=\"https://community.cloudinary.com/\" target=\"_blank\"\u003eCommunity\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003chr /\u003e\n\u003c/div\u003e\n\n# Cloudinary OpenAI Chatbot Sample\n\nThis sample app shows how to build and customize a a chatbot using [OpenAI APIs and SDK](https://platform.openai.com/docs/introduction). In this demo we also make use of DALLE for the generation of AI image to be used as avatars in the chat.\n\n## Run this project\n\n### Locally\n\n- Clone this repo\n- In the `.env` file enter your `OPENAI_API_KEY`.\n- Add your environment variables in the `.env` file.\n- Run `npm run start` to run your NodeJS server in the port 6000.\n- In a separate terminal run `npm run dev` to run your React application.\n- Open [http://localhost:3000/](http://localhost:3000/) in your browser.\n\n## ChatBot Functionality - server.js\n\nThis code uses the [OpenAI SDK method **completions**](https://platform.openai.com/docs/guides/gpt/chat-completions-api) to generate a conversation using ChatGPT 3.5 for the conversationinal AI. We also provided a `demoModel` to train our chatbot to focus on content around the Cloudinary Developer documentation.\n\n```javascript\napp.post(\"/api/chat\", async (req, res) =\u003e {\n  /*\n    Train the model by giving it some previous conversations\n    */\n  const demoModel = [\n    {\n      role: \"user\",\n      content:\n        \"Hi, can you tell me where to find information about the Cloudinary React sdk?\",\n    },\n    {\n      role: \"assistant\",\n      content:\n        \"Yes, the conentent can be found inside of this website https://cloudinary.com/documentation/react_integration\",\n    },\n    {\n      role: \"user\",\n      content:\n        \"can you tell me where to find information about the cloudinary transformations\",\n    },\n    {\n      role: \"assistant\",\n      content:\n        \"Yes, the conentent can be found inside of this website https://cloudinary.com/documentation/react_image_transformations\",\n    },\n    {\n      role: \"user\",\n      content: \"can you tell me how to display an image using the cloudinary React SDK\",\n    },\n    {\n      role: \"assistant\",\n      content: `Yes, to display an image using cloudinary follow this guide https://cloudinary.com/documentation/react_integration#landingpage and this code sample\n      import React from 'react'\n      import {AdvancedImage} from '@cloudinary/react';\n      import {Cloudinary} from \"@cloudinary/url-gen\";\n      \n      // Import required actions.\n      import {sepia} from \"@cloudinary/url-gen/actions/effect\";\n      \n      const App = () =\u003e {\n      \n        // Create and configure your Cloudinary instance.\n        const cld = new Cloudinary({\n          cloud: {\n            cloudName: 'demo'\n          }\n        }); \n      \n        // Use the image with public ID, 'front_face'.\n        const myImage = cld.image('front_face');\n      \n        // Apply the transformation.\n        myImage\n        .effect(sepia());  // Apply a sepia effect.\n      \n        // Render the transformed image in a React component.\n        return (\n          \u003cdiv\u003e\n            \u003cAdvancedImage cldImg={myImage} /\u003e\n          \u003c/div\u003e\n        )\n      };\n        `,\n    },\n  ];\n  \n  const { messages } = req.body;\n  messages[messages.length - 1].content = `${\n    messages[messages.length - 1].content\n  }.`;\n\n  /**\n   * Call the OpenAI SDK and get a response\n   */\n  try {\n    const response = await openai.chat.completions.create({\n      model: \"gpt-3.5-turbo\",\n      messages: [...messages, ...demoModel], // pass the new message and the previous messages\n    });\n    console.log(response);\n    res.json(response.choices[0].message);\n  } catch (error) {\n    console.error(error);\n    res.status(500).json({ error: \"Internal Server Error\" });\n  }\n});\n```\n\n## AI Images With DALLE - server.js\n\nThis code uses the the [Image Create endpoint](https://platform.openai.com/docs/api-reference/images) that uses DALLE in the background to generate the AI images (avatars) for the chatbot.\n\n```javascript\napp.post(\"/api/avatar\", async (req, res) =\u003e {\n  const requestData = {\n    prompt: `generate picture of animal`,\n    n: 2,\n    size: \"256x256\",\n  };\n\n  try {\n    const response = await fetch(\n      \"https://api.openai.com/v1/images/generations\",\n      {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,\n        },\n        body: JSON.stringify(requestData),\n      }\n    );\n\n    if (response.ok) {\n      const data = await response.json();\n      console.log(\"Response:\", data);\n      res.json(data.data);\n    } else {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n  } catch (error) {\n    console.error(\"Error:\", error);\n    res.status(500).json({ error: \"Internal Server Error\" });\n  }\n});\n```\n\n## Cloudinary Community\n\nEngage in collaborative coding, connect with fellow enthusiasts, and gather insights from a vibrant open-source network over on [Twitter](https://twitter.com/cloudinary), [Discord](https://discord.gg/cloudinary), or the [Community Forums](https://community.cloudinary.com/)\n\n## Show your support\n\nGive a ⭐️ if this project helped you, and watch this repo to stay up to date.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-devs%2Fcloudinary-chatbot-openai-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudinary-devs%2Fcloudinary-chatbot-openai-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-devs%2Fcloudinary-chatbot-openai-demo/lists"}