Mastering LangChain.js Prompt Templates: A Beginner's Guide for Frontend Developers

?? What if you could customize AI responses dynamically in your React app? Instead of sending hardcoded prompts to OpenAI, LangChain.js Prompt Templates let you insert variables into prompts, making AI responses adaptable and reusable.

Today, we’re upgrading our Joke Generator to use Prompt Templates—allowing users to select a joke topic and style dynamically! ??

Code can be cloned from:

https://github.com/ranyelhousieny/LangChain_React/tree/The-Jocker

git clone -b The-Jocker https://github.com/ranyelhousieny/LangChain_React.git        

What Are LangChain.js Prompt Templates?

Prompt Templates in LangChain.js allow developers to:

? Create reusable prompt structures instead of hardcoding text.

? Insert dynamic variables like {style} and {topic} into prompts.

? Maintain consistency across different AI interactions.

? Separate logic from content, keeping the app cleaner and more maintainable.

Think of it like a fill-in-the-blanks template where users decide what goes in!

Example of a Prompt Template

const promptTemplate = ChatPromptTemplate.fromMessages([
  ["system", "You are a comedian specialized in {style}. Keep jokes clean and family-friendly."],
  ["user", "Tell me a {style} about {topic}. Make it short and punchy."]
]);
        

• {style} → Defines the joke type (e.g., Dad Joke, Pun, One-Liner).
• {topic} → Defines what the joke should be about (e.g., Programming, Food, Animals).

Here is the final Output:

Styles:

Topics:

How We Implemented Prompt Templates in React

In our updated LangChain.js Joke Generator, we:

1?? Let users select a topic and joke style using dropdowns.

2?? Use a Prompt Template instead of a static prompt.

3?? Dynamically insert the user’s choices into the prompt.

How It Works in Code

1?? Users Select Joke Topic and Style

We added two dropdown menus in React for users to select:

• Topic (Programming, Food, Animals, Sports)
• Style (Dad Joke, Pun, One-Liner, Knock-Knock)

<FormControl fullWidth>
  <InputLabel>Topic</InputLabel>
  <Select value={topic} onChange={handleTopicChange}>
    <MenuItem value="programming">Programming</MenuItem>
    <MenuItem value="food">Food</MenuItem>
    <MenuItem value="animals">Animals</MenuItem>
    <MenuItem value="sports">Sports</MenuItem>
  </Select>
</FormControl>

<FormControl fullWidth>
  <InputLabel>Style</InputLabel>
  <Select value={style} onChange={handleStyleChange}>
    <MenuItem value="dad-joke">Dad Joke</MenuItem>
    <MenuItem value="pun">Pun</MenuItem>
    <MenuItem value="one-liner">One-liner</MenuItem>
    <MenuItem value="knock-knock">Knock-knock</MenuItem>
  </Select>
</FormControl>
        

• When users select an option, it updates the topic and style states in React.

2?? Formatting the Prompt Dynamically

Instead of hardcoding the prompt, we use a Prompt Template:

const promptTemplate = ChatPromptTemplate.fromMessages([
  ["system", "You are a comedian specialized in {style}. Keep jokes clean and family-friendly."],
  ["user", "Tell me a {style} about {topic}. Make it short and punchy."]
]);
        

• The {style} and {topic} act as placeholders that we will dynamically fill in.

3?? Sending the Customized Prompt to OpenAI

const formattedPrompt = await promptTemplate.formatMessages({
  style: style,
  topic: topic
});

const response = await model.invoke(formattedPrompt);
setJoke(response.content);
        

?? How it works:

1. formatMessages({ style, topic }) replaces placeholders {style} and {topic} with the user’s choices.
2. The formatted prompt is sent to OpenAI using model.invoke().
3. The AI generates a joke based on the selected style and topic.
4. The joke is displayed on the screen using setJoke(response.content).

Why This Is Powerful

?? Better user experience → Users control the AI output.

?? Reusability → Same template works for any combination of {style} and {topic}.

?? Scalability → Easily expand to support more topics and styles.

Instead of writing different prompts manually, we now have a dynamic, structured system!

Try It Out! ??

?? Full Code: https://github.com/ranyelhousieny/LangChain_React/tree/Prompt-Templates

git clone -b Prompt-Templates https://github.com/ranyelhousieny/LangChain_React.git        

What’s Next? In the next part, we’ll explore using LangChain memory to remember past interactions. Stay tuned! ??

?? What creative use cases do you see for Prompt Templates? Let’s discuss in the comments!

#AI #LangChain #OpenAI #PromptEngineering #ReactJS #MachineLearning #LLMs