<?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>DEV Community: Maham Codes</title>
    <description>The latest articles on DEV Community by Maham Codes (@mahamdev).</description>
    <link>https://dev.to/mahamdev</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%2F1251285%2Fa33d48b1-eda0-4086-9315-d99a171d4d86.jpeg</url>
      <title>DEV Community: Maham Codes</title>
      <link>https://dev.to/mahamdev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mahamdev"/>
    <language>en</language>
    <item>
      <title>Chat with Docs Using OpenAI and a Serverless RAG Tool</title>
      <dc:creator>Maham Codes</dc:creator>
      <pubDate>Fri, 25 Oct 2024 16:14:47 +0000</pubDate>
      <link>https://dev.to/mahamdev/chat-with-docs-using-openai-and-a-serverless-rag-tool-33gp</link>
      <guid>https://dev.to/mahamdev/chat-with-docs-using-openai-and-a-serverless-rag-tool-33gp</guid>
      <description>&lt;p&gt;Documentation can be hard to dig through. Let’s fix that by turning any LLM into a doc-savvy AI agent with memory, all in a few steps.&lt;/p&gt;

&lt;p&gt;Using &lt;a href="https://baseai.dev/docs" rel="noopener noreferrer"&gt;BaseAI&lt;/a&gt;, we’ll create an AI agent locally that can pull answers from docs and respond to user queries.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="//langbase.com/signup"&gt;Signup&lt;/a&gt; on Langbase&lt;/li&gt;
&lt;li&gt;Basic knowledge of &lt;a href="https://baseai.dev/docs" rel="noopener noreferrer"&gt;BaseAI&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;OpenAI LLM key&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Quick Setup
&lt;/h2&gt;

&lt;p&gt;Here's how it's done:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Create a Project Folder&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;Start a new project, install dev dependencies, and add &lt;code&gt;dotenv&lt;/code&gt; to manage environment variables. Also, add the OpenAI key in &lt;code&gt;.env&lt;/code&gt; file.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;Set Up an AI Agent Pipe&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;Run this command to create a serverless AI agent:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx baseai@latest pipe
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Enter a name (e.g., &lt;code&gt;pipe-with-memory&lt;/code&gt;) and a description. Here’s a basic config:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;PipeI&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@baseai/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pipeWithMemory&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;PipeI&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
       &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;LANGBASE_API_KEY&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pipe-with-memory&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Pipe attached to a memory&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;openai:gpt-4o-mini&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;store&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;temperature&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;memory&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
       &lt;span class="na"&gt;tools&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
   &lt;span class="p"&gt;});&lt;/span&gt;

   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;pipeWithMemory&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. &lt;strong&gt;Create and Add Memory&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;Run this command in terminal to create a memory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx baseai@latest memory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Name it &lt;code&gt;chat-with-docs&lt;/code&gt;, then drop markdown docs into &lt;code&gt;baseai/memory/chat-with-docs/documents&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. &lt;strong&gt;Embed the Memory&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;To make the docs searchable generate memory embeddings by running this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx baseai@latest embed &lt;span class="nt"&gt;-m&lt;/span&gt; chat-with-docs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. Connect Memory to the Agent
&lt;/h3&gt;

&lt;p&gt;Import the memory to the agent config and update the code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;PipeI&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@baseai/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;chatWithDocsMemory&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../memory/chat-with-docs&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pipePipeWithMemory&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;PipeI&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="c1"&gt;// Replace with your API key https://langbase.com/docs/api-reference/api-keys&lt;/span&gt;
    &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;LANGBASE_API_KEY&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pipe-with-memory&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Pipe attached to a memory&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;private&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;openai:gpt-4o-mini&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;json&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;store&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;moderate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;top_p&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;temperature&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;presence_penalty&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;frequency_penalty&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;stop&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
    &lt;span class="na"&gt;tool_choice&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;auto&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;parallel_tool_calls&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;system&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`You are a helpful AI assistant.`&lt;/span&gt; &lt;span class="p"&gt;}],&lt;/span&gt;
    &lt;span class="na"&gt;variables&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
    &lt;span class="na"&gt;memory&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;chatWithDocsMemory&lt;/span&gt;&lt;span class="p"&gt;()],&lt;/span&gt;
    &lt;span class="na"&gt;tools&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;pipePipeWithMemory&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6. Running the Agent in CLI
&lt;/h3&gt;

&lt;p&gt;Create a CLI with &lt;code&gt;index.ts&lt;/code&gt; file to interact with your AI agent. Add the following code in the &lt;code&gt;index.ts&lt;/code&gt; file you create in the project directory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dotenv/config&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Pipe&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@baseai/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;inquirer&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;inquirer&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;ora&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ora&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;chalk&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;chalk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;pipePipeWithMemory&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./baseai/pipes/pipe-with-memory&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;


&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pipe&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;pipePipeWithMemory&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialSpinner&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;ora&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Conversation with document...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;completion&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;chatWithDocsMemory&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
            &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}],&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
        &lt;span class="nx"&gt;initialSpinner&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;cyan&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Report Generator Agent response...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chatWithDocsMemory&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;initialSpinner&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;red&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error processing initial request:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;userMsg&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;inquirer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
            &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;input&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;userMsg&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Enter your query (or type "exit" to quit):&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
            &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;]);&lt;/span&gt;

        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userMsg&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;exit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;green&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Goodbye!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
            &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;

        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;spinner&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;ora&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Processing your request...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;completion&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;reportAgentResponse&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
                &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;userMsg&lt;/span&gt; &lt;span class="p"&gt;}],&lt;/span&gt;
            &lt;span class="p"&gt;});&lt;/span&gt;

            &lt;span class="nx"&gt;spinner&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;cyan&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Agent:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reportAgentResponse&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;spinner&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;red&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error processing your request:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This &lt;code&gt;index.ts&lt;/code&gt; file sets up a simple CLI for chatting with an AI agent trained on your documentation. It begins by loading essential packages: environment variables with &lt;code&gt;dotenv&lt;/code&gt;, the &lt;code&gt;Pipe&lt;/code&gt; class from BaseAI, and libraries for user interaction and styling—&lt;code&gt;inquirer&lt;/code&gt; for prompts, &lt;code&gt;ora&lt;/code&gt; for spinners, and &lt;code&gt;chalk&lt;/code&gt; for color-coding responses.&lt;/p&gt;

