DEV Community: xbb

How to Write Midjourney Prompts

xbb — Tue, 24 Jun 2025 12:42:49 +0000

A comprehensive guide to mastering AI image generation through effective prompting techniques

1. Midjourney Prompts: The Basics

What is Midjourney

Midjourney is an advanced generative AI model that turns prompts into images. It uses written descriptions (text prompts) and images (image prompts) to generate high-quality images. Midjourney is the current state-of-the-art model for image generation, followed by DALL-E, Grok, Flux, Adobe Firefly, and Stable Diffusion, among others.

Midjourney is developed by a team of researchers in an independent research lab (Midjourney Inc.), headed by David Holz.

How does Midjourney work?

Midjourney uses a diffusion model to generate images. The process involves gradually transforming random noise into images through multiple steps. The models are trained on vast datasets of images paired with text descriptions. The exact technical details are not public since Midjourney is an independent, self-funded company.

Elements of a Midjourney Prompt

Text, images, and parameters are the main elements used in prompting Midjourney. Using all the elements is not required, but it can help in perfecting prompts to get optimal outputs from Midjourney. These elements and their subcategories will be explored in the course.

Image Prompting for Midjourney

Images can be used in three ways: image reference, character reference, and style reference. Multiple images can be used simultaneously. The same image can serve multiple reference types. Users can use images from "Explore" and "Create" workspaces, or upload their images in JPG, GIF, or PNG formats.

2. Midjourney Prompt Guide: Basic Structure

Model Selection

Default model (version 6.1) - Released on July 30th, 2024

Anime-focused model "Niji" (version 6)

The default model handles many styles and subjects. In contrast, the Niji model is used in anime and illustrative styles, particularly for dynamic action shots and character-focused compositions.

Model Selection Recommendations

For most tasks, using the latest version of a model is recommended as the best option
For anime or illustration style images, use the latest Niji model
For non-anime/illustration needs, use the latest default model

General Tips on Text Prompting

Keep prompts short and simple when starting, focusing on concise descriptions. Structure prompts using four elements: subject, action, medium, and style. The default style will fill in unspecified details. Adding more details gives better control, but increases complexity.

Example:

A cat, lying on a sofa, pencil drawing, in the style of minimalism

Midjourney Prompt Format

Place the main subject at the start of the prompt, followed by style or composition details. Separate different elements with commas. Avoid extra phrases like "Show me an image of..." or "generate an image of..." Keep prompts focused and remove unnecessary words.

Example:

Three brightly glowing red orbs, in a dark forest with thick mist, dynamic lighting, and an eerie atmosphere

Prompt Length Limitations

The system may ignore content exceeding approximately 40 words. Content beyond 60 words is highly likely to be disregarded. Anything after 80 words will almost certainly be truncated. To maximize effectiveness, keep your prompts concise and focused on essential elements.

Word Choices for Midjourney Prompts

Selecting specific words is crucial as they can significantly impact the generated result (e.g., using "big" vs "massive"). Use clear, specific descriptions rather than generic terms like "cool" or "nice". Art-related terms such as "cinematic" or "photorealistic" are effective keywords for generating images in those specific styles.

Example comparison:

A smiling woman holding a big apple

vs.

A smiling woman holding a massive apple

Using ChatGPT to Enhance Midjourney Prompts

Leverage the power of multiple AI tools by using ChatGPT to help craft your Midjourney prompts. This approach can significantly enhance the quality and creativity of your generated images. The process involves:

Describing your initial concept to ChatGPT
Asking ChatGPT to expand and refine your description with appropriate details and terminology
Using the enhanced description as your Midjourney prompt
Iterating based on results

3. Key Elements of Effective Prompts

Context and Details

Subject: person, animal, character, location, object
Medium: photo, painting, illustration, sculpture, doodle, tapestry
Environment: indoors, outdoors, on the moon, underwater, in a city
Lighting: soft, ambient, overcast, neon, studio lights, golden hour
Color: muted, bright, colorful, black and white, pastel
Mood: calm, raucous, energetic, ominous

Example:

A mystical cat (Subject) sitting on a mossy rock by a forest stream, digital painting (Medium), in a magical forest environment (Environment), soft ambient lighting (Lighting), colorful and pastel palette (Color), calm and enchanting mood (Mood)

Shot & Composition Types

Using a specific shot type helps the model generate better images if you already have a composition in mind.

Use these terms to help the model with image composition:

Portrait
Headshot
Close-up
Medium shot
Wide shot
Bird's eye view
Over-the-shoulder
Low-angle shot
High-angle view
POV
Establishing shot
Macro shot

Example comparison:

A cat in the air, in a field of wheat, bird's eye view

vs.

A cat in the air, in a field of wheat, portrait shot

Generating Text in Images

Generating text in images can be challenging. Include desired text in quotes: "text". Use specific prompt phrases like:

"insert text" written on a sign
The text "insert text" glowing on a neon sign
Hot coals in a fire pit forming the words "insert text"

Keep text short as full sentences often fail to generate correctly. Specify the style or context of the text if needed.

Example:

A rustic wooden sign in a lush green meadow, with the text "Welcome" written in bold, hand-painted letters, soft sunlight, and a naturalistic style

Prompting for Photography Styles

To generate photographic style images, specify:

Camera types: Sony A7, Nikon Z, Fujifilm X-T5, Canon EOS, dash cam, security camera, GoPro, DSLR, Polaroid, analog, digital
Film stock: Daguerreotype, Washi film, Cyanotype, Ilford XP2 film, Cinestill 800T, redscale, Kodak portra 160, 35mm film
Lens types: tilt shift lens, fisheye lens, macro lens
Optical effects: lens, light, chromatic aberrations, double exposure, long exposure, motion blur, zoom blur

Add "--style raw" parameter at the end of your prompt.

Example:

Photo of a street name sign, "Photographic Styles" written on the sign, DSLR, 35mm film, tilt shift lens

4. Advanced Parameter Controls

Introduction to Parameters

Parameters are tools to customize prompts and guide image generation. They are added after the text prompt in the Imagine bar. Parameters start with two dashes "--" followed by the parameter name/abbreviation and sometimes a numeric value. Multiple parameters can be used together, separated by spaces.

Aspect Ratio —ar

Aspect ratio can be defined in a prompt using the parameter "--ar x:x". It overrules any current settings applied to generation tasks in the settings. Example prompt: "A portrait of a woman in a red dress --ar 9:16". The ratio is limited to 1:14 / 14:1 in height/width.

Model Version

Corresponds to "Version" in settings and defines which Model Version is used. Use "--v x" parameter, where x indicates the model number. Accepts values: 1, 2, 3, 4, 5, 5.0, 5.1, 5.2, 6, and 6.1. For Niji models, use "--niji" for the latest version, or "--niji" followed by 4 or 5 for older models.

Stylize —s

Corresponds to the "Stylization" setting and controls how strongly Midjourney's aesthetic is applied. Used with "--s x" where x is a value from 0 to 1000. The default level is 100. Low values produce images that closely match prompts but are less artistic. High values create more artistic images but may deviate more from the original prompt.

Weird —w

Corresponds to "Weird" in settings. Used with "--w x" where x ranges from 0 to 3000. The default value is 0. Higher values create increasingly strange and unpredictable generations.

Chaos —c

Corresponds to "Variety" in settings, influences the diversity in each image generation batch of 4 per prompt. Use "--c x", x indicating the value ranging from 0 - 100. The default value is 0. High values produce more unusual and unexpected results and compositions. Lower values have more reliable and repeatable results.

Image Weight —iw

Can only be used with Image Prompts. Defines how strongly image prompts influence generated results. Use "--iw x" parameter, where x ranges from 0 to 3. The default value is 1.

Character Weight —cw

Can only be used with Character Reference images. Defines how strongly character reference prompts influence generated results. Uses "--cw x" parameter with values from 0-100. The default value is 100.

Style Weight —sw

Can only be used with Style Reference codes or images in the prompt. Defines how strongly style reference images or codes influence generated results. Uses "--sw x" parameter with values ranging from 0 to 1000. The default value is 100.

Negative Prompting —no

The "--no x" parameter tells Midjourney what to exclude from generated images. Multiple words can be included in the negative prompt, separated by commas. Example: "A hand holding a baseball --no red, green, stadium". When wanting to avoid specific elements, they should not be included in the central text part of the prompt.

Repeat —r

The parameter allows multiple generations of the same prompt without restarting the generation task. Value ranges by subscription level:

Basic subscribers: 2-4
Standard subscribers: 2-10
Pro and Mega subscribers: 2-40

Can only be used in Fast and Turbo mode.

Quality —q

The "--q" parameter affects image generation speed and GPU credits. Lower values generate less detailed images, which are helpful for experimenting with new prompts. Higher values cost more credits and can improve image texture and details, but may reduce coherency.

Accepted values:

Model version 6.1: 0.5 - 2
Model version 6: 0.25 - 1

The default value is 1.

Style

Not the same as Stylize. Corresponds with "Mode" in settings, allowing switching between Standard and Raw styles. Use "--style raw" to minimize Midjourney's default style influence, creating more photorealistic and natural-looking images.

Stop

The "--stop x" parameter finishes image generations partway through the process. The x value should be between 10-100 (percentage). Lower values create blurrier, less detailed results. The default value is 100. Example: "A hand holding a baseball --stop 50".

Speed Modes (Relax, Fast, Turbo)

Relax mode (--relax): Slower but has uncapped generation capability. Only available with Standard Plan or higher
Fast mode (--fast): This is the default setting. Can be activated by including "--fast" in your prompt if another mode is selected in settings
Turbo mode (--turbo): The fastest option (up to 4x faster), but uses twice as many credits

Tile

The "--tile" parameter generates images that can be used as seamless repeating patterns or textures. It's beneficial for creating:

Wallpapers
Game textures
Wrapping paper designs

Important limitation: This feature does not work with Niji models.

Personalize

The "--p" parameter becomes available after training your personalized model by ranking images in the Personalize workspace. Midjourney generates a unique code for your preferred style that can be shared with others. A minimum of 40 images need to be ranked to access personalization, with better results as more images are ranked.

5. Midjourney Art Style Prompts: Using Reference Images

Midjourney Style Prompts

Style Reference images are used to affect the overall style and aesthetic of generated images. You can control the Style Reference effect strength using the "--sw" parameter (detailed in the next chapter). Use your selected preparatory material image as the prompt.

Character Reference

Character Reference allows you to use the same character in multiple different situations. It's recommended to use an image with only one character for best results. Character Reference works best with images generated with Midjourney. While not perfect, the model may miss minor details like logos or freckles. The strength of Character Reference can be adjusted using the "--cw" parameter.

Multiple References

Using multiple different reference images allows you to 'blend' images together. You can merge different aesthetics, characters, and compositions from multiple images to create unique outputs. Images can be used from your generated images or the Explore workspace, with different roles:

One as the Image Prompt
Another as the Style Reference
A third as the Character Reference

6. Conclusion: Mastering Midjourney Prompts

Crafting effective Midjourney prompts is both an art and a science. As we've explored throughout this guide, the quality of your prompts directly influences the images you'll generate. By understanding the fundamental structure, parameters, and reference techniques, you can significantly improve your results and unlock the full creative potential of AI image generation.

From Inspiration to Implementation

Whether you're a digital artist, designer, marketer, or creative enthusiast, the ability to precisely communicate your vision to AI tools like Midjourney opens up endless possibilities. Remember these key takeaways:

