How to Build Your First AI App Using LangChain Framework

The world is buzzing with AI, and for good reason. Large Language Models (LLMs) like OpenAI's GPT series have unlocked capabilities that were once science fiction. But how do you go from using a tool like ChatGPT to building your own custom AI-powered application? The answer, for a rapidly growing community of developers, is LangChain.

If you've ever wanted to build an app that can summarize articles, answer questions about your company's documents, or power an intelligent chatbot, you're in the right place.

How to Build Your First AI App Using LangChain Framework

How to Build Your First AI App Using LangChain Framework

This guide will walk you through the entire process of building your very first AI application using the LangChain framework. We'll start with the absolute basics and end with a functional web app, making this a perfect starting point whether you're a coding novice or a seasoned professional looking to add AI to your skillset.

What is LangChain? (And Why Should You Care?) 

Think of an LLM as a brilliant, incredibly powerful brain in a jar. It knows a vast amount about the world, but it can't interact with it. It can't browse the web, read your specific files, or access a database. LangChain is the nervous system, the arms, and the legs that connect that brain to the real world.

At its core, LangChain is an open-source framework designed to simplify the creation of applications using LLMs. It provides a set of modular building blocks and tools that allow you to "chain" together an LLM with other components, like your own data, APIs, and other computational resources.

Why is it a Game-Changer?

  1. Data-Awareness: LangChain lets your application connect to your personal or proprietary data sources. This allows you to build a bot that can answer questions about a specific PDF, a legal document, or your company's internal knowledge base.
  2. Modularity: It provides reusable components like Prompts, Chains, and Agents that make your code cleaner, more manageable, and easier to reason about. Instead of writing messy, complex prompts, you create structured templates.
  3. Agency: You can build "agents" that use the LLM to decide which actions to take. For example, an agent could decide it needs to perform a Google search, use a calculator, or query a database to find the answer to a user's question.
  4. Extensibility: It integrates with dozens of LLM providers, data stores, and tools, giving you the flexibility to swap components as needed.

In short, LangChain provides the essential plumbing to build sophisticated, real-world AI applications quickly and efficiently.

Prerequisites: Setting Up Your Development Environment 

Before we start building, let's get our tools in order. The setup is straightforward and should only take a few minutes.

What You'll Need:

  • Python 3.8 or newer: LangChain is a Python framework. If you don't have Python installed, you can download it from the official Python website.
  • An IDE (Integrated Development Environment): We recommend using a modern code editor like Visual Studio Code, which is free and has excellent Python support.
  • An OpenAI API Key: To use powerful models like GPT-3.5 or GPT-4, you'll need an API key from OpenAI. You can get one by creating an account on the OpenAI PlatformNote: Using the API incurs small costs, but they are very low for development purposes.

Installation Steps:

  1. Create a Project Folder: Create a new folder for your project on your computer. Let's call it langchain_app. Open this folder in VS Code.
  2. Install Required Libraries: We need a few Python libraries. Open a terminal in VS Code (Terminal > New Terminal) and run the following command:
  3. Bash

Copy Code

pip install langchain openai python-dotenv streamlit
  1.  
    • langchain: The core framework.
    • openai: The Python client for interacting with the OpenAI API.
    • python-dotenv: A handy utility to manage secret keys (like our API key) securely.
    • streamlit: An amazing library for creating simple web UIs directly from Python scripts.
  2. Secure Your API Key: Never hardcode your API key directly in your script. It's a major security risk. Instead, we'll use a .env file.
    • In your langchain_app folder, create a new file named .env.
    • Inside this file, add the following line, replacing YOUR_OPENAI_API_KEY with your actual key:

OPENAI_API_KEY="YOUR_OPENAI_API_KEY"

  •  
  •  
  • Save the file. Your Python script will now be able to read this key without exposing it in the code.

With our environment ready, let's dive into the fun part: building the application.

Building Our First AI App: A Simple Q&A Bot 

