Langchain Basic LLM Javascript

• This post shows how to create a simple React application that communicates with an LLM using LangChain. It includes steps for installing dependencies, building a prompt, integrating with OpenAI’s GPT-3.5-turbo, and extracting country, state, and ZIP code information.
• • Project Setup
  • Dependencies
  • llm.js
  • AddressInformationExtractor.jsx
  • App.jsx
  • Running the App

• Project Setup

  Unix-like Shells

  pnpm create vite my-llm-app --template react

  Mac

  pnpm create vite my-llm-app --template react

  Windows Command Prompt (cmd)

  pnpm create vite my-llm-app --template react

  Windows PowerShell

  pnpm create vite my-llm-app --template react

• Dependencies

  Unix-like Shells

  pnpm add langchain @langchain/core @langchain/openai

  Mac

  pnpm add langchain @langchain/core @langchain/openai

  Windows Command Prompt (cmd)

  pnpm add langchain @langchain/core @langchain/openai

  Windows PowerShell

  pnpm add langchain @langchain/core @langchain/openai

• llm.js

• llm.js

  import { OpenAI } from "@langchain/openai";
  import { LLMChain } from "langchain/chains";
  import { PromptTemplate } from "@langchain/core/prompts";
  
  const model = new OpenAI({
    modelName: "gpt-3.5-turbo",
    openAIApiKey: "API_KEY"
  });
  
  const myPrompt = new PromptTemplate({
    template: `Extract from the following text the country, state and zipcode: ${text}`,
    inputVariables: ["text"]
  });
  
  const myChain = new LLMChain({
    llm: model,
    prompt: myPrompt,
    outputKey: "questions",
    verbose: true
  });
  
  export const executePrompt = async (promptKeys) => {
    const response = await myChain.call(promptKeys);
    return response;
  };

• AddressInformationExtractor.jsx

• AddressInformationExtractor.jsx

  import React, { useState } from "react";
  import { executePrompt } from "./llm";
  
  export const AddressInformationExtractor = () => {
    const [text, setText] = useState(
      "there is a place in USA, a really interesting place and inside something called New York, in particular 10001."
    );
    const [addressInfo, setAddressInfo] = useState("");
  
    const extractAddressInfo = async () => {
      const response = await executePrompt({ text });
      setAddressInfo(response);
    };
  
    return (
      <div>
        <h1>Address Information Extractor</h1>
        <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Enter text here"
        />
        <button onClick={extractAddressInfo}>Extract Address Information</button>
        <p>{addressInfo.questions}</p>
      </div>
    );
  };

• App.jsx

• App.jsx

  import './App.css';
  import { AddressInformationExtractor } from './components/AddressInformationExtractor';
  
  function App() {
    return (
      <>
        <AddressInformationExtractor />
      </>
    );
  }
  
  export default App;

• Running the App

• Unix-like Shells

  pnpm install \
  pnpm run dev

  Mac

  pnpm install \
  pnpm run dev

  Windows Command Prompt (cmd)

  pnpm install ^
  pnpm run dev

  Windows PowerShell

  pnpm install `
  pnpm run dev

• Once the development server is running, open your browser at the provided URL and enter a text with a country, state, and ZIP code. Click “Extract Address Information” to see the response.