Add AI to your app using ChatGPT - Revision history

Ghenne at 14:24, 17 September 2024

2024-09-17T14:24:57Z

← Older revision		Revision as of 14:24, 17 September 2024
Line 11:		Line 11:
	Once that is done, you will need to [https://platform.openai.com/api-keys get an API Key]. It's a long string you will need to paste into your app - see the sample code.		Once that is done, you will need to [https://platform.openai.com/api-keys get an API Key]. It's a long string you will need to paste into your app - see the sample code.

	Note that ~~the~~ API Key ~~needs to~~ be kept secret. For testing, it's fine to leave it hard coded in your app. However, if you deploy it to your website, anyone with a browser will be able to see it.		Note that your API Key must be kept secret. For testing, it's fine to leave it hard coded in your app. However, if you deploy it to your website, anyone with a browser will be able to see it (and hijack it!)

	===== Sample =====		===== Sample =====
Line 57:		Line 57:

	===== Notes =====		===== Notes =====
	1. ChatGPT has a number of models, with new ones being released regularly. Change the value of `model` to the one you would like to use.		# ChatGPT has a number of models, with new ones being released regularly. Change the value of `model` to the one you would like to use.
	1. You can specify other parameters like `temperature` in the `data` object. [https://platform.openai.com/docs/api-reference/chat/create See the API docs].		# You can specify other parameters like `temperature` in the `data` object. [https://platform.openai.com/docs/api-reference/chat/create See the API docs].
	1.		# Changes to your account at ChatGPT may not take place immediately. For example, we've seen a short delay from entering payments details to actually being able to use the API.
			# All of this is subject to change - this is a rapidly developing field.

	===== See Also =====		===== See Also =====

Ghenne at 14:19, 17 September 2024

2024-09-17T14:19:23Z

← Older revision		Revision as of 14:19, 17 September 2024
Line 25:		Line 25:
	model: "gpt-4o-mini", // or 'gpt-4' if you have access		model: "gpt-4o-mini", // or 'gpt-4' if you have access
	messages: [{ role: "user", content: prompt }],		messages: [{ role: "user", content: prompt }],
	~~// Optionally you can specify other parameters like temperature~~
	~~// See the API docs here:~~
	~~// https://platform.openai.com/docs/api-reference/chat/create~~
	};		};

Line 60:		Line 57:

	===== Notes =====		===== Notes =====
			1. ChatGPT has a number of models, with new ones being released regularly. Change the value of `model` to the one you would like to use.
			1. You can specify other parameters like `temperature` in the `data` object. [https://platform.openai.com/docs/api-reference/chat/create See the API docs].
			1.

	===== See Also =====		===== See Also =====

Ghenne: /* Notes */

2024-09-17T14:15:40Z

Notes

← Older revision		Revision as of 14:15, 17 September 2024
Line 60:		Line 60:

	===== Notes =====		===== Notes =====

			===== See Also =====

Ghenne: /* See Also */

2024-09-17T14:14:54Z

Ghenne: /* Notes */

2024-09-17T14:14:26Z

Notes

← Older revision		Revision as of 14:14, 17 September 2024
Line 60:		Line 60:

	===== Notes =====		===== Notes =====

			===== See Also =====

Ghenne at 14:13, 17 September 2024

2024-09-17T14:13:51Z

← Older revision		Revision as of 14:13, 17 September 2024
Line 1:		Line 1:
	[[File:Screenshot 2024-09-16 at 4.24.39 PM.png]]		[[File:Screenshot 2024-09-16 at 4.24.39 PM.png]]

			===== Introduction =====

	You can add AI capabilities to any AppStudio app. This can be in the form of a question box, or based on information that your app has collected about the user's needs. Almost any valid query will work, whether generated by the user or constructed by your app.		You can add AI capabilities to any AppStudio app. This can be in the form of a question box, or based on information that your app has collected about the user's needs. Almost any valid query will work, whether generated by the user or constructed by your app.
Line 10:		Line 12:

	Note that the API Key needs to be kept secret. For testing, it's fine to leave it hard coded in your app. However, if you deploy it to your website, anyone with a browser will be able to see it.		Note that the API Key needs to be kept secret. For testing, it's fine to leave it hard coded in your app. However, if you deploy it to your website, anyone with a browser will be able to see it.

			===== Sample =====

	Here is some sample code, followed by notes on its usage:		Here is some sample code, followed by notes on its usage:
Line 54:		Line 58:
	}		}
	</pre>		</pre>

			===== Notes =====

Ghenne at 22:21, 16 September 2024

2024-09-16T22:21:58Z