Start with clear, specific descriptions of your subject
Incorporate artistic style references when appropriate
Use parameters strategically to fine-tune your results
Experiment with reference images to guide the AI
Keep refining your approach based on results

Streamline Your AI Art Workflow

If you're looking to enhance your Midjourney prompting skills further, ImagesArt.ai offers complementary tools that can significantly improve your workflow:

Image to Prompt Converter: Found an inspiring image but can't figure out how to describe it for Midjourney? Our Image to Prompt tool can analyze any reference image and generate detailed prompt descriptions that capture its essential elements. This is particularly valuable when you want to recreate a specific style or composition but struggle to articulate it in words.

By combining the techniques learned in this guide with these specialized tools, you can develop a more efficient and effective approach to AI image generation. The key to mastery is consistent practice, thoughtful experimentation, and a willingness to learn from both successful and unsuccessful attempts.

References and Citations

Midjourney, Inc. (2025). Prompt Basics. Midjourney Documentation.https://docs.midjourney.com/hc/en-us/articles/32023408776205-Prompt-Basics
Midjourney, Inc. (2025). Parameter List. Midjourney Documentation.https://docs.midjourney.com/hc/en-us/articles/32859204029709-Parameter-List
Midjourney, Inc. (2025). Multi-Prompts & Weights. Midjourney Documentation.https://docs.midjourney.com/hc/en-us/articles/32658968492557-Multi-Prompts-Weights
Midjourney, Inc. (2025). Documentation – Midjourney. Midjourney Documentation.https://docs.midjourney.com/hc/en-us/categories/32013335627533-Documentation

Building a Chatbot using your documents with LangChain from Scratch

xbb — Mon, 24 Jun 2024 14:09:10 +0000

Introduction

This tutorial will guide you through creating a chatbot that uses your documents to provide intelligent responses. We'll leverage LangChain for natural language processing, document handling, and a vector database for efficient data retrieval. The stack includes Vite for project setup, React for the front-end, TailwindCSS for styling, OpenAI for generating responses, and Supabase as our vector database. This guide aims to provide a step-by-step approach to building a chatbot from scratch using LangChain, and it will also cover how to develop a chatbot using LangChain effectively. By the end of this tutorial, you'll know how to build an LLM RAG (Retrieval-Augmented Generation) Chatbot with LangChain.

You can find the complete project code on GitHub.

Who is this for?

This tutorial is designed for developers who:

Have basic knowledge of React and JavaScript.
Want to build AI-powered applications using their own documents.
Are looking to integrate vector databases and AI models into their projects.

What will be covered?

Setting up a new project with Vite and TailwindCSS.
Integrating LangChain with OpenAI for AI capabilities.
Using Supabase as a vector database to store and retrieve document data.
Building the front-end components for the chatbot.
Creating utilities for document handling and AI response generation.

Architecture

Preparation

Create a vector store on Supabase, please refer to this GitHub Repo.

Step-by-Step Guide

Step 1: Initialize the Project with Vite

Create a new Vite project:

npm create vite@latest ai-assistant -- --template react
cd ai-assistant

Step 2: Install Necessary Dependencies

Install TailwindCSS and other dependencies:

npm install tailwindcss postcss autoprefixer react-router-dom @langchain/core @langchain/openai @supabase/supabase-js

Step 3: Configure TailwindCSS

Initialize TailwindCSS:

npx tailwindcss init -p

Configure tailwind.config.js:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Configure Environment Variables

Create a .env file in the root of your project and add your API keys:

VITE_SUPABASE_BASE_URL=your-supabase-url
VITE_SUPABASE_API_KEY=your-supabase-api-key
VITE_OPENAI_API_KEY=your-openai-api-key
VITE_OPENAI_BASE_URL=https://api.openai.com/v1

Step 5: Project Directory Structure

Organize your project files as follows:

src/
├── components/
│   ├── Avatar.jsx
│   ├── Chat.jsx
│   ├── ChatBox.jsx
│   ├── Header.jsx
│   └── Message.jsx
├── utils/
│   ├── chain.js
│   ├── combineDocuments.js
│   ├── formatConvHistory.js
│   └── retriever.js
├── App.jsx
├── main.jsx
├── index.css
└── custom.css

Step 6: Main Entry Point

src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import './custom.css'; // Custom CSS

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

The main.jsx file sets up the React application by rendering the App component into the root element. It also imports the main styles, including TailwindCSS and any custom CSS.

Step 7: Creating Components

App Component

src/App.jsx

import Chat from './components/Chat'

function App() {
  return (
    <Chat />
  )
}

export default App

The App component serves as the root component of the application. It simply renders the Chat component, which contains the main functionality of the AI assistant.

Chat Component

src/components/Chat.jsx

import { useState, useEffect } from 'react';
import Header from './Header';
import Message from './Message';
import ChatBox from './ChatBox';
import robotAvatar from '../assets/robot-avatar.png';
import userAvatar from '../assets/profile.jpg';
import { chain } from '../utils/chain';
import { formatConvHistory } from '../utils/formatConvHistory';

