5 ms·

Show HN: Next.js ChatGPT – Responsive chat application powered by GPT-4

126 points by enricoros 4y ago

enricoros 4y ago
What does it take to make a basic ChatGPT-like frontend, with code highlighting, run in sandbox, drop-files, and 'acting' in prompts? Clone away and enjoy. First time poster
- anonzzzies 4y ago
  Thanks, it is good :) You don’t need the serverside though; you can just call openai apis straight from the client. Makes things easier!
  - capableweb 4y ago
    It seems to support both? First it tries to load the key from a environment variable, and if it cannot, it'll ask for it client-side. None the less, if you're building a project for others, you most likely don't want the secret key to be public, which it'd be if you embed it in the client-side code.
    - anonzzzies 4y ago
      > It seems to support both? Ah, only saw the api one!
  - yodon 4y ago
    If you call the openai API's straight from the FrontEnd, you are likely leaking your api keys to visitors who can then use your api keys (and api key limits) for their own purposes.
    - anonzzzies 4y ago
      Nah, you ask them to enter their own; if you use yours, then yes, only use backend. In this case, the author is not using his, you have to bring your own, so frontend is fine.
- nico 4y ago
  What do you mean by “acting”? That it pretends to be a Scientist? Or that it can perform actions (like sending an email or searching the web)? If the latter, do you have more info/docs about it? Didn’t see it on the roadmap.
  - capableweb 4y ago
    You can kind of program something around the API to make it able to perform actions. That's the way I'm guessing Microsoft did it with Bing. Here is an example: System prompt: - You are a text-based AI delegates to other AIs. - You only respond in JSON with two keys `delegate_to` and `parameters`. - `delegate_to` defines what other AI you should delegate to. - `parameters` are parameters to send to that AI. - Here is the list of possible delegates - delegate_to: email_ai, parameters: $to $subject $body, used for sending emails - delegate_to: calendar_ai, parameters: $time, $date, $title, used for creating events in a calendar - delegate_to: search_ai, parameters: $search-term - Be creative and helpful. - Your goal is to take user input and successfully delegate the task you receive from the user to the correct AI. - Your initial message to the user should welcome them and ask them what you can do for them. Example conversation: > {"message": "Welcome! I'm your AI assistant. What can I do for you today?"} > User: Send email to john@example.com asking if he wants to have dinner tonight { "delegate_to": "email_ai", "parameters": { "to": "john@example.com", "subject": "Dinner Invitation", "body": "Hi John, would you like to have dinner together tonight? Let me know your thoughts. Best regards." } } Then you'd make your program read the JSON messages it generates and perform the correct action.
    - nico 4y ago
      Nice. How would you go about providing a dynamic list of delgates? Could it work to just give one delegate that can provide a list of delegates with a description of the actions they can perform (then that delegate can query a db and return a list)? Re-reading, I’m guessing the prompt could also be dynamically generated to include the most relevant delegates.
      - 4y ago
- justplay 4y ago
  like https://www.chatwithme.chat https://www.chatwithme.chat ?
  - behnamoh 4y ago
    This hijacks the Back button on Chrome. Not trustworthy.
yayr 4y ago
nice, maybe you can make the initializing prompts in https://github.com/enricoros/nextjs-chatgpt-app/blob/main/pages/index.tsx https://github.com/enricoros/nextjs-chatgpt-app/blob/main/pa... transparent to the user and even changeable by them.
- enricoros 4y ago
  When the user selects one of those, any query will reveal the prompt. Can be changed but the change won't be persisted yet. We added a 'Custom' preset today that requires editing. Agree with your point tho - rn editing happens via 'forking' :)
tonyoconnell 4y ago
Here's one made with Astro https://github.com/ddiu8081/chatgpt-demo https://github.com/ddiu8081/chatgpt-demo There's a fork in Chinese somewhere with loads more features.
- stoicjumbotron 4y ago
  This is sweet! Thanks for posting this
phil42 4y ago
But I need an GPT-4 api key for that, right? The normal API keys don't work?
- tonyoconnell 4y ago
  Seems to fall back to GPT 3 if you haven't got access to GPT 4 API yet
  - fredliu 4y ago
    hmm... doesn't seem to be the case, when I provided my gpt-3 turbo key the error message indicates the gpt-4 model doesn't exist.
    - capableweb 4y ago
      Change this https://github.com/enricoros/nextjs-chatgpt-app/blob/466a3667a48060d406d60943af01fe26366563fb/pages/api/chat.ts#L15 https://github.com/enricoros/nextjs-chatgpt-app/blob/466a366... to say "gpt-3.5-tubo" and it should work for you
      - trendoid 4y ago
        I updated the model in that file, deployed again using Vercel but still same error.
        capableweb 4y ago
        It seems like it's setting gpt-4 here as well: https://github.com/enricoros/nextjs-chatgpt-app/blob/466a3667a48060d406d60943af01fe26366563fb/pages/api/chat.ts#L133 https://github.com/enricoros/nextjs-chatgpt-app/blob/466a366... But come on, read through the source, look for the issue, I'm sure you can track down at least something :)
        trendoid 4y ago
