mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
162
docs/getting-started/ai-assisted-dev/chat-gpt.md
Normal file
162
docs/getting-started/ai-assisted-dev/chat-gpt.md
Normal file
@@ -0,0 +1,162 @@
|
||||
---
|
||||
title: Develop with ChatGPT
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Develop with ChatGPT
|
||||
|
||||
ChatGPT is a great tool that is used daily to generate code by developers all over the world. However (being a language model and not a programming engine) it does come with its own set of quirks and limitations. In this guide we will look at tips, tricks and strategies for how to get around them, and see why ChatGPT is a great pairing with Noodl.
|
||||
|
||||
> This guide is about how to use [http://chat.openai.com](http://chat.openai.com) as part of the development process.<br/><br/>To use OpenAI as part of your application, check out the [OpenAI prefab](/library/prefabs/openai/).
|
||||
|
||||
## When to ChatGPT
|
||||
|
||||
One of the lesser known limitations of ChatGPT is that it works with a tiny token memory. The details are technical, and not too interesting in the context of this guide, so we won't go in on it too much. Really, the only thing you need to know is that ChatGPT has the memory of a goldfish, and will start forgetting things (including its own train of thought) pretty quickly if you feed it too much information.
|
||||
|
||||
This makes ChatGPT bad at handling large scale application code with many different moving parts. Using ChatGPT to code an application from scratch requires you to know how to program an application from scratch so that you can make up for all the mistakes the AI makes.
|
||||
|
||||
Another implication of the tiny memory is that it limits the amount of instructions we can provide. ChatGPT gives the best solutions when you are very descriptive with what you want to achieve, and a full application requires a lot of describing.
|
||||
|
||||
The best way to get good code from ChatGPT is really to break up your application into smaller modular pieces, generating those with AI, and gluing them together yourself.
|
||||
|
||||
This is where Noodl shines. Since one of the base concepts of Noodl is to break your application into smaller reusable components, we dont have to ask ChatGPT to generate a whole app for us. We can just ask it to do the boring, tedious or more complicated functions. This still requires a little bit of programming know-how, but thanks to Noodls seamless combination of visual and text-based programming you don't have to know how to write complex apps at scale and can instead focus on understanding the functionality at hand.
|
||||
|
||||
:::note
|
||||
|
||||
While this guide is generally about ChatGPT you will get a lot more out of it if you already have some experience with Noodl. It might be a good idea to check out the [Fundamentals](/docs/getting-started/fundamentals) guide, or do the interactive tutorials in the Noodl editor first.
|
||||
|
||||
:::
|
||||
|
||||
### TL;DR:
|
||||
|
||||
ChatGPT is great at generating code for Function and Script nodes, helping you connect to API's, work with external libraries, aggregating data or figuring out chunks of your app.
|
||||
|
||||
It's a good idea to modularize your functions into separate Function nodes, or combine multiple Function nodes in series in a component. This allows ChatGPT to shine in a smaller scope while allowing for great reusability within Noodl.
|
||||
|
||||
ChatGPT is also great as a search engine that you can have a conversation with. The ChatGPT model is trained on data up until 2021, so while it's not good for researching current events, it is very powerful with more general development patterns that can easily be translated into Noodl graphs.
|
||||
|
||||
Sidenote: We have been experimenting with generating full Noodl Node graphs, but due to the limited memory it's not too good at memorizing current documentation.
|
||||
|
||||
## Priming for code generation
|
||||
|
||||
If we want to use ChatGPT for code generation we have to be prepared to modify the code it gives us. That is just the current state of the AI. However, we can minimize the need for modifications if we start the chat with some instructions, giving ChatGPT a bit of context so that it understands what a Noodl function looks like, some rules for what it can/can't do and how to create inputs and outputs to the node. This is called a _primer_, and here is one that we have been experimenting with:
|
||||
|
||||
````markdown
|
||||
Hi ChatGPT. Here are your instructions. You must follow all of them.
|
||||
|
||||
- You will be writing Noodl functions.
|
||||
- An input in a Noodl function must follow the format "Inputs.InputName".
|
||||
- An input in a Noodl function is only read, never written to.
|
||||
- An output in a Noodl function must follow the format "Outputs.OutputName = value".
|
||||
- A variable in a Noodl function never stores an output.
|
||||
- Sending a signal from a Noodl function must follow the format "Outputs.SignalName()".
|
||||
- Signals can not be passed values. All output values must be set as a Noodl function output.
|
||||
- Inputs and Outputs in a Noodl function are global.
|
||||
- Noodl functions do not use import statements.
|
||||
- Noodl functions do not use export statements.
|
||||
- Noodl functions can use recources from a CDN.
|
||||
- Noodl functions can access API endpoints with "fetch".
|
||||
- Define constants as Noodl function inputs.
|
||||
- A Noodl function follows this format:
|
||||
|
||||
```js
|
||||
const inputName = Inputs.InputName;
|
||||
|
||||
// Check if the input has a value, otherwise return
|
||||
if (!inputName) return;
|
||||
|
||||
// Perform the function logic
|
||||
```
|
||||
|
||||
Reply "Okidoki" if the instructions are clear, otherwise ask me to clarify
|
||||
````
|
||||
|
||||
This primer has given us great results so far - in many cases the snippets have worked with no modifications at all. Don't shy away from modifying it or trying a different approach though. ChatGPT is a complex technology, and new techniques and strategies are constantly being discovered. If you find something interesting, please don't shy away from sharing it with the community over at our [Discord server](https://discord.com/invite/23xU2hYrSJ).
|
||||
|
||||
## Tips and tricks for prompting code
|
||||
|
||||
### Benefits of a primer
|
||||
|
||||
Using the primer above lets us use very sloppy prompts, while still getting a useful result:
|
||||
|
||||
|
||||
|
||||
Due to the primer, this result can be copied stright into a Function node without any modifications. Here is how it looks in a node graph with all the inputs and outputs:
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
All we needed to provide was an API key. Amazing!
|
||||
|
||||
### Adding detail
|
||||
|
||||
The example above is very simple. The more complex functionality we want, the more specific we need to be. ChatGPT has a lot of imagination, and it's a good idea to leave it as little room for interpretation as possible.
|
||||
|
||||
|
||||
|
||||
This was my third attempt. In the first one I asked it to _prompt the user for their location_. It then gave me a soultion using the `Window.prompt()` method. This opens up a system dialog with a text input where the user can type in the `latitude` and `longitude` themselves. It bears noting that the last time `Window.prompt()` was used in a serious project, the smartphone was still a new and revolutionary invention.
|
||||
|
||||
In the second attempt I asked it to _get the users location_. Then it just assumed that the `latitude` and `longitude` was a part of the `user` object. Not specific enough.
|
||||
|
||||
The third attempt looks perfect, at least at a first glance. The users location is now gotten automatically.
|
||||
|
||||
The location was not the only issue though. If we take a closer look at the code we see that there are some places where ChatGPT didn't follow the prompt. We asked it to send an `Outputs.UserFailed()` if `user.firstName` or `user.lastName` where missing. Instead it sends the `UserFailed` signal if it cant find a user of the right ID. It also sends `MapboxData` and `FullName` separately. It _almost_ does what we told it. Discrepancies like this can happen anywhere in the generated code, so it's always a good idea to look over the code you get.
|
||||
|
||||
These off-prompt moments are not only a bad thing though. As an example, we didn't ask ChatGPT to exit the function using `return` when after sending the `UserFailed` signal, but it was clever enough to assume that we didn't want the function to continue running without a user.
|
||||
|
||||
### Partial rewrites
|
||||
|
||||
If we find that parts of the code doesn't fit us, we can always ask ChatGPT to iterate on it.
|
||||
|
||||
|
||||
|
||||
It now exits the function when it should, and outputs the data properly. There are still unnecessary checks made for `firstName` and `lastName` when building the `fullName`. They will not throw any errors, or mess up the function in any other way, and the performance hit is so small that it can be ignored, but if we want to keep the code clean we can just manually remove those two lines.
|
||||
|
||||
### Iterative prompting
|
||||
|
||||
If we want even more control we can prompt our function in smaller steps. Let's generate a function that does a device generalisation based on the viewport width.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Note that I asked for `widths` but it gave me heights as well! Let's clear that up.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Here I realize that I made two mistakes. First of all, I was hoping for ChatGPT to be a bit clever and assume that I meant to check for a value inside of the desktop range. Instead it tries to match an exact width, which will fail if the browser is resized. The second error was to output a `IsDesktop` boolean. If we check for ranges with the given sizes, there will be a gap between desktop and mobile. Let's make a lazy fix.
|
||||
|
||||
|
||||
|
||||
Now, this is not a perfect function by far. Good thing is that this prompting could go on and on, until we have a function that gives us perfect detection. Just remember the goldfish token memory, and that you might need to reprime the AI after a while.
|
||||
|
||||
## Refreshing ChatGPT's memory
|
||||
|
||||
If you notice that you start getting answers that stray too far off from things you have told ChatGPT earlier, it is a good idea to reprime the memory. This can be easily done by starting a new chat and sending the primer again. After that you can paste in the function you are working with, together with new instructions on how how you want the function to be modified.
|
||||
|
||||
## Research assistant
|
||||
|
||||
Another interesting use apart from generating code is to use it for research. Finding relevant information can be complicated, especially for more abstract concepts. ChatGPT is great for giving you a kickstart:
|
||||
|
||||
|
||||
|
||||
In the same way we can easily ask follow-up questions:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
(This might not be the best example if there are any newer API's than 2021, or if anyone of them updated ther pricing, etc. It works for the most part though!)
|
||||
|
||||
## Age of exploration
|
||||
|
||||
While a lot is known about ChatGPT, there are still a lot of dark spots on the AI-map. New strategies, primers, tips and tricks are invented and uncovered every day. If you have found something that we havent touched upon here and feel like sharing it, please hop on in to the #chat-gpt channel on our [Discord server](https://discord.com/invite/23xU2hYrSJ). Exploration is more fun together, and we all stand on the shoulders of each other in this exciting new step within technology.
|
||||
7
docs/getting-started/ai-assisted-dev/overview.md
Normal file
7
docs/getting-started/ai-assisted-dev/overview.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# AI Assisted Development
|
||||
|
||||
Noodl is a low code web app builder that will have you creating applications faster and smarter. Even though Noodl is technically a low code tool you can reduce the majority of coding using ChatGPT, making it much more accessible to no coders. Here we collect guides that target the different parts of Noodl where code is required and show you how to use ChatGPT to fill in the blanks. We are comitted to making Noodl accessible to no-coders without reducing the power and capabilities.
|
||||
194
docs/getting-started/ai-assisted-dev/rest.md
Normal file
194
docs/getting-started/ai-assisted-dev/rest.md
Normal file
@@ -0,0 +1,194 @@
|
||||
---
|
||||
title: REST API calls
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Create REST API calls with Chat GPT
|
||||
|
||||
In Noodl you typically use the [REST](/nodes/data/rest) node to make REST API requests to access external services. This requires a little bit of coding to set up the request and to parse the response. It also requires a bit of knowlege to figure out how the API you want to use work and to read the documentaion.
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The example above is a non-trival REST API request. It takes the name of a wikipedia page and retrieves the main image of that page in a given size. This would certainly take me a few minutes to figure out how to do and it's quite tedious and non-interesting work. A [REST](/nodes/data/rest) node requires four important parts:
|
||||
|
||||
* **Endpoint** The HTTP endpoint of the REST API.
|
||||
* **Method** The method of the API call, e.g. `POST` or `GET`.
|
||||
* **Request script** This is a piece of javascript code that, given the node inputs, sets up all the parameters and content to be passed to the REST API call.
|
||||
* **Response script** This is another javascript snippet that parses the received response and turns it into node outputs.
|
||||
|
||||
<div class="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's see how we can use AI assisted development in Noodl to achieve this.
|
||||
|
||||
## Priming for REST node scripts
|
||||
|
||||
We will be using ChatGPT with GPT-4. The key is getting it to generate all the content we need for the REST node to work from just a single prompt. To do this we need to first provide the AI with the context, this is really the key to get it to work nicely with Noodl. This is called a _primer_, and here is one that we have been experimenting with for [REST](/nodes/data/rest) nodes:
|
||||
|
||||
````markdown
|
||||
Hi ChatGPT. Here are your instructions. You must follow all of them.
|
||||
|
||||
- You will be writing Noodl in javascript functions for Noodl REST API calls.
|
||||
- An input in a Noodl function must follow the format "Inputs.InputName".
|
||||
- An input in a Noodl function is only read, never written to.
|
||||
- An output in a Noodl function must follow the format "Outputs.OutputName = value".
|
||||
- A variable in a Noodl function never stores an output.
|
||||
- Inputs and Outputs in a Noodl function are global.
|
||||
- Noodl functions do not use import statements.
|
||||
- Noodl functions do not use export statements.
|
||||
- Define constants as Noodl function inputs.
|
||||
- You need to create two functions, one to prepare the REST API request and one to process the response.
|
||||
- The function to prepare the request have the following format. It is called the "Request script". You don't need to wrap it in a function, just the javascript code.
|
||||
|
||||
```js
|
||||
// All REST options should be set on the Request object as follows
|
||||
// Put the headers needed for the API call in the headers object
|
||||
// You don't need to set the content-type to application/json this is done automatically
|
||||
Request.headers['authorization'] = "Bearer " + Inputs.APIKey;
|
||||
|
||||
// Put any query parameters needed for the API call in the parameters object
|
||||
Request.parameters['limit'] = Inputs.NumberOfItems;
|
||||
|
||||
// If you are doing a POST method request, but the content in the content object
|
||||
// No need to stringify, only a standard JSON object
|
||||
Request.content = {
|
||||
'param' : 'something'
|
||||
}
|
||||
```
|
||||
|
||||
- The function to parse the result of the REST API request have the following format. It is called the "Response script". You don't need to wrap it in a function, just the javascript code.
|
||||
|
||||
```js
|
||||
// The content of the response is in the Response.content object
|
||||
Outputs.Results = Response.content.results;
|
||||
|
||||
```
|
||||
|
||||
- Finally list the endpoint and the HTTP method in the following format. The endpoint can contain parameters using the {paramName} syntax.
|
||||
|
||||
Endpoint: https://example-endpoint.com/{userId}/fetch
|
||||
Method: POST
|
||||
|
||||
Reply "Okidoki" if the instructions are clear, otherwise ask me to clarify
|
||||
````
|
||||
|
||||
Copy and pasting this primer into ChatGPT GPT-4 and then following up with this prompt:
|
||||
|
||||
```
|
||||
given a wikipedia page name, get the main image of that page
|
||||
```
|
||||
|
||||
The nice little robot now gives us everything we need to prepare the REST node. After a quick description we get the request and response scripts we need:
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We can simply copy and paste those into the corresponding properties of the REST node. Next we get the **Endpoint** and **Method** nicely listed for us. We also copy these parameters into REST node properties. It even provides us with a little bit of explaination of how to set up the inputs and how to use the outputs of the node.
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We can now hook up the REST node as shown in the example above and simply put in a Wikipedia page name and provide a size of the image and we get the resulting URL back that we can connect to an image node.
|
||||
|
||||
## Refining your answer
|
||||
|
||||
Sometimes you will get an answer back that may be correct but you don't know exactly what the result is. You can always hook it up in Noodl and just test it, view the outputs and see if the result matches your expectations. Or you can simply ask Chat GPT. In this example I asked it to create a spotify API integration, the prompt was:
|
||||
|
||||
```
|
||||
get the songs of a playlist using the spotify API
|
||||
```
|
||||
|
||||
It provided me with everything I needed to copy and paste into the REST node.
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
But I wasn't sure about what the content of the output was, so I asked:
|
||||
|
||||
```
|
||||
What is the format of an object in the songs output?
|
||||
```
|
||||
|
||||
And it give me a rought outline of the object along with a few examples.
|
||||
|
||||
If you find that the inputs and outputs are not to your liking, or that it did not exactly do what you were asking for simply try providing it more context and ask it to change the code.
|
||||
|
||||
## Providing context
|
||||
|
||||
The ChatGPT models were trained on data up to 2021 so it's clearly missing some more recent APIs, such as actually it's own API. But you can provide context when asking it to generate code for you.
|
||||
|
||||
```
|
||||
using this api https://platform.openai.com/docs/api-reference/chat/create I want to provide messages as an array of string and get the response back
|
||||
```
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
It gives you a nice piece of code, but after copy&pasting it into my REST node and testing it on an exampt, it does not give the expected result. In this case I just get an array of `undefined`, thats weird. Lets see what ChatGPT thinks about that.
|
||||
|
||||
```
|
||||
I just got an array of undefined back
|
||||
```
|
||||
|
||||
It fixes the problem and gives you a new updated function. This works much better. That is pretty astounding!
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Sometimes the REST call will fail and generate an HTTP error. If the error is not shown on the REST node you can find the error in the web debugger. If you are on the frontend click on the debug icon at the top bar:
|
||||
|
||||
<div class="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
If you are in a cloud function, open the debugger for the cloud function runtime:
|
||||
|
||||
<div class="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
In the debugger look for the **Network** tab:
|
||||
|
||||
<div class="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Any failed calls will generally be highlighted in red, you can find your endpoint and look at the response from the request. See if you can find an error message and let ChatGPT know about the error and try to have it fix it.
|
||||
|
||||
Have fun playing with Noodl and AI assisted development and let us know of your discoveries in the Discord community!
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user