function Chat() {
  const [messages, setMessages] = useState(() => {
    // Retrieve messages from local storage if available
    const savedMessages = localStorage.getItem('messages');
    return savedMessages ? JSON.parse(savedMessages) : [];
  });

  const [isLoading, setIsLoading] = useState(false);

  // Save messages to local storage whenever they change
  useEffect(() => {
    localStorage.setItem('messages', JSON.stringify(messages));
  }, [messages]);

  // Handle new messages sent by the user
  const handleNewMessage = async (text) => {
    const newMessage = {
      time: new Date().toLocaleTimeString(),
      text,
      avatarSrc: userAvatar,
      avatarAlt: "User's avatar",
      position: "left",
      isRobot: false,
    };

    setMessages((prevMessages) => [...prevMessages, newMessage]);

    const updatedMessages = [...messages, newMessage];

    setIsLoading(true);

    try {
      // Invoke the LangChain API to get the AI's response
      const response = await chain.invoke({
        question: text,
        conv_history: formatConvHistory(updatedMessages.map(msg => msg.text)),
      });

      const aiMessage = {
        time: new Date().toLocaleTimeString(),
        text: response,
        avatarSrc: robotAvatar,
        avatarAlt: "Robot's avatar",
        position: "right",
        isRobot: true,
      };

      setMessages((prevMessages) => [...prevMessages, aiMessage]);
    } catch (error) {
      console.error("Error fetching AI response:", error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <main className="font-merriweather px-10 py-8 mx-auto w-full bg-sky-950 max-w-[480px] h-screen">
      <Header
        mainIconSrc={robotAvatar}
        mainIconAlt="Main icon"
        title="AI-Assistant"
      />
      <div id="chatbot-conversation-container" className="flex flex-col gap-y-2 mt-4">
        {messages.map((message, index) => (
          <Message
            key={index}
            time={message.time}
            text={message.text}
            avatarSrc={message.avatarSrc}
            avatarAlt={message.avatarAlt}
            position={message.position}
            isRobot={message.isRobot}
          />
        ))}
      </div>
      <div className="mt-auto mb-4">
        <ChatBox
          label="What's happening?"
          buttonText="Ask"
          onSubmit={handleNewMessage}
          isLoading={isLoading}
        />
      </div>
    </main>
  );
}

export default Chat;

The Chat component is the core of the AI assistant, handling message state and interaction logic.

useState is used to initialize and manage the messages state, which holds the chat messages, and the isLoading state, which indicates if a message is being processed.
The useEffect hook ensures that messages are saved to local storage whenever the messages state changes. This allows chat history to persist across page reloads.
The handleNewMessage function processes new messages sent by the user. It creates a new message object, updates the state with the new message, and sends the message to the LangChain API to get a response.
The AI response is then added to the messages state, updating the chat interface with both the user and AI messages.
The return statement defines the layout of the chat interface, including the header, message list, and input box. The Header component displays the chat title and main icon, while the Message component renders each message in the chat history. The ChatBox component provides an input field and button for sending new messages.

Header Component

src/components/Header.jsx

import React from "react";
import PropTypes from "prop-types";
import Avatar from "./Avatar";

function Header({ mainIconSrc, mainIconAlt, title }) {
  return (
    <header className="flex flex-col mx-auto items-center grow shrink-0 basis-0 w-fit">
      <Avatar src={mainIconSrc} alt={mainIconAlt} className="aspect-square w-[129px]" />
      <h1 className="mt-3 text-4xl text-center text-stone-200">{title}</h1>
    </header>
  );
}

Header.propTypes = {
  mainIconSrc: PropTypes.string.isRequired,
  mainIconAlt: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};

export default Header;

The Header component displays the title and main icon of the chat application.

Message Component

src/components/Message.jsx

import PropTypes from "prop-types";
import Avatar from "./Avatar";

const avatarStyles = "rounded-full shrink-0 self-end aspect-square w-[47px]";
const messageTimeStyles = "self-center mt-5 text-xs font-bold leading-4 text-slate-600";

function Message({ text, time, avatarSrc, avatarAlt, position, isRobot }) {

  const messageTextStyles = `text-sm leading-4 rounded-xl p-3 mt-2 ${isRobot ? "bg-sky-50 black-800" : "bg-cyan-800 text-white"
    } font-merriweather`; // Apply Merriweather font

  return (
    <section className={`flex gap-2 ${position === 'left' ? 'justify-start' : 'justify-end'} items-center`}>
      {position === 'left' && <Avatar src={avatarSrc} alt={avatarAlt} className={avatarStyles} />}
      <div className="flex flex-col grow shrink-0 basis-0 w-fit">
        {time && <time className={messageTimeStyles}>{time}</time>}
        <p className={messageTextStyles}>{text}</p>
      </div>
      {position === 'right' && <Avatar src={avatarSrc} alt={avatarAlt} className={avatarStyles} />}
    </section>
  );
}

Message.propTypes = {
  text: PropTypes.string.isRequired,
  time: PropTypes.string,
  avatarSrc: PropTypes.string.isRequired,
  avatarAlt: PropTypes.string.isRequired,
  position: PropTypes.oneOf(['left', 'right']).isRequired,
  isRobot: PropTypes.bool.isRequired,
};

export default Message;

The Message component displays individual messages within the chat interface.
It uses the Avatar component to display the avatar of the message sender.
The messageTextStyles are applied to style the message text, with different styles for user and robot messages.

ChatBox Component

src/components/ChatBox.jsx

import { useState } from "react";
import PropTypes from "prop-types";

const inputStyles = "w-full px-4 pt-4 pb-4 mt-2 text-base leading-5 bg-sky-900 rounded-xl border-4 border-solid shadow-sm border-slate-600 text-gray-100 resize-none";
const buttonStyles = "w-full px-6 py-3 mt-3 text-2xl font-bold text-center text-white whitespace-nowrap rounded-xl bg-slate-600 hover:bg-slate-700 hover:translate-y-0.5 focus:outline-none ";
const buttonDisabledStyles = "w-full px-6 py-3 mt-3 text-2xl font-bold text-center text-white whitespace-nowrap rounded-xl bg-slate-600 opacity-50 cursor-not-allowed";

function ChatBox({ label, buttonText, onSubmit, isLoading }) {
  const [message, setMessage] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    if (message.trim() && !isLoading) {
      onSubmit(message);
      setMessage('');
    }
  };

  return (
    <section className="flex flex-col mt-4">
      <form onSubmit={handleSubmit}>
        <label htmlFor="chatInput" className="sr-only">{label}</label>
        <input
          id="chatInput"
          placeholder={label}
          className={inputStyles}
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button
          type="submit"
          className={isLoading ? buttonDisabledStyles : buttonStyles}
          disabled={isLoading}
        >
          {buttonText}
        </button>
      </form>
    </section>
  );
}

ChatBox.propTypes = {
  label: PropTypes.string.isRequired,
  buttonText: PropTypes.string.isRequired,
  onSubmit: PropTypes.func.isRequired,
  isLoading: PropTypes.bool.isRequired,
};

export default ChatBox;

The ChatBox component provides an input box and a button for users to send messages.
It uses useState to manage the message input state.
The handleSubmit function handles the form submission, invoking the onSubmit function with the message content.

Avatar Component

src/components/Avatar.jsx

import React from "react";
import PropTypes from "prop-types";

function Avatar({ src, alt, className }) {
  return <img loading="lazy" src={src} alt={alt} className={className} />;
}

Avatar.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string,
};