deleted 4y ago
[deleted]

126 points by enricoros 4y ago

What does it take to make a basic ChatGPT-like frontend, with code highlighting, run in sandbox, drop-files, and 'acting' in prompts? Clone away and enjoy. First time poster

anonzzzies 4y ago
Thanks, it is good :) You don’t need the serverside though; you can just call openai apis straight from the client. Makes things easier!
- capableweb 4y ago
  It seems to support both? First it tries to load the key from a environment variable, and if it cannot, it'll ask for it client-side. None the less, if you're building a project for others, you most likely don't want the secret key to be public, which it'd be if you embed it in the client-side code.
  - anonzzzies 4y ago
    > It seems to support both? Ah, only saw the api one!
- yodon 4y ago
  If you call the openai API's straight from the FrontEnd, you are likely leaking your api keys to visitors who can then use your api keys (and api key limits) for their own purposes.
  - anonzzzies 4y ago
    Nah, you ask them to enter their own; if you use yours, then yes, only use backend. In this case, the author is not using his, you have to bring your own, so frontend is fine.
nico 4y ago
What do you mean by “acting”? That it pretends to be a Scientist? Or that it can perform actions (like sending an email or searching the web)? If the latter, do you have more info/docs about it? Didn’t see it on the roadmap.
- capableweb 4y ago
  You can kind of program something around the API to make it able to perform actions. That's the way I'm guessing Microsoft did it with Bing. Here is an example: System prompt: - You are a text-based AI delegates to other AIs. - You only respond in JSON with two keys `delegate_to` and `parameters`. - `delegate_to` defines what other AI you should delegate to. - `parameters` are parameters to send to that AI. - Here is the list of possible delegates - delegate_to: email_ai, parameters: $to $subject $body, used for sending emails - delegate_to: calendar_ai, parameters: $time, $date, $title, used for creating events in a calendar - delegate_to: search_ai, parameters: $search-term - Be creative and helpful. - Your goal is to take user input and successfully delegate the task you receive from the user to the correct AI. - Your initial message to the user should welcome them and ask them what you can do for them. Example conversation: > {"message": "Welcome! I'm your AI assistant. What can I do for you today?"} > User: Send email to john@example.com asking if he wants to have dinner tonight { "delegate_to": "email_ai", "parameters": { "to": "john@example.com", "subject": "Dinner Invitation", "body": "Hi John, would you like to have dinner together tonight? Let me know your thoughts. Best regards." } } Then you'd make your program read the JSON messages it generates and perform the correct action.
  - nico 4y ago
    Nice. How would you go about providing a dynamic list of delgates? Could it work to just give one delegate that can provide a list of delegates with a description of the actions they can perform (then that delegate can query a db and return a list)? Re-reading, I’m guessing the prompt could also be dynamically generated to include the most relevant delegates.
    - 4y ago
justplay 4y ago
like https://www.chatwithme.chat https://www.chatwithme.chat ?
- behnamoh 4y ago
  This hijacks the Back button on Chrome. Not trustworthy.

yayr 4y ago

nice, maybe you can make the initializing prompts in https://github.com/enricoros/nextjs-chatgpt-app/blob/main/pages/index.tsx https://github.com/enricoros/nextjs-chatgpt-app/blob/main/pa... transparent to the user and even changeable by them.

enricoros 4y ago
When the user selects one of those, any query will reveal the prompt. Can be changed but the change won't be persisted yet. We added a 'Custom' preset today that requires editing. Agree with your point tho - rn editing happens via 'forking' :)

tonyoconnell 4y ago

Here's one made with Astro https://github.com/ddiu8081/chatgpt-demo https://github.com/ddiu8081/chatgpt-demo There's a fork in Chinese somewhere with loads more features.

stoicjumbotron 4y ago
This is sweet! Thanks for posting this

phil42 4y ago

But I need an GPT-4 api key for that, right? The normal API keys don't work?

tonyoconnell 4y ago
Seems to fall back to GPT 3 if you haven't got access to GPT 4 API yet
- fredliu 4y ago
  hmm... doesn't seem to be the case, when I provided my gpt-3 turbo key the error message indicates the gpt-4 model doesn't exist.
  - capableweb 4y ago
    Change this https://github.com/enricoros/nextjs-chatgpt-app/blob/466a3667a48060d406d60943af01fe26366563fb/pages/api/chat.ts#L15 https://github.com/enricoros/nextjs-chatgpt-app/blob/466a366... to say "gpt-3.5-tubo" and it should work for you
    - trendoid 4y ago
      I updated the model in that file, deployed again using Vercel but still same error.
      - capableweb 4y ago
        It seems like it's setting gpt-4 here as well: https://github.com/enricoros/nextjs-chatgpt-app/blob/466a3667a48060d406d60943af01fe26366563fb/pages/api/chat.ts#L133 https://github.com/enricoros/nextjs-chatgpt-app/blob/466a366... But come on, read through the source, look for the issue, I'm sure you can track down at least something :)
        trendoid 4y ago

deleted 4y ago

[deleted]