<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: EnZon3</title>
    <description>The latest articles on Forem by EnZon3 (@enzon3).</description>
    <link>https://forem.com/enzon3</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1033994%2F3134678d-164a-4031-bc02-f54f980b9163.png</url>
      <title>Forem: EnZon3</title>
      <link>https://forem.com/enzon3</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/enzon3"/>
    <language>en</language>
    <item>
      <title>How I made an AI-powered query language with ChatGPT</title>
      <dc:creator>EnZon3</dc:creator>
      <pubDate>Sat, 20 May 2023 20:18:42 +0000</pubDate>
      <link>https://forem.com/enzon3/how-i-managed-to-make-an-ai-powered-query-language-with-chatgpt-5324</link>
      <guid>https://forem.com/enzon3/how-i-managed-to-make-an-ai-powered-query-language-with-chatgpt-5324</guid>
      <description>&lt;p&gt;So I had recently picked up ChatGPT prompt engineering, and I wanted to make something sort of practical. So I thought of making something like GraphQL, but with natural language. So I whipped up the OpenAI playground, and started writing a prompt in the format that I usually use. It took a long while to get it to do what I wanted, but I eventually got it to work more than half the time.&lt;/p&gt;

&lt;h2&gt;
  
  
  How the prompt works
&lt;/h2&gt;

&lt;p&gt;The prompt works by taking in 2 things. The natural language query and your API schema. (Your API schema should also be natural language) I took advantage of the system message by appending the schema to the system message, right under the the section labeled “Schema”&lt;/p&gt;

&lt;p&gt;I instructed the AI to respond with this JSON format:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"headers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;node-fetch-style&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;headers&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;here&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"body (optional)"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;body&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;here&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"[api endpoint]"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"method"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"POST"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"pipe (OPTIONAL)"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; 
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; 
        &lt;/span&gt;&lt;span class="nl"&gt;"url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"url to pipe to"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"method"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"request method"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"headers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;node-fetch-style&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;headers&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;here&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"pipeTo"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"pipe items from body to body, here is an example of syntax: "&lt;/span&gt;&lt;span class="err"&gt;message=&amp;gt;username;status=&amp;gt;password&lt;/span&gt;&lt;span class="s2"&gt;""&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This, with the exception of the pipe key allows me to just plug in the values into a fetch request. I also added the ability to pipe the response of one request to another request, but it’s quite buggy.&lt;/p&gt;

&lt;p&gt;Finally, to coax the AI into responding with just JSON, I added a small example conversation I had with the AI and sent that with the system message.&lt;/p&gt;
&lt;h2&gt;
  
  
  The UI
&lt;/h2&gt;

&lt;p&gt;I made a simple UI in figma but I didn’t like it so I asked my friend &lt;a class="mentioned-user" href="https://dev.to/bddy"&gt;@bddy&lt;/a&gt; to improve it. He did a really awesome job with the UI and you should check him out! I also hooked up the UI to the backend for him so he wouldn’t have to do that lol.&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;


&lt;div class="ltag__replit"&gt;
  &lt;iframe height="550px" src="https://repl.it/@EnZon3/AI-Powered-Query-Language-Tech-Demo?lite=true"&gt;&lt;/iframe&gt;
&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>programming</category>
      <category>ai</category>
      <category>chatgpt</category>
    </item>
  </channel>
</rss>