export default Avatar;

The Avatar component renders an avatar image.

Step 8: Utility Functions

Chain Utility

src/utils/chain.js

import {
  RunnablePassthrough,
  RunnableSequence,
} from "@langchain/core/runnables";
import { ChatOpenAI } from "@langchain/openai";
import { StringOutputParser } from "@langchain/core/output_parsers";
import { PromptTemplate } from "@langchain/core/prompts"
import { retriever } from './retriever';
import { combineDocuments } from './combineDocuments';

const openAIApiKey = import.meta.env.VITE_OPENAI_API_KEY;
const openAIUrl = import.meta.env.VITE_OPENAI_BASE_URL;

const llm = new ChatOpenAI({
  apiKey: openAIApiKey,
  configuration: {
    baseURL: openAIUrl,
  }
});

// A string holding the phrasing of the prompt
const standaloneQuestionTemplate = `Given some conversation history (if any) and a question,
convert the question to a standalone question.
conversation history: {conv_history}
question: {question}
standalone question:`;
// A prompt created using PromptTemplate and the fromTemplate method
const standaloneQuestionPrompt = PromptTemplate.fromTemplate(standaloneQuestionTemplate);

const answerTemplate = `You are a helpful and enthusiastic support bot who can answer a given question based on
the context provided and the conversation history. Try to find the answer in the context. If the answer is not given
in the context, find the answer in the conversation history if possible. If you really don't know the answer,
say "I'm sorry, I don't know the answer to that." And direct the questioner to email help@example.com.
Don't try to make up an answer. Always speak as if you were chatting to a friend.
context: {context}
conversation history: {conv_history}
question: {question}
answer: `;
const answerPrompt = PromptTemplate.fromTemplate(answerTemplate);

// Take the standaloneQuestionPrompt and PIPE the model
const standaloneQuestionChain = standaloneQuestionPrompt
  .pipe(llm)
  .pipe(new StringOutputParser());

const retrieverChain = RunnableSequence.from([
  prevResult => prevResult.standalone_question,
  retriever,
  combineDocuments,
]);

const answerChain = answerPrompt
  .pipe(llm)
  .pipe(new StringOutputParser());

const logConvHistory = async (input) => {
  console.log('Conversation History:', input.conv_history);
  return input;
}

const chain = RunnableSequence.from([
  {
    standalone_question: standaloneQuestionChain,
    original_input: new RunnablePassthrough(),
  },
  {
    context: retrieverChain,
    question: ({ original_input }) => original_input.question,
    conv_history: ({ original_input }) => original_input.conv_history,
  },
  logConvHistory,
  answerChain,
]);

export { chain };

Here is a Flowchart

This file sets up a sequence of operations to handle the user's query and retrieve an appropriate response using LangChain, OpenAI, and a retriever for context.
- StandaloneQuestionChain: It is responsible for converting a user's query, which may depend on the context of previous conversation history, into a standalone question that can be understood without any prior context.
- RetrieverChain : It is used to retrieve relevant documents from the vector database that are pertinent to the standalone question generated by the StandaloneQuestionChain.
- LogConvHistory : It is a simple logging function used to print the conversation history to the console. This can be helpful for debugging and understanding the flow of conversation and how it influences the generated responses.
- AnswerChain : It is responsible for generating a response to the user's question based on the retrieved context and the conversation history.

Combine Documents Utility

src/utils/combineDocuments.js

export function combineDocuments(docs) {
  return docs.map((doc) => doc.pageContent).join('\n\n');
}

This utility function combines multiple documents into a single string. This is useful for providing a unified context to the AI model.

Format Conversation History Utility

src/utils/formatConvHistory.js

export function formatConvHistory(messages) {
  return messages.map((message, i) => {
    if (i % 2 === 0) {
      return `Human: ${message}`
    } else {
      return `AI: ${message}`
    }
  }).join('\n')
}

This utility function takes an array of messages and formats them into a conversation between a human and an AI.

Retriever Utility

src/utils/retriever.js

import { SupabaseVectorStore } from "@langchain/community/vectorstores/supabase";
import { OpenAIEmbeddings } from "@langchain/openai";
import { createClient } from '@supabase/supabase-js';

const sbUrl = import.meta.env.VITE_SUPABASE_BASE_URL;
const sbApiKey = import.meta.env.VITE_SUPABASE_API_KEY;
const openAIApiKey = import.meta.env.VITE_OPENAI_API_KEY;
const openAIUrl = import.meta.env.VITE_OPENAI_BASE_URL;

const client = createClient(sbUrl, sbApiKey);

const embeddings = new OpenAIEmbeddings({
  apiKey: openAIApiKey,
  configuration: {
    baseURL: openAIUrl
  }
});

const vectorStore = new SupabaseVectorStore(embeddings, {
  client,
  tableName: 'personal_infos',
  queryName: 'match_personal_infos',
});

const retriever = vectorStore.asRetriever();

export { retriever };