&lt;p&gt;The file then initializes a &lt;code&gt;Pipe&lt;/code&gt; instance, &lt;code&gt;pipePipeWithMemory&lt;/code&gt;, configured with AI memory, enabling the agent to access and respond with information from your documents. In the &lt;code&gt;main()&lt;/code&gt; function, an initial test message ("Hello") is sent to the agent, displaying a spinner while awaiting a response. &lt;/p&gt;

&lt;p&gt;Once received, the agent's response is logged to the console. Following this, a continuous loop prompts the user to enter queries, which are processed by the agent via &lt;code&gt;pipe.run()&lt;/code&gt;. Responses appear in the console, and the loop allows ongoing interaction until the user types “exit.” &lt;/p&gt;

&lt;p&gt;Any errors in processing are logged as well. This setup provides a simple, interactive way to chat with an AI agent about your documentation directly from the terminal.&lt;/p&gt;

&lt;h3&gt;
  
  
  7. Start the Server and Test
&lt;/h3&gt;

&lt;p&gt;Start the BaseAI’s dev server by this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx baseai@latest dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run the CLI (index.ts) file, run this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx tsx index.ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You’re all set! Now you can ask questions, and your agent will pull answers straight from your docs, all with zero cloud costs and the results can be viewed in your terminal.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="//BaseAI.dev/docs"&gt;BaseAI Docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="//BaseAI.dev/learn"&gt;BaseAI Learn Platform&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>rag</category>
      <category>llms</category>
      <category>ai</category>
      <category>agents</category>
    </item>
    <item>
      <title>Build an AI Agent in a Next.js app using Web AI Framework</title>
      <dc:creator>Maham Codes</dc:creator>
      <pubDate>Wed, 16 Oct 2024 20:48:50 +0000</pubDate>
      <link>https://dev.to/mahamdev/build-an-ai-agent-in-a-nextjs-app-using-web-ai-framework-31fo</link>
      <guid>https://dev.to/mahamdev/build-an-ai-agent-in-a-nextjs-app-using-web-ai-framework-31fo</guid>
      <description>&lt;p&gt;AI agents have taken the internet by storm. It is an autonomous software that uses LLMs to handle more than just text generation—it interacts with digital environments, makes decisions, and performs tasks based on its language understanding.&lt;/p&gt;

&lt;p&gt;AI agents enhance LLMs by adding new capabilities while leaning on them for reasoning and decision-making.&lt;/p&gt;

&lt;p&gt;In this guide, let’s create an AI agent in a Next.js app using the first web AI framework called &lt;a href="http://BaseAI.dev/docs" rel="noopener noreferrer"&gt;BaseAI&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="http://Langbase.com/signup" rel="noopener noreferrer"&gt;Signup&lt;/a&gt; on Langbase&lt;/li&gt;
&lt;li&gt;Understanding of &lt;a href="https://nextjs.org/" rel="noopener noreferrer"&gt;Next.js&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Basic knowledge of &lt;a href="http://BaseAI.dev/docs" rel="noopener noreferrer"&gt;BaseAI&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  1- Install Next.js
&lt;/h2&gt;

&lt;p&gt;First, you need to install Next.js in your project directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx create-next-app@latest nextjs-baseai-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also setup tailwind in your Next.js app.&lt;/p&gt;

&lt;h2&gt;
  
  
  2- Install BaseAI
&lt;/h2&gt;

&lt;p&gt;Next, you need to install BaseAI in your project directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx baseai@latest init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3- Create a Summary AI Agent Pipe
&lt;/h2&gt;

&lt;p&gt;Create a new pipe using the &lt;code&gt;pipe&lt;/code&gt; command. Use summary as the pipe name and for system prompt use &lt;code&gt;You are a helpful AI assistant. Make everything Less wordy.&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx baseai@latest pipe
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It creates a pipe at &lt;code&gt;baseai/pipes/summary.ts&lt;/code&gt; in your current directory.&lt;/p&gt;

&lt;h2&gt;
  
  
  4- Set Environment Variables
&lt;/h2&gt;

&lt;p&gt;Use following command to create a &lt;code&gt;.env&lt;/code&gt; file in your project directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cp .env.baseai.example .env
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Set the &lt;code&gt;OPENAI_API_KEY&lt;/code&gt; in the&lt;code&gt;.env&lt;/code&gt; file.&lt;/p&gt;

&lt;h2&gt;
  
  
  5- Add API Route Handler
&lt;/h2&gt;

&lt;p&gt;Create a new API route handler &lt;code&gt;app/api/langbase/pipes/run/route.ts&lt;/code&gt; to use the pipe.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import {Pipe} from '@baseai/core';
import {NextRequest} from 'next/server';
import pipeSummary from '../../../../../baseai/pipes/summary';

