Wasp•7mo ago

How do I add a different chatgpt api call

Hey folks, I want to add another form, and take those form parameters and embed them into a chatgpt prompt and fire off and display the response to users, however I am having trouble understanding the flow of the current gpt prompts andhow to build another. Thank you

7 Replies

kapa.ai•7mo ago

Hi @haarismian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a new form and use its parameters in a ChatGPT prompt, you'll need to follow a few steps. First, you'll need to create a new form in your React component. Here's an example of how to create a form in Wasp:

const NewForm = () => {  
 const handleSubmit = async (event) => {  
 event.preventDefault()  
 try {  
 const target = event.target  
 const parameter1 = target.parameter1.value  
 const parameter2 = target.parameter2.value  
 target.reset()  
 // Here you would call your action that interacts with the ChatGPT API
 } catch (err) {  
 window.alert('Error: ' + err.message)  
 }  
 }  
  
 return (  
 <form onSubmit={handleSubmit}>  
 <input name="parameter1" type="text" defaultValue="" />  
 <input name="parameter2" type="text" defaultValue="" />  
 <input type="submit" value="Submit" />  
 </form>  
 )  
}

const NewForm = () => {  
 const handleSubmit = async (event) => {  
 event.preventDefault()  
 try {  
 const target = event.target  
 const parameter1 = target.parameter1.value  
 const parameter2 = target.parameter2.value  
 target.reset()  
 // Here you would call your action that interacts with the ChatGPT API
 } catch (err) {  
 window.alert('Error: ' + err.message)  
 }  
 }  
  
 return (  
 <form onSubmit={handleSubmit}>  
 <input name="parameter1" type="text" defaultValue="" />  
 <input name="parameter2" type="text" defaultValue="" />  
 <input type="submit" value="Submit" />  
 </form>  
 )  
}

Source (https://wasp-lang.dev/docs/tutorial/actions#invoking-the-action-on-the-client) Next, you'll need to create a new action that takes the parameters from your form and uses them to interact with the ChatGPT API. Unfortunately, the provided knowledge sources do not contain specific information on how to create an action that interacts with the ChatGPT API in Wasp. However, you can refer to the Wasp documentation on Actions (https://wasp-lang.dev/docs/tutorial/actions) to understand how to create actions in general. For the specifics of interacting with the ChatGPT API, you would need to refer to the OpenAI documentation or other resources. Once you have the API call set up, you can use the form parameters in the API call to customize the prompt. Finally, you'll need to handle the response from the ChatGPT API and display it to the user. This would typically involve setting some state in your React component with the response, and then displaying that state somewhere in your component's render method. Please note that this is a general guide and the specifics might vary based on your application's requirements and the specifics of the ChatGPT API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @haarismian, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

haarismianOP•7mo ago

@martinsos lol would very much appreciate your guidance here, I am having difficulty following through the code, I understand that I add the component on the frontend, add an action on the backend to actually perform the call, add that action to main.wasp. Is there a more full guide?

martinsos•7mo ago

Hey @haarismian ! This sounds like a question quite specific for your app that you are building: unforunatley I don't have the capacity to dive into it dirctly, but neither could I offer much more than what Kapa says here or what yo ucan find in Wasp docs: https://wasp-lang.dev/docs . Truth is, you will need to have a level of understanidng needed to follow through the code to be able to efficiently developer your Wasp apps! The docs have quite a nice tutorial that hsould help with that!

haarismianOP•7mo ago

Wonderful thank you, does the team offer consulting services to help me build my product?

martinsos•7mo ago

Great question, not yet unfortunately! We are relatively small at the moment (5 people), so all focus is on Wasp, but as we grow we do plan to also offer that directly, or via our partners. We try to help here in Discord the best we can though, but mostyl have to limit help to Wasp specific stuff in order to be able to help everybody on time.

haarismianOP•7mo ago

thank you, this is an incredible project, I have always struggled with getting a full stack app off the ground because of all the different pieces that are required to be managed, even though I have been a dev for many years. All the best, I will keep using opensaas and wasp, and look forward to your continued efforts

Vinny (@Wasp)•7mo ago

what specifically about the Open SaaS example are you unsure about?

Gaming

Programming

How do I add a different chatgpt api call