This utility sets up a retriever using Supabase and OpenAI embeddings.
- SupabaseVectorStore: Initializes a vector store using Supabase.
- OpenAIEmbeddings: Creates embeddings using OpenAI.
- The retriever is then used to fetch relevant documents based on the user's query.

Running the Application

Start the Development Server:
```
npm run dev
```
Access the Application:
Open your browser and navigate to http://localhost:5173.

Conclusion

In this tutorial, you learned how to build an AI assistant using LangChain, OpenAI, and Supabase. We've covered the setup of a Vite project, integration of TailwindCSS, and the creation of React components and utility functions. You now have a functional AI assistant that can interact with users and provide responses based on the conversation history and context.

References

How to Build a Travel Agent with OpenAI API

xbb — Mon, 24 Jun 2024 03:34:31 +0000

Introduction

Building an AI Agent has never been easier, thanks to the OpenAI API. In this guide, we'll show you how to create your own AI agent to plan trips and provide travel tips. This step-by-step tutorial will help you build an AI-driven travel agent quickly. If you're wondering how to build an AI from scratch, this guide will walk you through the process. Let's get started!

Who is this for?

This tutorial is intended for developers with basic knowledge of JavaScript and React who want to integrate OpenAI's capabilities into their applications to create intelligent, conversational agents.

What will be covered?

React useEffect and useState Hooks
How to access weather API through OpenAI
Implementing weather, flight, and hotel data fetching using OpenAI.

You can find the complete project code on GitHub.

Step-by-Step Guide

1. Initialize the Project with Vite

Create a new Vite project:

npm create vite@latest travel-agent -- --template react
cd travel-agent

2. Configure Environment Variables

Create a .env file in the root of your project and add your API keys:

VITE_OPENAI_API_KEY=your-openai-api-key
VITE_OPENAI_BASE_URL=https://api.openai.com/v1
VITE_WEATHER_API_KEY=your-openweathermap-api-key

3. Install Necessary Dependencies

Install dependencies for TailwindCSS, React Router, DatePicker, and other utilities:

npm install tailwindcss postcss autoprefixer react-router-dom react-datepicker openai

4. Set Up TailwindCSS

Initialize TailwindCSS:

npx tailwindcss init -p

Configure tailwind.config.js:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Project Directory Structure

Organize your project files as follows:

src/
├── components/
│   └── TravellerCounter.jsx
├── pages/
│   ├── Plan.jsx
│   └── Suggestion.jsx
├── utils/
│   ├── openai.js
│   ├── tools.js
│   └── weather.js
├── App.jsx
├── main.jsx
└── index.css

6. TravellerCounter Component

src/components/TravellerCounter.jsx

import React from 'react';
import PropTypes from 'prop-types';

function TravellerCounter({ count, setCount }) {
  // Function to increment the traveler count
  const increment = () => setCount(count + 1);

  // Function to decrement the traveler count, ensuring it doesn't go below 1
  const decrement = () => setCount(count > 1 ? count - 1 : 1);

  return (
    <div className="max-w-xs mb-4">
      <label htmlFor="quantity-input" className="block mb-2 text-sm font-medium text-gray-900">Number of Travellers</label>
      <div className="relative flex items-center max-w-[8rem]">
        <button
          type="button"
          id="decrement-button"
          onClick={decrement}
          className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11">
          <svg className="w-3 h-3 text-gray-900" aria-hidden="true" viewBox="0 0 18 2">
            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16" />
          </svg>
        </button>
        <div className="bg-gray-50 border-x-0 border-gray-300 h-11 text-center text-gray-900 text-sm w-full py-2.5">{count}</div>
        <button
          type="button"
          onClick={increment}
          id="increment-button"
          className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11">
          <svg className="w-3 h-3 text-gray-900" aria-hidden="true" viewBox="0 0 18 18">
            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16" />
          </svg>
        </button>
      </div>
    </div>
  );
}

TravellerCounter.propTypes = {
  count: PropTypes.number.isRequired, // Ensure count is a required number
  setCount: PropTypes.func.isRequired, // Ensure setCount is a required function
};

export default TravellerCounter;

This component renders a label and buttons to increment or decrement the traveler count. The decrement button ensures the count doesn't go below 1. The buttons use SVGs to represent plus and minus symbols. The component also uses PropTypes to enforce the types of its props.

7. Plan Page

src/pages/Plan.jsx

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import TravellerCounter from '../components/TravellerCounter';