export async function POST(req: NextRequest) {
    const runOptions = await req.json();

    // 1. Initiate the Pipe.
    const pipe = new Pipe(pipeSummary());

    // 2. Run the pipe
    const result = await pipe.run(runOptions);

    // 3. Return the response stringified.
    return new Response(JSON.stringify(result));
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  6- Add React Component
&lt;/h2&gt;

&lt;p&gt;Add following to your Next.js app to run the pipe.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pipe run page at &lt;code&gt;app/pipe-run/page.tsx&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Pipe run component at &lt;code&gt;components/pipe-run.tsx&lt;/code&gt; — This component will run the pipe&lt;/li&gt;
&lt;li&gt;UI Button component at &lt;code&gt;components/ui/button.tsx&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;UI Input component at &lt;code&gt;components/ui/input.tsx&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Install the required dependencies.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here’s the code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import PipeRunExample from '@/components/pipe-run';

export default function Page() {
    return (
        &amp;lt;div className="w-full max-w-md"&amp;gt;

            &amp;lt;h1 className="text-2xl font-light text-gray-800 mb-1 text-center"&amp;gt;
                ⌘ Langbase AI Agent Pipe: Run
            &amp;lt;/h1&amp;gt;

            &amp;lt;p className="text-muted-foreground text-base font-light mb-20 text-center"&amp;gt;
                Run a pipe to generate a text completion
            &amp;lt;/p&amp;gt;

            &amp;lt;PipeRunExample /&amp;gt;
        &amp;lt;/div&amp;gt;
    );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Refer to &lt;a href="https://github.com/LangbaseInc/baseai/tree/main/examples/nextjs" rel="noopener noreferrer"&gt;Next.js with BaseAI&lt;/a&gt; codebase for more details.&lt;/p&gt;

&lt;h2&gt;
  
  
  7- Add Environment Variables
&lt;/h2&gt;

&lt;p&gt;To be able to run and later deploy your Next.js app, you need to add your Langbase and LLM provider keys. Add the following environment variables to your &lt;code&gt;.env&lt;/code&gt; file at the root of your app.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# !! SERVER SIDE ONLY !!
# Keep all your API keys secret — use only on the server side.

# TODO: ADD: Both in your production and local env files.
# Langbase API key for your User or Org account.
# How to get this API key https://langbase.com/docs/api-reference/api-keys
LANGBASE_API_KEY=

# TODO: ADD: LOCAL ONLY. Add only to local env files.
# Following keys are needed for local pipe runs. Add the providers you are using.
# For Langbase, please add the keys in your LLM keysets on Langbase Studio.
# Read more: Langbase LLM Keysets https://langbase.com/docs/features/keysets
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
COHERE_API_KEY=
FIREWORKS_API_KEY=
GOOGLE_API_KEY=
GROQ_API_KEY=
MISTRAL_API_KEY=
PERPLEXITY_API_KEY=
TOGETHER_API_KEY=
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;LANGBASE_API_KEY&lt;/code&gt; is the user or org API key that you authenticated with. You can obtain your &lt;a href="https://langbase.com/docs/api-reference/api-keys" rel="noopener noreferrer"&gt;User/Org API Key&lt;/a&gt; from the Langbase dashboard.&lt;/p&gt;

&lt;h2&gt;
  
  
  8- Run the Next.js BaseAI App
&lt;/h2&gt;

&lt;p&gt;Run BaseAI dev server and start the Next.js app.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Terminal 1
npx baseai@latest dev # Start BaseAI dev server

# Terminal 2
npm run dev # Start Next.js app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open &lt;code&gt;http://localhost:3000/pipe-run&lt;/code&gt; to see the pipe run page.&lt;/p&gt;

&lt;p&gt;Write a prompt message and click on the &lt;code&gt;Ask AI&lt;/code&gt; button to generate the completion. The AI response will be displayed below the button. This all happens locally on your machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  9- Deploy BaseAI Project on Langbase
&lt;/h2&gt;

&lt;p&gt;To deploy the project on Langbase, you need to authenticate with your Langbase account.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx baseai@latest auth
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After authentication, you can deploy the project using the following command. When you deploy, you need to add keys for providers like OpenAI, Google, etc., in &lt;a href="https://langbase.com/docs/features/keysets" rel="noopener noreferrer"&gt;Langbase Keysets&lt;/a&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx baseai@latest deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will deploy your project on Langbase and you can access it as a serverless highly scalable API. Check the &lt;a href="https://baseai.dev/docs/deployment/deploy" rel="noopener noreferrer"&gt;BaseAI deploy documentation&lt;/a&gt; for more details.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Complete guide &lt;a href="https://baseai.dev/docs/guides/nextjs-with-baseai" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>ai</category>
      <category>aiagents</category>
      <category>nextjs</category>
      <category>llm</category>
    </item>
    <item>
      <title>Easiest Way to Build a RAG AI Agent Application</title>
      <dc:creator>Maham Codes</dc:creator>
      <pubDate>Wed, 25 Sep 2024 15:59:58 +0000</pubDate>
      <link>https://dev.to/mahamdev/easiest-way-to-build-a-rag-ai-agent-application-4k04</link>
      <guid>https://dev.to/mahamdev/easiest-way-to-build-a-rag-ai-agent-application-4k04</guid>
      <description>&lt;p&gt;We’ve all experienced LLMs hallucinating spot-on with some answers and completely off with others.&lt;/p&gt;

&lt;p&gt;That’s where RAG steps in as the built-in search engine your LLMs need overcoming their limitations.&lt;/p&gt;

&lt;p&gt;In this guide, we’ll build a RAG powered AI agent application. This walkthrough guide will cover the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;RAG introduction&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prerequisites to get started with the app&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Building a Document QnA RAG app&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Setting up a Next.js app&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Deploying the project&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What is RAG?
&lt;/h2&gt;

&lt;p&gt;RAG (Retrieval-Augmented Generation) takes LLMs to the next level by connecting them to real-time data sources before generating a response. Your AI stops guessing and starts referencing up-to-date, accurate info from your specific datasets.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why does RAG matter?
&lt;/h3&gt;

&lt;p&gt;While LLMs are advanced, they can still hallucinate or give outdated info. RAG fixes this by grounding responses in reliable, real-time data. It ensures trust and accuracy, especially when dealing with specialized content.&lt;/p&gt;

&lt;h3&gt;
  
  
  How does RAG work?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Create External Data:&lt;/strong&gt; Connect your LLM to sources like APIs or databases.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Retrieve Information:&lt;/strong&gt; Fetch relevant data for each query.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Augment the Prompt:&lt;/strong&gt; Combine user queries with fetched data for accuracy.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Update Data:&lt;/strong&gt; Keep sources refreshed for ongoing precision.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The diagrammatic representation of how the RAG works:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd1n1mo7n17vccn6t5eqi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd1n1mo7n17vccn6t5eqi.png" alt="How RAG works?" width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now that you know about RAG, let’s walk through how to build a Document QnA RAG AI agent app:&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Before getting started, make sure you have the following ready:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Langbase Account: &lt;a href="https://langbase.com/signup" rel="noopener noreferrer"&gt;Sign up&lt;/a&gt; on ⌘ Langbase and get access to the dashboard.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Next.js Knowledge: Basic understanding of Next.js for building a web application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Node.js: Installed on your local machine.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Tailwind CSS Knowledge: Understanding of Tailwind CSS to design the application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Deployment Platform: Have an account with Vercel, Netlify, or Cloudflare for deployment.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We'll start by setting up a &lt;a href="https://langbase.com/docs/memory" rel="noopener noreferrer"&gt;Langbase memory&lt;/a&gt; (Memory + AI Agent Pipe = RAG at Langbase), uploading data, and connecting it to a pipe. Then, we’ll build a Next.js app using &lt;a href="https://langbase.com/docs/langbase-sdk" rel="noopener noreferrer"&gt;Langbase SDK&lt;/a&gt; to leverage that pipe for real-time responses.&lt;/p&gt;

&lt;p&gt;Ready? Let’s go!&lt;/p&gt;

&lt;h2&gt;
  
  
  1- Create a Memory
&lt;/h2&gt;

&lt;p&gt;Memory is a managed API that acts as a private search engine for developers. It combines vector storage, RAG, and internet access to help build powerful AI features.&lt;/p&gt;

&lt;p&gt;In the Langbase dashboard, navigate to the Memory section, create a new memory and name it rag-wikipedia. You can also add a description to the memory.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj9whjzj8p9ywpo80o019.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj9whjzj8p9ywpo80o019.png" alt="Create a Memory" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2- Upload RAG Data
&lt;/h2&gt;

&lt;p&gt;Upload the data to the memory you created. You can upload any data for your RAG. For this example, we uploaded a PDF file of the Wikipedia page of &lt;a href="https://en.wikipedia.org/wiki/Claude_(language_model)" rel="noopener noreferrer"&gt;Claude&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;You can either drag and drop the file or click on the upload button to select the file. Once uploaded, wait a few minutes to let Langbase process the data. Langbase takes care of &lt;strong&gt;chunking&lt;/strong&gt;, &lt;strong&gt;embedding&lt;/strong&gt;, and &lt;strong&gt;indexing&lt;/strong&gt; the data for you.&lt;/p&gt;

&lt;p&gt;Click on the Refresh button to see the latest status. Once you see the status as &lt;code&gt;Ready&lt;/code&gt;, you can move to the next step.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkd1gnll4q7ddpzo89mcb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkd1gnll4q7ddpzo89mcb.png" alt="Upload RAG Data" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The next step is to create an AI agent pipe that will be responsible for all the backend work behind the application.&lt;/p&gt;

&lt;h2&gt;
  
  
  3- Create an AI Agent Pipe
&lt;/h2&gt;

&lt;p&gt;In your Langbase dashboard, create a new pipe and name it rag-wikipedia. You can also add a description to the pipe. Alternatively you can always type &lt;code&gt;pipe.new&lt;/code&gt; in your search bar to create a new pipe.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F91lk46ly94ybmnx4qyli.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F91lk46ly94ybmnx4qyli.png" alt="Create an AI Agent Pipe" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4- Connect Memory to AI Agent Pipe
&lt;/h2&gt;

&lt;p&gt;Open the newly created pipe and click on the Memory button. From the dropdown, select the memory you created in the previous step and that's it.&lt;/p&gt;

&lt;p&gt;💡Note: Memory + AI Agent Pipe = RAG at Langbase.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fln5s7s0mbhzfvhp5w0qt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fln5s7s0mbhzfvhp5w0qt.png" alt="Connect Memory to AI Agent Pipe" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now that we have created a memory, uploaded data to it, and connected it to an AI agent pipe, we can create a Next.js application that uses Langbase SDK to generate responses.&lt;/p&gt;

&lt;h2&gt;
  
  
  5- Clone the Starter Project
&lt;/h2&gt;

&lt;p&gt;Clone the &lt;a href="https://github.com/LangbaseInc/langbase-examples/tree/main/starters/documents-qna-rag" rel="noopener noreferrer"&gt;RAG Starter Project&lt;/a&gt; to get started. The app contains a single page with a form to ask a question from documents. This project uses:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://langbase.com/docs/langbase-sdk" rel="noopener noreferrer"&gt;Langbase SDK&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://langbase.com/docs/pipe" rel="noopener noreferrer"&gt;Langbase AI Agent Pipe&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://langbase.com/docs/memory" rel="noopener noreferrer"&gt;Langbase Memory&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="http://next.js" rel="noopener noreferrer"&gt;Next.js&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;Tailwind CSS&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  6- Install Dependencies and Langbase SDK
&lt;/h2&gt;

&lt;p&gt;Install the dependencies using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;Install the Langbase SDK using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;langbase
&lt;/code&gt;&lt;/pre&gt;



&lt;h2&gt;
  
  
  7- Create a Route
&lt;/h2&gt;

&lt;p&gt;Create a route &lt;code&gt;app/api/generate/route.ts&lt;/code&gt; and add the following code:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Pipe&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;langbase&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;NextRequest&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;next/server&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="cm"&gt;/**
 * Generate response and stream from Langbase Pipe.
 *
 * @param req
 * @returns
 */&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;POST&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;NextRequest&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;LANGBASE_PIPE_API_KEY&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
                &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Please set LANGBASE_PIPE_API_KEY in your environment variables.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
            &lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;

        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

        &lt;span class="c1"&gt;// 1. Initiate the Pipe.&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pipe&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Pipe&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
            &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;LANGBASE_PIPE_API_KEY&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;

        &lt;span class="c1"&gt;// 2. Generate a stream by asking a question&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stream&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;streamText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
            &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="p"&gt;}]&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;

        &lt;span class="c1"&gt;// 3. Done, return the stream in a readable stream format.&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toReadableStream&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;This code handles a &lt;code&gt;POST&lt;/code&gt; request in a Next.js app to generate a response from a Langbase Pipe.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;It checks if the &lt;code&gt;LANGBASE_PIPE_API_KEY&lt;/code&gt; is set.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Retrieves the user's question (the prompt) from the request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Initializes a Langbase Pipe using the API key.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Sends the user's question to the Pipe, generating a real-time response.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Streams the response back to the user in a readable format.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If there's an error, it returns the error message with a 500 status.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  8- More Code!
