Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Create your own ChatGPT App in 1 Minute
.
.

Posted on • Edited on

     

Create your own ChatGPT App in 1 Minute

Here's what we'll be building in just a minute:

Gif recording of the complete chat interface

Thecreate-svelte-chatgpt package enables you to effortlessly set up a SvelteKit application integrated with ChatGPT, the powerful language model by OpenAI. This package comes with a pre-built chat interface, saving you time on design and implementation. As a demonstration of what you can achieve with this package, we'll walk through the process of creating a chatbot that impersonates a specific character. Even if you're not familiar with Svelte, you can easily follow along and get started.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js installed on your system
  • An OpenAI API key (you can obtain one from theOpenAI dashboard)

Step 1: Install the create-svelte-chatgpt package

Execute the following command in your terminal:

npx create-svelte-chatgpt@latest
Enter fullscreen modeExit fullscreen mode

This command prompts you for a project name, and then generates a new SvelteKit application with ChatGPT preconfigured.

Step 2: Configure your API key and environment

cd into your project directory, create a.env file in the root directory of your new project and add yourOpenAI API key. Optionally, you can also provide a Redis URL and password for persistent chat history.

OPENAI_API_KEY=xxxREDIS_URL=yyy# OptionalREDIS_PASSWORD=zzz# Optional
Enter fullscreen modeExit fullscreen mode

Step 3: Customize the chatbot character

Navigate to thesrc/lib/config/index.ts file. You'll find acreateConfig() function that returns an object containing various properties related to the chatbot character. To customise the character, modify the following properties:

  • nickName: The nickname for your character.
  • fullName: The full name of the character.
  • receiverImgSrc: The URL or path to the image representing the character.
  • senderImgSrc: The URL or path to the image representing the user.
  • promptPrefix: A prefix added to user input to guide the AI (e.g., "Act as Elon Musk, ").

For instance, you can alter the configuration to simulate a conversation with Elon Musk:

exportfunctioncreateConfig(){return{nickName:'Elon',fullName:'Elon Musk',receiverImgSrc:'https://i.imgur.com/zUAmDNj.png'// This was generated via MidJourney!,senderImgSrc:senderImg,promptPrefix:'Answer this as if you were Elon Musk:\n\n'};}
Enter fullscreen modeExit fullscreen mode

Step 4: Run the application

Start a development server by executing the following command in your terminal:

npm run dev
Enter fullscreen modeExit fullscreen mode

Now, open your browser and visithttp://localhost:5173 to interact with your chatbot character.

Conclusion

Thecreate-svelte-chatgpt package serves as a boilerplate for building chatbot applications with Svelte and ChatGPT. Now that you have a solid foundation in place, you can expand and customise your application to suit your needs. The possibilities are endless, happy coding!

Top comments(5)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
dmitrygrishin profile image
Dmitry
  • Joined

Windows 11:
Error: Command failed: cp 😊

CollapseExpand
 
willkre profile image
.
  • Joined
• Edited on• Edited

Thanks for letting me know. I just published a fix that should work for Windows. If for some reason it doesn't (I don't have windows to check myself), you can go to therepo, clone it, and drag out the contents within thetemplate directory.

CollapseExpand
 
dmitrygrishin profile image
Dmitry
  • Joined

Everything works fine now!
But...
Reloads Page after receiving response in Firefox. Chrome is ok!
Thank you!

Thread Thread
 
willkre profile image
.
  • Joined

FYI/for anyone else reading someone raised a small fix for this which wasmerged & published.

CollapseExpand
 
oneezy profile image
Justin O'Neill
  • Joined

thanks for this! thepromptPrefix: 'Answer this as if you were Elon Musk: \n\n' doesn't appear to be working

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Joined

More from.

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp