Background Information

Project overview

Setup

Introduction

Prompt template

LCEL

Introduction to prompt engineering

Prompts

Memory

Conversation memory

Supabase

Restoring memory

Vectorstores

Supabase vector

Ingest

Retrieval

Generation

Retrieval Augmented Generation

Output Parsing

Tools

Agents

Langsmith

Farewell

( the primaryDescriptionMarkdown is long - several lines, include images, as long as you want )

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>. 

In <the length of these lessons> we cover <three salient points about what we cover. Your BEST points>. Its <however long it is> and comes with <these bonus features, and reasons to buy. code, etc.>

It's taught by <author name> who <credibility, reason you should listen to them>. <social proof, if you have it yet>

<then you can list other supporting stuff you want to add, anything you want here>

-------
Example:
-------

We created a free course to create your first GraphQL server (from scratch) using Node and TypeScript. TypeScript and GraphQL are a powerful combo, but there's a lot of confusing edges if you're getting it setup the first time.

In this course we cover the basics of getting TypeScript setup with Node, how GraphQL works, and how to set up a GraphQL server using Apollo server. It's two hours long, it comes with complete code examples, and we walk through the code step-by-step.

It's taught by my friend, Shopify-engineer Hassan Djirdeh and he's integrated what he's learned using GraphQL in production as an engineer at Shopify. We've already had over 1,300 students enroll and it's been getting great reviews so far.

// ... and so on

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>. 

( the summary is short - one or two lines )

Langchain.js Bootcamp

Output parsing is just what you do with the outputs of the model. The direct outputs are often tokens so at the least you'd probably want to turn that into ascii. But you may also want other steps such as calling a translation service depending on user cookies.

But by large, Output Parsing is synonymous with parsing Structured Data like JSON, XML, or otherwise. In the next lesson, we'll go over why Strucutured Data is important, and how it opens the door to some exciting possibilities.

It can be hard to understand what is possible from outputting Objects. So let's go over a few examples.

Generally javascript Objects look like this.

// JSON
{
  a: 1,
  b: [2,3,4],
  c: "abcd"
  d: {
    e: true
  }
}

/**
 * Interface for the input parameters of the `BufferMemory` class.
 */
interface BufferMemoryInput extends BaseChatMemoryInput {
  humanPrefix?: string;
  aiPrefix?: string;
  memoryKey?: string;
}

const memory = new ConversationSummaryMemory({
  memoryKey: "chat_history",
  llm: new OpenAI({ modelName: "gpt-3.5-turbo", temperature: 0 }),
});

// Example POST method implementation:
async function postData(url = "", data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

export class PromptTemplate
/* ... */
  constructor(input: PromptTemplateInput<RunInput, PartialVariableName>) {
    super(input);
    Object.assign(this, input);
  }

If we can constrain the output of a language model into these structured formats it can be used to create components, make API requests, and much more.

An interesting use of API requests is to use a language model to interface with a SQL database. You can include descriptions of your schema in the prompt and get the model to output a SQL query and return the data. You can also give it a repo to output to so it starts building a library.

Other structured formats include XML, HTML, and Markdown. Language models often output Markdown to render rich text. It's one of the easiest ways to enrich your chat application and it's handled by 

 in our starter code. Try it out by asking a coding question.

---
code: https://gitlab.com/fullstackio/books/newline-course-apps/jeffery-wang-langchain.js-bootcamp-app/-/tree/main/Code/module_05/lesson_05.01/protected/src?ref_type=heads
---

# Output Parsing

Output parsing is just what you do with the outputs of the model. The direct outputs are often tokens so at the least you'd probably want to turn that into ascii. But you may also want other steps such as calling a translation service depending on user cookies.

But by large, Output Parsing is synonymous with parsing Structured Data like JSON, XML, or otherwise. In the next lesson, we'll go over why Strucutured Data is important, and how it opens the door to some exciting possibilities.

## Primer

It can be hard to understand what is possible from outputting Objects. So let's go over a few examples.

Generally javascript Objects look like this.

```javascript
// JSON
{
  a: 1,
  b: [2,3,4],
  c: "abcd"
  d: {
    e: true
  }
}
```

They can also be typed.

```javascript
/**
 * Interface for the input parameters of the `BufferMemory` class.
 */
interface BufferMemoryInput extends BaseChatMemoryInput {
  humanPrefix?: string;
  aiPrefix?: string;
  memoryKey?: string;
}
```

And used in params.

```javascript
const memory = new ConversationSummaryMemory({
  memoryKey: "chat_history",
  llm: new OpenAI({ modelName: "gpt-3.5-turbo", temperature: 0 }),
});
```

The format for HTTP is an object.

```javascript
// Example POST method implementation:
async function postData(url = "", data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}
```

> __[From Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options)__

Props to [React Functional Components](https://react.dev/learn/keeping-components-pure) are objects.

```javascript
<Component {...props} />
```

[Prompt Templates](https://github.com/langchain-ai/langchainjs/blob/bcf9a9853b67bcf02e145e775ca9f7009dc2b903/langchain/src/prompts/prompt.ts#L116C1-L118C32) are objects.

```javascript
export class PromptTemplate
/* ... */
  constructor(input: PromptTemplateInput<RunInput, PartialVariableName>) {
    super(input);
    Object.assign(this, input);
  }
```

If we can constrain the output of a language model into these structured formats it can be used to create components, make API requests, and much more.

:::note
An interesting use of API requests is to use a language model to interface with a SQL database. You can include descriptions of your schema in the prompt and get the model to output a SQL query and return the data. You can also give it a repo to output to so it starts building a library.
:::

:::note
Other structured formats include XML, HTML, and Markdown. Language models often output Markdown to render rich text. It's one of the easiest ways to enrich your chat application and it's handled by `react-markdown` in our starter code. Try it out by asking a coding question.
:::