&lt;/h2&gt;

&lt;p&gt;Go to &lt;code&gt;starters/rag-ask-docs/components/langbase/docs-qna.tsx&lt;/code&gt; and add following import:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;fromReadableStream&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;langbase&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;Add the following code in &lt;code&gt;DocsQnA&lt;/code&gt; component after the states declaration:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleSubmit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FormEvent&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Prevent form submission&lt;/span&gt;
        &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

        &lt;span class="c1"&gt;// Prevent empty prompt or loading state&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trim&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;loading&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="c1"&gt;// Change loading state&lt;/span&gt;
        &lt;span class="nf"&gt;setLoading&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nf"&gt;setCompletion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nf"&gt;setError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Fetch response from the server&lt;/span&gt;
            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/generate&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
                &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
            &lt;span class="p"&gt;});&lt;/span&gt;

            &lt;span class="c1"&gt;// If response is not successful, throw an error&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;status&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;errorData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
                &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;errorData&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;

            &lt;span class="c1"&gt;// Parse response stream&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="c1"&gt;// Stream the response body&lt;/span&gt;
                &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stream&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;fromReadableStream&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

                &lt;span class="c1"&gt;// Iterate over the stream&lt;/span&gt;
                &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="k"&gt;await &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;chunk&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;choices&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]?.&lt;/span&gt;&lt;span class="nx"&gt;delta&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
                    &lt;span class="nx"&gt;content&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nf"&gt;setCompletion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
                &lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;setError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;finally&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;setLoading&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;The above code defines the &lt;code&gt;handleSubmit&lt;/code&gt; function that handles form submissions in a React component by preventing the default submission behavior and validating the input prompt. If the prompt is valid, it sets a loading state and clears any previous responses or errors. It then sends a &lt;code&gt;POST&lt;/code&gt; request to the &lt;code&gt;/api/generate&lt;/code&gt; endpoint with the prompt. If the server response is not successful, it throws an error.&lt;/p&gt;