Our goal is to create a simple web application where a user can paste a block of text (like an article or a report) and then ask questions about it. The AI will read the text and provide an answer based only on the information given.

Step 1: The Core Logic - Understanding Chains

The most fundamental concept in LangChain is the Chain. A chain, in its simplest form, takes an input, passes it through a series of steps, and produces an output. The most basic and common type of chain is the LLMChain.

An LLMChain requires two things:

  1. An LLM Instance: The language model that will do the thinking (e.g., OpenAI's GPT-3.5).
  2. Prompt Template: A blueprint for the prompt we will send to the LLM. This allows us to insert user input into a predefined structure.

Let's build this core logic first. Create a new file named app.py in your project folder.

Step 2: Setting up the LLM and Prompt

First, we need to import the necessary modules and load our API key. Add the following code to the top of app.py:

Python

Copy Code

import os

from dotenv import load_dotenv

from langchain.llms import OpenAI

from langchain.prompts import PromptTemplate

from langchain.chains import LLMChain



# Load environment variables from .env file

load_dotenv()



# We don't need to manually set the key as LangChain will find it.

# os.environ["OPENAI_API_KEY"] = os.getenv("OPENAI_API_KEY")



# Initialize the LLM

llm = OpenAI(temperature=0.7)

Here, temperature=0.7 controls the "creativity" of the model. A value of 0 is very deterministic, while a value of 1 is highly creative. 0.7 is a good balance for factual tasks.

Next, let's define our prompt template. The template is a string that contains placeholders (in curly braces {}) for the variables we'll provide later.

Copy Code

Python

# Create our prompt template

prompt_template = PromptTemplate(

    input_variables=['context', 'question'],

    template="""You are an expert at answering questions based on a given context.

    Please answer the following question based only on the text provided below.

    If the answer is not in the text, say 'The answer is not available in the provided context.'



    Context:

    {context}



    Question:

    {question}



    Answer:

    """

)

This is a powerful technique. By instructing the model on its role ("You are an expert...") and setting clear rules ("based only on the text..."), we guide it to produce much more accurate and relevant results. This process is called Prompt Engineering.

Step 3: Creating and Running the LLMChain

Now, let's combine our LLM and prompt template into an LLMChain and test it.

Copy Code

Python

# Create the LLMChain

chain = LLMChain(llm=llm, prompt=prompt_template)



# Let's define a sample context and question to test our chain

sample_context = """

The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. 

It is named after the engineer Gustave Eiffel, whose company designed and built the tower. 

Constructed from 1887 to 1889 as the centerpiece of the 1889 World's Fair, it was initially 

criticized by some of France's leading artists and intellectuals for its design, but it has 

become a global cultural icon of France and one of the most recognizable structures in the world.

"""

sample_question = "Who is the Eiffel Tower named after?"



# Run the chain with our sample data

response = chain.run(context=sample_context, question=sample_question)



# Print the response

print(response)

If you run this script in your terminal (python app.py), you should see the correct answer printed: "The Eiffel Tower is named after the engineer Gustave Eiffel."

Success! Our core AI logic is working perfectly. But running it from a terminal isn't very user-friendly. Let's wrap it in a web interface.

From Script to App: Building a UI with Streamlit 

This is where Streamlit comes in. It lets us turn data scripts into shareable web apps in minutes, using only Python. We'll use it to create a simple and clean interface for our Q&A bot.

Replace all the code in app.py with the following. Don't worry, we'll break it down.

Copy Code

Python

import os

import streamlit as st

from dotenv import load_dotenv

from langchain.llms import OpenAI

from langchain.prompts import PromptTemplate

from langchain.chains import LLMChain



# Load environment variables from .env file

load_dotenv()



# --- LANGCHAIN SETUP ---



# Initialize the LLM

llm = OpenAI(temperature=0.7)



# Create our prompt template

prompt_template = PromptTemplate(

    input_variables=['context', 'question'],

    template="""You are an expert at answering questions based on a given context.

    Please answer the following question based only on the text provided below.

    If the answer is not in the text, say 'The answer is not available in the provided context.'



    Context:

    {context}



    Question:

    {question}



    Answer:

    """

)

# Create the LLMChain

Copy Code

chain = LLMChain(llm=llm, prompt=prompt_template)

# --- STREAMLIT APP ---

Copy Code

st.title("📄 Context-Aware Q&A Bot")

st.write("Paste your document/text below and ask a question about it.")

# Input for context

Copy Code

context_input = st.text_area("Enter the context text here:", height=200)

# Input for the question

Copy Code

question_input = st.text_input("Ask your question here:")

# Button to trigger the response

Copy Code

if st.button("Get Answer"):

    if context_input and question_input:

        with st.spinner("Finding the answer..."):

            # Run the chain with the user's inputs

            response = chain.run(context=context_input, question=question_input)

            st.success("Here is the answer:")

            st.write(response)

    else:

        st.warning("Please provide both context and a question.")

Breaking Down the Streamlit Code:

  • st.title(...) and st.write(...): These functions simply display text on the webpage.
  • st.text_area(...): This creates a large text box where the user can paste their document. We store the content in the context_input variable.
  • st.text_input(...): This creates a single-line input field for the user's question, stored in question_input.
  • st.button(...): This creates a button. The code inside the if block only runs when the button is clicked.
  • with st.spinner(...): This displays a nice loading animation while the LLM is processing the request, improving the user experience.
  • st.success(...) and st.write(response): Once we have the response from our LangChain chain, we display it in a green box.
  • st.warning(...): We add a simple check to ensure the user has filled in both fields before clicking the button.

Running Your Web App

To launch the app, go to your terminal and run:

Copy Code

Bash

streamlit run app.py

Your web browser should automatically open a new tab with your application running. Congratulations, you've just built and deployed your first full-stack AI application!

Beyond the Basics: Where to Go From Here?

You've taken the first crucial step, but this is just the beginning of what's possible with LangChain.

For Beginners:

The real power of LangChain shines when you work with large documents. Manually pasting text isn't scalable. The next step is to explore RetrievalQA chains, which can connect to a database of your documents (like a folder of PDFs or a website's text) and automatically find the relevant snippets of information to answer a question. You can also explore adding Memory to your chains to build chatbots that remember previous parts of the conversation.