← Older revision		Revision as of 22:21, 16 September 2024
Line 13:		Line 13:
	Here is some sample code, followed by notes on its usage:		Here is some sample code, followed by notes on its usage:
	<pre>		<pre>
	const apiKey = "sk-~~proj~~-~~c8pVFA33uFacoVSFj02WRqqCqtwOm6Lk_tnkyioTDpiZx_KjOTrkbcgw4vJe1qcA061svIVBwvT3BlbkFJNoP9cklSz9Pt3Y1b3TTQvOYt4MResOouPmDYGj3ka2WnQMmBww1xRv4OJPbRyR_g6y5w2qiuUA~~"; // Replace with your actual API key		const apiKey = "my-api-key"; // Replace with your actual API key

	async function callChatGPT(prompt) {		async function callChatGPT(prompt) {

Ghenne at 20:26, 16 September 2024

2024-09-16T20:26:21Z

← Older revision		Revision as of 20:26, 16 September 2024
Line 1:		Line 1:
			[[File:Screenshot 2024-09-16 at 4.24.39 PM.png]]

	You can add AI capabilities to any AppStudio app. This can be in the form of a question box, or based on information that your app has collected about the user's needs. Almost any valid query will work, whether generated by the user or constructed by your app.		You can add AI capabilities to any AppStudio app. This can be in the form of a question box, or based on information that your app has collected about the user's needs. Almost any valid query will work, whether generated by the user or constructed by your app.

Ghenne at 18:14, 16 September 2024

2024-09-16T18:14:06Z

← Older revision		Revision as of 18:14, 16 September 2024
Line 3:		Line 3:
	The method described here is based on ChatGPT, currently the most widely used AI assistant. Other AI assistants can be used. While their implementation details may differ, the general method will be similar.		The method described here is based on ChatGPT, currently the most widely used AI assistant. Other AI assistants can be used. While their implementation details may differ, the general method will be similar.

	The first step is to set up an account at [https://~~chatgpt~~.com/ ChatGPT]. You will need to enter a credit card as well - but usage for testing purposes is quite inexpensive.		The first step is to set up an account at [https://platform.openai.com ChatGPT]. You will need to enter a credit card as well - but usage for testing purposes is quite inexpensive.

	Once that is done, you will need to [https://platform.openai.com/api-keys get an API Key]. It's a long string you will need to paste into your app - see the sample code.		Once that is done, you will need to [https://platform.openai.com/api-keys get an API Key]. It's a long string you will need to paste into your app - see the sample code.

Ghenne: Created page with "You can add AI capabilities to any AppStudio app. This can be in the form of a question box, or based on information that your app has collected about the user's needs. Almost any valid query will work, whether generated by the user or constructed by your app. The method described here is based on ChatGPT, currently the most widely used AI assistant. Other AI assistants can be used. While their implementation details may differ, the general method will be similar. The..."

2024-09-16T18:07:23Z

Created page with "You can add AI capabilities to any AppStudio app. This can be in the form of a question box, or based on information that your app has collected about the user's needs. Almost any valid query will work, whether generated by the user or constructed by your app. The method described here is based on ChatGPT, currently the most widely used AI assistant. Other AI assistants can be used. While their implementation details may differ, the general method will be similar. The..."

New page

You can add AI capabilities to any AppStudio app. This can be in the form of a question box, or based on information that your app has collected about the user's needs. Almost any valid query will work, whether generated by the user or constructed by your app.

The method described here is based on ChatGPT, currently the most widely used AI assistant. Other AI assistants can be used. While their implementation details may differ, the general method will be similar.

The first step is to set up an account at [https://chatgpt.com/ ChatGPT]. You will need to enter a credit card as well - but usage for testing purposes is quite inexpensive.

Once that is done, you will need to [https://platform.openai.com/api-keys get an API Key]. It's a long string you will need to paste into your app - see the sample code.

Note that the API Key needs to be kept secret. For testing, it's fine to leave it hard coded in your app. However, if you deploy it to your website, anyone with a browser will be able to see it.

Here is some sample code, followed by notes on its usage:
<pre>
const apiKey = "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"; // Replace with your actual API key

async function callChatGPT(prompt) {
const url = "https://api.openai.com/v1/chat/completions";
// Prepare the request body
const data = {
model: "gpt-4o-mini", // or 'gpt-4' if you have access
messages: [{ role: "user", content: prompt }],
// Optionally you can specify other parameters like temperature
// See the API docs here:
// https://platform.openai.com/docs/api-reference/chat/create
};

try {
const response = await fetch(url, {
method: "POST",
headers: {
Authorization: `Bearer ${apiKey}`,
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
// Check if the response is ok (status code 200-299)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
console.log("ChatGPT response:", result.choices[0].message.content);
return result.choices[0].message.content;

} catch (error) {
NSB.MegBox("Error calling ChatGPT:", error);
}
}

Button1.onclick = async function(){
lblResults.innerHTML = "Processing..."
result = await callChatGPT(inpQuestion.value);
lblResults.innerText = result;
}
</pre>