function Plan() {
  const navigate = useNavigate();
  const [flyingFrom, setFlyingFrom] = useState('Shanghai');
  const [flyingTo, setFlyingTo] = useState('Tokyo');
  const [fromDate, setFromDate] = useState(new Date());
  const [toDate, setToDate] = useState(new Date(new Date().setDate(new Date().getDate() + 4)));
  const [budget, setBudget] = useState(1000);
  const [travelers, setTravelers] = useState(1);
  const [errors, setErrors] = useState({ flyingFrom: '', flyingTo: '', fromDate: '', toDate: '', budget: '' });

  // Validate city name using a regex that only allows letters and spaces
  const validateCity = (city) => /^[a-zA-Z\\s]+$/.test(city);
  // Validate budget to ensure it's a positive number
  const validateBudget = (budget) => !isNaN(budget) && budget > 0;

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    const isValidFlyingFrom = validateCity(flyingFrom);
    const isValidFlyingTo = validateCity(flyingTo);
    const isValidBudget = validateBudget(budget);
    const isValidDates = fromDate <= toDate;

    if (isValidFlyingFrom && isValidFlyingTo && isValidBudget && isValidDates) {
      // Navigate to the suggestion page with the form data
      navigate('/suggestion', {
        state: { flyingFrom, flyingTo, fromDate, toDate, budget, travelers }
      });
    } else {
      // Set error messages for invalid inputs
      setErrors({
        flyingFrom: isValidFlyingFrom ? '' : 'Invalid city name',
        flyingTo: isValidFlyingTo ? '' : 'Invalid city name',
        fromDate: isValidDates ? '' : 'From Date should be less than or equal to To Date',
        toDate: isValidDates ? '' : 'To Date should be greater than or equal to From Date',
        budget: isValidBudget ? '' : 'Invalid budget amount',
      });
    }
  };

  return (
    <div className="flex flex-col items-center py-8 mx-auto max-w-md">
      <h1 className="mb-4 text-2xl font-bold text-center">Travel Agent</h1>
      <form className="w-full" onSubmit={handleSubmit} noValidate>
        <TravellerCounter count={travelers} setCount={setTravelers} />
        <div className="mb-4">
          <label className="block mb-1 text-gray-700">Flying from</label>
          <input
            type="text"
            value={flyingFrom}
            onChange={(e) => setFlyingFrom(e.target.value)}
            className="w-full px-3 py-2 border rounded-md"
          />
          {errors.flyingFrom && <p className="mt-1 text-red-500">{errors.flyingFrom}</p>}
        </div>
        <div className="mb-4">
          <label className="block mb-1 text-gray-700">Flying to</label>
          <input
            type="text"
            value={flyingTo}
            onChange={(e) => setFlyingTo(e.target.value)}
            className="w-full px-3 py-2 border rounded-md"
          />
          {errors.flyingTo && <p className="mt-1 text-red-500">{errors.flyingTo}</p>}
        </div>
        <div className="mb-4">
          <label className="block mb-1 text-gray-700">From Date</label>
          <DatePicker selected={fromDate} onChange={(date) => setFromDate(date)} className="w-full px-3 py-2 border rounded-md" />
          {errors.fromDate && <p className="mt-1 text-red-500">{errors.fromDate}</p>}
        </div>
        <div className="mb-4">
          <label className="block mb-1 text-gray-700">To Date</label>
          <DatePicker selected={toDate} onChange={(date) => setToDate(date)} className="w-full px-3 py-2 border rounded-md" />
          {errors.toDate && <p className="mt-1 text-red-500">{errors.toDate}</p>}
        </div>
        <div className="mb-4">
          <label className="block mb-1 text-gray-700">Budget ($)</label>
          <input
            type="number"
            value={budget}
            onChange={(e) => setBudget(e.target.value)}
            className="w-full px-3 py-2 border rounded-md"
          />
          {errors.budget && <p className="mt-1 text-red-500">{errors.budget}</p>}
        </div>
        <button type="submit" className

="w-full px-4 py-2 text-white bg-green-500 rounded-md hover:bg-green-700">
          Plan my Trip!
        </button>
      </form>
    </div>
  );
}

export default Plan;

This code defines the Plan component, which includes:

State hooks to manage input values (flyingFrom, flyingTo, fromDate, toDate, budget, and travelers).
Validation functions to ensure that city names are valid and budgets are positive numbers.
An handleSubmit function that validates the form inputs and navigates to the Suggestion page with the form data if all inputs are valid. If not, it sets appropriate error messages.
The JSX structure of the form, including input fields and a TravellerCounter component for managing the number of travelers.

8. Suggestion Page

src/pages/Suggestion.jsx

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { format } from 'date-fns';
import { client } from '../utils/openai';
import { tools } from '../utils/tools';

const messages = [
  {
    role: "system", content: `
      You are a helpful AI agent. Transform technical data into engaging,
      conversational responses, but only include the normal information a
      regular person might want unless they explicitly ask for more. Provide
      highly specific answers based on the information you're given. Prefer
      to gather information with the tools provided to you rather than
      giving basic, generic answers.
      `
  },
];

function Suggestion() {
  const location = useLocation(); // Get the location object from react-router
  const { state } = location; // Extract state from the location object
  const { flyingFrom, flyingTo, fromDate, toDate, budget, travelers } = state || {}; // Destructure state properties

  // State variables to store API responses
  const [weather, setWeather] = useState('');
  const [hotel, setHotel] = useState('');
  const [flights, setFlights] = useState('');
  const [loading, setLoading] = useState({ weather: true, flights: true, hotel: true }); // Loading states for each data type

  useEffect(() => {
    if (!state) {
      return; // Early return if state is missing
    }

    if (!flyingFrom || !flyingTo) {
      return; // Early return if essential data is missing
    }

    // Fetch weather information
    const fetchWeather = async () => {
      try {
        const weatherMessages = [
          ...messages,
          { role: "user", content: `Get the weather for ${flyingTo}` }
        ];
        const weatherRunner = client.beta.chat.completions.runTools({
          model: "gpt-4-1106-preview",
          messages: weatherMessages,
          tools
        }).on("message", (message) => console.log(message));
        const weatherContent = await weatherRunner.finalContent();
        setWeather(weatherContent); // Set weather state
      } catch (err) {
        console.error(err);
        setWeather('Failed to fetch weather'); // Handle error
      } finally {
        setLoading(prev => ({ ...prev, weather: false })); // Set loading state to false
      }
    };

    // Fetch flight information
    const fetchFlights = async () => {
      try {
        const flightMessages = [
          { role: "system", content: `You are a helpful agent.` },
          { role: "user", content: `I need flight options from ${flyingFrom} to ${flyingTo}.` }
        ];
        const response = await client.chat.completions.create({
          model: "gpt-4-1106-preview",
          messages: flightMessages
        });
        const flightContent = response.choices[0].message.content;
        setFlights(flightContent); // Set flights state
      } catch (err) {
        console.error(err);
        setFlights('Failed to fetch flights'); // Handle error
      } finally {
        setLoading(prev => ({ ...prev, flights: false })); // Set loading state to false
      }
    };

    // Fetch hotel information
    const fetchHotels = async () => {
      try {
        const hotelMessages = [
          { role: "system", content: `You are a helpful agent.` },
          { role: "user", content: `I need hotel options in ${flyingTo} for ${travelers} travelers within a budget of ${budget} dollars.` }
        ];
        const response = await client.chat.completions.create({
          model: "gpt-4-1106-preview",
          messages: hotelMessages
        });
        const hotelContent = response.choices[0].message.content;
        setHotel(hotelContent); // Set hotel state
      } catch (err) {
        console.error(err);
        setHotel('Failed to fetch hotels'); // Handle error
      } finally {
        setLoading(prev => ({ ...prev, hotel: false })); // Set loading state to false
      }
    };

    fetchWeather();
    fetchFlights();
    fetchHotels();

  }, [state, flyingFrom, flyingTo, travelers, budget]); // Dependencies for useEffect

  if (!state) {
    return <div>Error: Missing state</div>; // Error message if state is missing
  }

  return (
    <div className="flex flex-col items-center py-8 mx-auto max-w-md">
      <h1 className="mb-4 text-2xl font-bold text-center">Your Trip</h1>
      <div className="flex justify-between w-full mb-4">
        <div className="px-3 py-2 text-white bg-green-500 rounded-md">→ {format(new Date(fromDate), 'dd MMM yyyy')}</div>
        <div className="px-3 py-2 text-white bg-green-500 rounded-md">{format(new Date(toDate), 'dd MMM yyyy')} ←</div>
      </div>
      <div className="w-full p-4 mb-4 border rounded-md">
        <h2 className="text-xl font-bold">{flyingFrom} → {flyingTo}</h2>
      </div>
      <div className="w-full p-4 mb-4 border rounded-md">
        <h2 className="mb-2 text-xl font-bold">Weather</h2>
        <p>{loading.weather ? 'Fetching weather...' : weather}</p> {/* Display weather or loading message */}
      </div>
      <div className="w-full p-4 mb-4 border rounded-md">
        <h2 className="mb-2 text-xl font-bold">Flights</h2>
        <p>{loading.flights ? 'Fetching flights...' : flights}</p> {/* Display flights or loading message */}
      </div>
      <div className="w-full p-4 mb-4 border rounded-md">
        <h2 className="mb-2 text-xl font-bold">Hotel</h2>
        <p>{loading.hotel ? 'Fetching hotels...' : hotel}</p> {/* Display hotels or loading message */}
      </div>
    </div>
  );
}

