Study for Language Learning Models (LLM); Build a Fullstack with Retrieval-Augmented Generation (RAG) application. Basic application for fun practice and Vase building. The Expression One Vase A day will teach you more than spending hours trying to perfectly make one vase.

• Frontend/Client: Next.js, HTML5, CSS
• API: LangChain, DataStrax, AstraDB, OpenAI,
• Backend/Server: Node.js, env, /express or python alternatives, include databases

Please reference the screenshot folder for more available images

• confirm that config is appropriate:

> node -v
> npm -v
> git --version

• Initial package.json & install dependenies(localhost:3000):
  • Must be cd'd into frontend/client for install
  • MUI, react-router-dom, redux, formik, etc... (see resources)

> npx create-next-app <project name>
> cd <project name>
> npm install @datastax/astra-db-ts langchain openai dotenv
> npm install @langchain/community @langchain/core puppeteer
> npm install langchain puppeteer
> npm install ai
> npm install ts-node
> npm install @ai-sdk/react
> npx ai-elements@latest

• Test front-end once pages are generated (ctrl-c to exit):

> npm run start

If you want to contact me you can reach me at [email protected].

Connect with me on LinkedIn

Connect with me on Oakhalo.dev

• LangChain for large language models (LLM) here

  • Retrieval Augmented Generation (RAG) here
  • LangChain, LangGraph, LangFlow and LangSmith serve distinct but complementary roles in the development and deployment of Large Language Model (LLM) applications
  • Puppeteer documents here
  • Installation here that can be confirmed

• DataStax for Generative AI App Creation and Development here

  • DataAPI Documents here
  • Chunking: Let's Break It Down here

• OpenAi for chatGPT here

  • API Platform here. Embedding V3 large and Embedding V3 small.

  • AI npm packages here and Next.js App Router here

    • The distinction between ai/react and @ai-sdk/react lies in the evolution and organization of the Vercel AI SDK useChat() here.
    • ai/react (Older): This refers to the earlier, more general package for integrating AI functionalities into React applications within the Vercel AI SDK. It provided hooks and utilities for interacting with large language models (LLMs) and building AI-powered UIs.
    • @ai-sdk/react (Current - had to be installed to allow functionality): This is the modern, namespaced package within the Vercel AI SDK specifically designed for React integration. The Vercel AI SDK has adopted a modular approach, where different functionalities and framework integrations are provided through distinct, scoped packages. @ai-sdk/react contains the React-specific hooks and components, such as useChat and useCompletion, that simplify building conversational interfaces and other AI-driven features in React applications.
    • In essence, @ai-sdk/react is the current and recommended way to leverage the Vercel AI SDK within a React project, replacing the older ai/react package with a more organized and maintainable structure.

    > npm install @ai-sdk/react
    

    • Generating Random keys crypto.randomUUID() here

  • API keys here.

  • Embeddings information here and get dimensions from datastrux 1536. Additional vector info here

• PostMan for API Tests here

  • jsonwebtoken / jwt for Authentification & install here
  • jwt Debugger here

• React.New allows for testing new React projects here

• bcrypt.js part of password hasing for user Authentification.

• frameworks and links associated

• Filler Text typographic

  • Lorem Ipsum

• ColorHexa converter here for hexadecimal (HEX), RGB, HSL

• Google Fonts here

• useful hints for future projects to go faster
• console log testing with ctr-alt-l
• confirm active packages in folder with below command:

  > npm list
  

• Make sure to update billing in corresponding API's, not everything is free (give 30 minutes after account set-up for it to activate)
• Set Timer's for data loading and transfer, so that I can anticipate future data transfer pauses and do research and other things during that time.
  • ~30 minutes for vector loading to DataStax
  • Always Stay Positive & Triple Check Permissions :)
• check for s
• When installing packages do it in the correct folder / level :)

>  "type": "module",

• Uninstall packages command

> npm uninstall <package_name>
> npm install <package-name>@<version-number>

• Overriding / Resolutions / Compiler outdated packages

>             "overrides": {
              "langchain": "0.3.30"
            }
>            "resolutions": {
              "langchain": "0.3.30"
            }
>           "compilerOptions": {
            "module": "commonjs",
            }
> npm install

• Cleaning up Node.Modules with junk; delete node_modulus, package.json, package-lock.json cd into file to avoid issues like this! Make sure to cd into the correct project folder, check package folder location.
• Check versioning: current, wanted, latest, location with command here

> npm outdated

• Folder Structure for applications should be double checked with 404 error.
• Making code a comment is Ctrl + /