&lt;p&gt;For successful responses, it streams the content and appends it to the &lt;code&gt;completion&lt;/code&gt; state. Finally, it catches any errors that occur and resets the loading state once the process is complete.&lt;/p&gt;

&lt;p&gt;Next, replace the following piece of code in &lt;code&gt;DocsQnA&lt;/code&gt; component:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;onSubmit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="p"&gt;}}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;With the following code:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;onSubmit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleSubmit&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;



&lt;h2&gt;
  
  
  9- Add API Key of the AI Agent Pipe
&lt;/h2&gt;

&lt;p&gt;Create a copy of &lt;code&gt;.env.local.example&lt;/code&gt; and rename it to &lt;code&gt;.env.local&lt;/code&gt;. Add the API key of the pipe that we created in &lt;strong&gt;step 3&lt;/strong&gt; to the &lt;code&gt;.env.local&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="o"&gt;!!&lt;/span&gt; &lt;span class="nx"&gt;SERVER&lt;/span&gt; &lt;span class="nx"&gt;SIDE&lt;/span&gt; &lt;span class="nx"&gt;ONLY&lt;/span&gt; &lt;span class="o"&gt;!!&lt;/span&gt;

&lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="nx"&gt;Pipes&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;

&lt;span class="nx"&gt;LANGBASE_PIPE_API_KEY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;YOUR_PIPE_API_KEY&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;



&lt;h2&gt;
  
  
  10- Run and Deploy the Project
&lt;/h2&gt;

&lt;p&gt;Run the project using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;Your app should be running on &lt;code&gt;http://localhost:3000&lt;/code&gt;. You can now ask questions from the documents you uploaded to the memory.&lt;/p&gt;

&lt;p&gt;🎉 That's it! You have successfully implemented a RAG application. It is a Next.js application you can deploy to any platform of your choice like Vercel, Netlify, or Cloudflare.&lt;/p&gt;

&lt;h3&gt;
  
  
  Live Demo
&lt;/h3&gt;

&lt;p&gt;You can see the live demo of this project &lt;a href="https://documents-qna-rag.langbase.dev/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F035y27avyek1eogywokl.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F035y27avyek1eogywokl.jpg" alt="Live demo" width="800" height="463"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Further resources:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Complete code on &lt;a href="https://github.com/LangbaseInc/langbase-examples/tree/main/examples/documents-qna-rag" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Complete guide &lt;a href="https://langbase.com/docs/guides/rag" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;AI agent pipe used in this example on &lt;a href="https://langbase.com/examples/rag-wikipedia" rel="noopener noreferrer"&gt;Langbase Pipes&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>rag</category>
      <category>agents</category>
    </item>
    <item>
      <title>Guide to Effective Prompt Engineering for ChatGPT and LLM Responses</title>
      <dc:creator>Maham Codes</dc:creator>
      <pubDate>Tue, 09 Jan 2024 11:59:13 +0000</pubDate>
      <link>https://dev.to/mahamdev/guide-to-effective-prompt-engineering-for-chatgpt-and-llm-responses-4i8h</link>
      <guid>https://dev.to/mahamdev/guide-to-effective-prompt-engineering-for-chatgpt-and-llm-responses-4i8h</guid>
      <description>&lt;p&gt;A “prompt” refers to the input provided to the large language model (LLM) to generate a desired output. The prompt consists of a set of instructions, queries, or context that guides the LLM in producing a response. The importance of the prompt lies in its ability to influence the output generated by the model.&lt;/p&gt;