export default Suggestion;

The Suggestion component:

Uses the useLocation hook from react-router-dom to access the state passed from the Plan page.
Initializes state variables to store weather, flight, and hotel information, as well as loading states for each.
Uses the useEffect hook to fetch weather, flight, and hotel information when the component mounts or when any dependency changes.
Fetches data using the OpenAI API and sets the state with the fetched data.
Renders the trip details, weather, flight, and hotel information. If the data is still being fetched, it shows a loading message.

Please refer to the documentation for detailed usage instructions for the runTools feature.

9. OpenAI Client Configuration

src/utils/openai.js

import OpenAI from "openai";

const openAIApiKey = import.meta.env.VITE_OPENAI_API_KEY; // Import OpenAI API key from environment variables
const openAIUrl = import.meta.env.VITE_OPENAI_BASE_URL; // Import OpenAI base URL from environment variables

export const client = new OpenAI({
  apiKey: openAIApiKey,
  baseURL: openAIUrl,
  dangerouslyAllowBrowser: true,
});

This code configures the OpenAI client using the API key and base URL from environment variables. The client is exported for use in other parts of the application.

10. Tools Configuration

src/utils/tools.js

import { getWeather } from './weather';

export const tools = [
  {
    type: 'function',
    function: {
      function: getWeather,
      parse: JSON.parse,
      parameters: {
        type: 'object',
        properties: {
          city: { type: 'string' },
        },
        required: ['city']
      },
    },
  }
];

This code defines a tools configuration that includes a weather-fetching function. The getWeather function is imported from the weather.js module. The tool configuration specifies the expected input parameters and how to parse them.

11. Weather Utility

src/utils/weather.js

You need to create an API Key on the openweathermap.

const weatherAIApiKey = import.meta.env.VITE_WEATHER_API_KEY; // Import weather API key from environment variables

export async function getWeather({ city }) {
  try {
    const endpoint = `http://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${weatherAIApiKey}&units=

metric`;
    const response = await fetch(endpoint);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status} ${response.statusText}`);
    }
    const data = await response.json();
    const weatherReport = displayWeather(data);
    return { report: weatherReport };
  } catch (error) {
    console.error('Error fetching weather data:', error.message);
    throw error;
  }
}

export function displayWeather(data) {
  const targetTime = '12:00:00'; // Specific time to extract the weather data
  const dailyData = data.list.filter(entry => entry.dt_txt.includes(targetTime));

  return dailyData.slice(0, 5).map(entry => {
    const date = entry.dt_txt.split(' ')[0];
    const description = entry.weather[0].description;
    const temp_min = entry.main.temp_min;
    const temp_max = entry.main.temp_max;
    return `Date: ${date}, Weather: ${description}, Temperature: Min ${temp_min}°C, Max ${temp_max}°C`;
  }).join('\\n');
}

This module defines two functions: getWeather and displayWeather.

getWeather: Fetches weather data from the OpenWeatherMap API using the provided city name. It processes the API response and extracts relevant weather information.
displayWeather: Filters and formats the weather data for a specific time of the day (12:00:00) and returns a string with weather details for the next five days.

12. Running the Application

Start the Development Server:
```
npm run dev
```
Access the Application:
Open your browser and navigate to http://localhost:5173.

Congratulations! You have successfully built a travel agent application using Vite and TailwindCSS. This guide should help you understand the basic structure and functionalities implemented in this project.

Conclusion

In this tutorial, we've built a travel agent using OpenAI API that simplifies the process of planning a trip by providing personalized suggestions. This agent fetches flight options, hotel recommendations, and weather forecasts based on user inputs.