If you're excited by this and want to dive deeper into these advanced concepts, mastering the fundamentals is key. A structured learning path like the Full Stack Development course at Uncodemy can provide a solid foundation in Python and web technologies that are essential for building robust AI applications.

For Professionals:

For those ready to build production-grade systems, the journey leads to LangChain Agents. An agent is a more advanced system that uses an LLM not just to answer, but to reason about what tools to use. For example, if a user asks "What's the weather in London and what is the square root of 529?", an agent can decide to use a weather API for the first part and a calculator for the second.

Furthermore, as you deploy applications, you'll need robust tools for monitoring and debugging. This is where LangSmith comes in, providing invaluable tracing and observability for your LangChain applications. For deployment, LangServe makes it easy to expose any chain as a REST API.

Building production-ready AI systems requires a blend of AI knowledge and solid software engineering principles, a combination emphasized in advanced programs available through Uncodemy's specialized tech courses.

Conclusion

Today, you've done more than just write some code. You've learned the fundamental principles of building LLM-powered applications, set up a professional development environment, and built a functional, interactive Q&A bot from scratch. You've seen how LangChain acts as a powerful orchestrator, connecting the intelligence of an LLM with your specific goals, and how Streamlit can instantly bring that logic to life with a clean user interface.

The journey into AI development is one of the most exciting frontiers in technology today. The tools are more accessible than ever, and the potential for innovation is limitless. Take what you've learned here, start experimenting, and see what amazing applications you can create. Happy building!

Placed Students

Our Clients

Partners

...

Uncodemy Learning Platform

Uncodemy Free Premium Features

Popular Courses