&lt;p&gt;Prompt engineering is a critical skill in maximizing the potential of large language models (LLMs) like ChatGPT, Bard, Claude, etc. This comprehensive guide provides insights into crafting effective prompts, offering valuable techniques for developers, AI enthusiasts, and anyone keen on enhancing interactions with LLMs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prompt Engineering
&lt;/h2&gt;

&lt;p&gt;Prompt engineering is the strategic creation of prompts to optimize interactions between humans and AI. It ensures that the AI produces desired outcomes by leveraging language nuances, understanding AI capabilities, and structuring prompts effectively.&lt;/p&gt;

&lt;p&gt;As AI continues to advance, prompt engineering becomes crucial for controlling AI outputs. This control allows users to shape AI responses to be informative, creative, and aligned with specific goals.&lt;/p&gt;

&lt;p&gt;Now let’s discuss the best practices and techniques necessary for effective prompt design:&lt;/p&gt;

&lt;h3&gt;
  
  
  Basics of AI and Linguistics
&lt;/h3&gt;

&lt;p&gt;Gain a foundational understanding of key AI concepts such as machine learning and the significance of vast training data. This knowledge is essential for comprehending how AI processes information and hence leads to more clear prompts.&lt;/p&gt;

&lt;p&gt;Similarly, delving into linguistics emphasizes the importance of understanding language structure and meaning. This knowledge forms the bedrock for crafting prompts that effectively resonate with the AI.&lt;/p&gt;

&lt;h3&gt;
  
  
  Clarity and Specificity
&lt;/h3&gt;

&lt;p&gt;Crafting prompts with clear instructions and specific details is paramount. It ensures that the AI understands user intent accurately, reducing the chances of generating ambiguous or irrelevant responses.&lt;/p&gt;

&lt;p&gt;Clearly define the desired information or action in your prompt. Avoid vague language and provide specific parameters for the AI to follow. For example, instead of asking, “Tell me about cars,” you could prompt, “Provide a detailed summary of electric cars’ environmental impact.”&lt;/p&gt;

&lt;h3&gt;
  
  
  Persona Adoption
&lt;/h3&gt;

&lt;p&gt;Tailoring prompts with a specific persona in mind is crucial for ensuring that the AI responses align with the intended audience or context. This practice helps in generating more relatable and contextually appropriate content.&lt;/p&gt;

&lt;p&gt;Consider the target audience or context for your prompt. If you’re simulating a conversation with a historical figure, frame your prompts as if you were interacting with that individual. This helps in obtaining responses that are consistent with the chosen persona.&lt;/p&gt;

&lt;h3&gt;
  
  
  Iterative Prompting
&lt;/h3&gt;

&lt;p&gt;Refining prompts based on AI responses through iterative prompting is key to achieving desired outcomes. It allows for continuous improvement by learning from previous interactions and adjusting prompts accordingly.&lt;/p&gt;

&lt;p&gt;After receiving an initial response, analyze it for accuracy and relevance. If the AI output doesn’t meet expectations, refine and rephrase the prompt for better clarity. Repeat this process iteratively until the desired response is achieved, ensuring a dynamic and evolving interaction.&lt;/p&gt;

&lt;h3&gt;
  
  
  Avoiding Bias
&lt;/h3&gt;

&lt;p&gt;Steering clear of leading prompts that unintentionally influence AI responses is essential for promoting fairness and mitigating bias. Bias in prompts can result in skewed or inaccurate information, impacting the reliability of AI-generated content.&lt;/p&gt;

&lt;p&gt;Review prompts for any language that may carry implicit bias. Ensure neutrality in phrasing to avoid steering the AI toward specific viewpoints. Additionally, be aware of potential bias in the training data and take steps to counteract it in your prompt design.&lt;/p&gt;

&lt;h3&gt;
  
  
  Scope Limitation
&lt;/h3&gt;

&lt;p&gt;Breaking down broad topics into smaller, focused prompts enhances the precision of AI outputs. This approach prevents the AI from becoming overwhelmed with vague or complex queries, leading to more accurate and relevant responses.&lt;/p&gt;

&lt;p&gt;Instead of asking a broad question, narrow down your focus. For instance, if you’re interested in the history of technology, you might start by prompting, “Provide an overview of the evolution of smartphones,” before delving into more specific inquiries. This step-by-step approach ensures detailed and accurate responses.&lt;/p&gt;

&lt;h3&gt;
  
  
  Zero-shot and Few-shot Prompting
&lt;/h3&gt;

&lt;p&gt;Zero-shot and few-shot prompting are advanced techniques that extend the capabilities of prompt engineering. In zero-shot prompting, the model is tasked with generating a response without any specific examples in the prompt. Few-shot prompting involves providing a limited number of examples for the model to understand the desired context.&lt;/p&gt;

&lt;p&gt;These techniques enable a broader range of interactions with the AI. Zero-shot prompting allows for more open-ended queries, while few-shot prompting lets you guide the AI’s understanding with a minimal set of examples.&lt;/p&gt;

&lt;p&gt;For example, in zero-shot prompting, you might ask the AI to generate a creative story without providing any initial context. In few-shot prompting, you could give the model a couple of examples to guide its understanding before posing a question.&lt;/p&gt;

&lt;h3&gt;
  
  
  Text Embedding
&lt;/h3&gt;

&lt;p&gt;Text embedding involves representing words or phrases in a continuous vector space, capturing semantic relationships. This advanced technique enhances the model’s understanding of context and meaning, allowing for more nuanced and context-aware responses.&lt;/p&gt;

&lt;p&gt;Text embedding facilitates a deeper understanding of language nuances and relationships, leading to more coherent and contextually relevant responses. It allows the model to grasp the subtle nuances in language that may be challenging with traditional prompt structures.&lt;/p&gt;

&lt;p&gt;For instance, utilizing text embedding in prompts can help the AI understand the contextual relationship between words and phrases, leading to more accurate responses in tasks like sentiment analysis or content summarization.&lt;/p&gt;

&lt;h3&gt;
  
  
  AI Hallucinations
&lt;/h3&gt;

&lt;p&gt;AI hallucinations refer to instances where the model generates responses that are imaginative or creative but might not be based on real-world information. This phenomenon showcases the model’s ability to extrapolate and generate content beyond its training data, providing a glimpse into the potential future capabilities of prompt engineering.&lt;/p&gt;

&lt;p&gt;While AI hallucinations might not always produce factual information, they demonstrate the model’s creative potential. This can be valuable in scenarios where creative or speculative responses are desired.&lt;/p&gt;

&lt;p&gt;For example, prompting the AI with a futuristic scenario and observing its hallucinatory responses can inspire creative thinking or generate imaginative content, offering a preview of the evolving capabilities in prompt engineering.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrap Up!
&lt;/h2&gt;

&lt;p&gt;Experimenting with the techniques penned down in this guide, opens new avenues for interactions with LLMs, pushing the boundaries of what is possible in AI-driven conversations. As these methods continue to develop, they promise to bring about even more sophisticated and nuanced AI responses, shaping the future of prompt engineering.&lt;/p&gt;

&lt;p&gt;Advanced techniques like zero-shot and few-shot prompting, text embedding, and AI hallucinations showcase the evolving landscape of prompt engineering. Whether you’re a beginner or an experienced developer, applying the principles of prompt engineering outlined in this guide will enhance your ability to craft effective prompts and unlock the full potential of large language models like ChatGPT.&lt;/p&gt;

</description>
      <category>promptengineering</category>
      <category>chatgpt</category>
      <category>bard</category>
      <category>claude</category>
    </item>
    <item>
      <title>A Beginner Friendly Guide to Large Language Models (LLMs)</title>
      <dc:creator>Maham Codes</dc:creator>
      <pubDate>Mon, 08 Jan 2024 09:19:18 +0000</pubDate>
      <link>https://dev.to/mahamdev/a-beginner-friendly-guide-to-large-language-models-llms-26cj</link>
      <guid>https://dev.to/mahamdev/a-beginner-friendly-guide-to-large-language-models-llms-26cj</guid>
      <description>&lt;p&gt;Large language models (LLMs) are a big deal in artificial intelligence. They use huge amounts of data to understand and create text that looks like it’s written by a person. These models are part of the broader field of natural language processing (NLP) and are trained on vast amounts of textual data to learn patterns, relationships, and nuances of language. The term “large” refers to the scale of these models, which are characterized by having a massive number of parameters.&lt;/p&gt;

&lt;p&gt;This guide explores their wide-ranging applications for developers and others, key characteristics, and both the benefits and limitations associated with their use. In the end, you will also learn about the importance of effective prompts for better results. So, without further ado let’s dive in.&lt;/p&gt;

&lt;h2&gt;
  
  
  Characteristics of Large Language Models (LLMs)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Large Size
&lt;/h3&gt;

&lt;p&gt;LLMs are trained on massive datasets of text and code, often exceeding billions or even trillions of words. This vast data exposure enables them to capture complex linguistic patterns and relationships.&lt;/p&gt;

&lt;h3&gt;
  
  
  Highly Adaptive
&lt;/h3&gt;

&lt;p&gt;LLMs are typically pre-trained on large datasets in an unsupervised manner, where the model learns the intricacies of language. After pre-training, the models can be fine-tuned on specific tasks or domains to enhance performance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Contextual Comprehension
&lt;/h3&gt;

&lt;p&gt;LLMs demonstrate proficiency in contextual understanding, enabling them to take into account the context of a word or phrase within a sentence to deduce its meaning. This heightened awareness of context empowers them to produce responses that are both coherent and contextually appropriate.&lt;/p&gt;

&lt;h3&gt;
  
  
  Versatility
&lt;/h3&gt;

&lt;p&gt;LLMs demonstrate versatility and proficiency in an extensive array of functions, such as:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Generating text:&lt;/strong&gt; Crafting human-like text in various styles, such as poems, code, scripts, musical compositions, emails, letters, and more.&lt;br&gt;
&lt;strong&gt;- Translation:&lt;/strong&gt; Precisely translating text across languages, overcoming language barriers.&lt;br&gt;
&lt;strong&gt;- Answering questions:&lt;/strong&gt; Supplying informative and pertinent responses to questions posed naturally.&lt;br&gt;
&lt;strong&gt;- Summarization:&lt;/strong&gt; Condensing lengthy text into meaningful summaries.&lt;br&gt;
&lt;strong&gt;- Dialogue generation:&lt;/strong&gt; Participating in authentic and natural conversations, emulating human interaction.&lt;/p&gt;

&lt;h3&gt;
  
  
  Continuous Improvement
&lt;/h3&gt;

&lt;p&gt;Characterized by continuous improvement, LLMs undergo ongoing development, resulting in constant enhancements in performance. The iterative nature of their evolution is driven by exposure to a growing volume of data and the utilization of increased computing power, collectively contributing to a relentless pursuit of improvement over time.&lt;/p&gt;

&lt;h2&gt;
  
  
  LLMs helping Developers
&lt;/h2&gt;

&lt;p&gt;LLMs help developers by enhancing the coding process by offering assistance in code generation, summarization, bug detection, documentation, refactoring, educational support, natural language interactions, and code translation. Their capabilities contribute to increased productivity and efficiency in software development.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zuFPRwWi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/526gmtniar7282juhky9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zuFPRwWi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/526gmtniar7282juhky9.jpg" alt="Developer coding" width="800" height="533"&gt;&lt;/a&gt;&lt;br&gt;
Let’s discuss them one by one:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Code Generation&lt;/strong&gt;&lt;br&gt;
 LLMs can generate code snippets based on natural language descriptions or requirements. Developers can provide high-level instructions, and LLMs can assist in translating these into functional code segments, saving time and effort.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Code Summarization&lt;/strong&gt;&lt;br&gt;
 LLMs can be used to summarize and explain existing code. This is particularly helpful for understanding complex codebases, as LLMs can provide concise and human-readable explanations for different sections of code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Bug Detection and Correction&lt;/strong&gt;&lt;br&gt;
 LLMs can aid in detecting and even suggesting corrections for code bugs. By analyzing code snippets, LLMs can identify common programming errors and recommend fixes, contributing to improved code quality.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Documentation Assistance&lt;/strong&gt;&lt;br&gt;
 LLMs can assist in writing code documentation. Developers can input information or queries, and LLMs can generate detailed explanations or documentation snippets, helping to maintain thorough and up-to-date documentation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Code Refactoring Suggestions&lt;/strong&gt;&lt;br&gt;
 LLMs can provide suggestions for code refactoring, helping developers improve the structure, readability, and efficiency of their code. This can lead to better-maintained and more scalable software.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Learning and Assistance for Beginners&lt;/strong&gt;&lt;br&gt;
 LLMs can serve as educational tools, assisting novice programmers in understanding coding concepts, syntax, and best practices. They can answer queries, provide examples, and offer guidance on various programming tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Natural Language Interface for Coding&lt;/strong&gt;&lt;br&gt;
 LLMs can act as a natural language interface for coding, allowing developers to interact with code using plain language. This is particularly beneficial for those who may not be proficient in a specific programming language but still need to perform coding-related tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Code Translation&lt;/strong&gt;&lt;br&gt;
 LLMs can aid in translating code between programming languages. Developers can express their requirements in natural language, and LLMs can generate equivalent code in a different programming language, promoting interoperability.&lt;/p&gt;

&lt;h2&gt;
  
  
  LLMs for all
&lt;/h2&gt;

&lt;p&gt;Let’s now delve into the other wide-ranging applications of LLMs:&lt;/p&gt;

&lt;h3&gt;
  
  
  Natural Language Processing (NLP)
&lt;/h3&gt;

&lt;p&gt;LLMs are part of the broader field of NLP, where they perform tasks such as text summarization, and condensing extensive passages into concise summaries. Additionally, they demonstrate proficiency in sentiment analysis, comprehending and evaluating sentiments expressed in textual content.&lt;/p&gt;

&lt;p&gt;Furthermore, LLMs enhance the accuracy and efficiency of machine translation, enabling seamless communication across languages. Their question-answering capabilities facilitate precise responses to user queries, revolutionizing information retrieval.&lt;/p&gt;

&lt;h3&gt;
  
  
  Content Creation
&lt;/h3&gt;

&lt;p&gt;In content creation, LLMs are essential tools with versatile capabilities. They contribute to creative writing by generating a variety of text formats, such as poems, code, scripts, musical compositions, emails, and letters. Additionally, LLMs demonstrate their proficiency in dialogue generation, creating realistic and engaging conversations for applications like chatbots and virtual assistants.&lt;/p&gt;

&lt;h3&gt;
  
  
  Education and Training
&lt;/h3&gt;

&lt;p&gt;LLMs play a pivotal role in shaping the future of education and training. They support personalized learning experiences by tailoring educational content for students and employees. Additionally, LLMs aid in the development of training materials, creating engaging and informative resources. As a feedback mechanism, these models provide constructive feedback on written work, enhancing the learning process.&lt;/p&gt;

&lt;h3&gt;
  
  
  Customer Service
&lt;/h3&gt;

&lt;p&gt;LLMs enhance issue resolution quality and efficiency by comprehending customer queries, thereby improving the overall customer experience. Additionally, these models provide personalized recommendations, tailoring suggestions to individual preferences.&lt;/p&gt;

&lt;h3&gt;
  
  
  Research and Discovery
&lt;/h3&gt;

&lt;p&gt;LLMs prove invaluable with their pattern recognition capabilities, enabling the analysis of extensive text datasets and the identification of intricate patterns and trends. Their contribution extends to diverse scientific fields such as medicine, science, and social science, underscoring their potential to significantly advance knowledge and understanding.&lt;/p&gt;

&lt;h2&gt;
  
  
  Limitations of LLMs
&lt;/h2&gt;

&lt;p&gt;LLMs exhibit limitations that warrant consideration across different dimensions. First, there is a susceptibility to biases inherent in the training data, emphasizing the need for awareness and concerted efforts to mitigate biases in their applications.&lt;/p&gt;

&lt;p&gt;Second, the decision-making process of LLMs may lack transparency, potentially impacting trust in specific applications. Ongoing research is actively addressing this concern to enhance the interpretability of LLMs.&lt;/p&gt;

&lt;p&gt;Lastly, the deployment and operation of LLMs come with high costs, posing accessibility challenges for certain users due to financial constraints. Recognizing and addressing these limitations is crucial for fostering responsible and inclusive use of LLMs in various contexts.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Role of Prompts
&lt;/h2&gt;

&lt;p&gt;A “prompt” refers to the input provided to the model to generate a desired output. Creating good prompts for Large Language Models (LLMs) is like an art that needs clear and precise instructions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nlQE4OSo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fd3l68uexb1uw1g30vn.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nlQE4OSo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fd3l68uexb1uw1g30vn.jpg" alt="Prompts" width="800" height="524"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To make these models work well, you have to give them specific and clear prompts that explain what you want. Using simple and clear language with clear instructions helps the model understand what it needs to do. Also, giving extra information in the prompts helps the models give better and more fitting responses.&lt;/p&gt;

&lt;p&gt;It’s important to try different prompts and make them better based on what the model learns. Finding the right balance between being specific and flexible in your prompts helps the models understand and respond well to different things people ask, making the whole process of creating prompts really important for using these powerful language models.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrap Up!
&lt;/h2&gt;

&lt;p&gt;In conclusion, while LLMs present incredible potential for revolutionizing various aspects of our lives, it’s crucial to be aware of their limitations. The continuous development of these models promises increased sophistication, paving the way for tackling even more complex tasks. As the field of artificial intelligence evolves, the future holds exciting possibilities for the continued advancement of large language models.&lt;/p&gt;

</description>
      <category>llm</category>
      <category>ai</category>
      <category>devrel</category>
      <category>promptengineering</category>
    </item>
  </channel>
</rss>
