LLM API From JavaScript integration is an important skill for developers who want to build modern AI-powered applications.

Large language models, commonly called LLMs, can understand and generate natural language. They can be used for chatbots, content generation, summarization, question answering, document analysis, coding assistants, customer support, and many other applications.

Instead of training and hosting a large AI model yourself, you can connect your JavaScript application to an existing model through an API.

In this tutorial, we will learn how to call an LLM API from JavaScript step by step. We will create a JavaScript project, install an official SDK, configure an API key, send a prompt to an LLM, receive the generated response, handle errors, and learn how to connect the integration to a web application.

This guide is written for freshers and assumes only basic JavaScript knowledge.

The basic architecture is:

JavaScript Application → LLM API → AI Model → Generated Response → JavaScript Application

The official OpenAI JavaScript/TypeScript SDK provides a convenient way to access the OpenAI API from JavaScript and TypeScript. Its current documentation uses the Responses API as the primary API for interacting with models.

By the end of this tutorial, you will understand how an LLM API From JavaScript works and how to use the same approach in chatbots, content generators, summarizers, and other AI applications.

What Is an LLM API?

Before learning how to call an LLM API From JavaScript, let’s understand what an LLM API means.

LLM stands for Large Language Model.

An LLM is an artificial intelligence model designed to process and generate language.

LLMs can perform tasks such as:

Answering questions
Generating text
Summarizing content
Rewriting text
Extracting information
Classifying text
Generating code
Explaining programming concepts
Powering conversational applications

An API provides a communication layer between your application and the AI model.

Instead of running the model yourself, your JavaScript application sends a request:

User Input
    ↓
JavaScript Application
    ↓
LLM API
    ↓
AI Model
    ↓
Generated Response
    ↓
JavaScript Application

This makes an LLM API From JavaScript approach practical for developers who want to add AI capabilities without building their own model infrastructure.

Why Use JavaScript for an LLM API?

JavaScript is one of the most widely used programming languages for web development.

It can run in:

Web browsers
Node.js
Serverless functions
Edge runtimes
Backend applications
Frameworks such as Next.js

This makes JavaScript particularly useful for AI applications.

For example:

React Frontend
      ↓
JavaScript / Node.js Backend
      ↓
LLM API
      ↓
AI Model

You can therefore use JavaScript throughout much of your application stack.

The official OpenAI Node SDK supports JavaScript/TypeScript applications and multiple server-side runtimes.

Important: Browser JavaScript vs. Server-Side JavaScript

This is one of the most important concepts when learning LLM API From JavaScript integration.

There are two common environments:

Browser JavaScript

This runs inside the user’s browser.

Examples:

script.js
React frontend
Vue frontend
Angular frontend

Server-Side JavaScript

This runs on your server.

Examples:

Node.js
Next.js server code
Serverless functions

For applications using private API credentials, the recommended architecture is:

Browser
   ↓
Your Backend
   ↓
LLM API

Do not expose a private API key in frontend JavaScript.

The official OpenAI JavaScript SDK disables browser use by default because putting a secret API key in client-side code can expose the credential to users.

How Does an LLM API From JavaScript Work?

A typical LLM API From JavaScript integration has these steps:

1. Create an API Key

Your application needs credentials to access the AI service.

2. Install the SDK

Install the provider’s JavaScript library.

3. Store the API Key

Keep the secret in an environment variable.

4. Create the Client

Initialize the SDK using the API key.

5. Send a Prompt

JavaScript sends input to the model.

6. Receive the Response

The API returns the model’s output.

7. Display or Process the Result

Your application can show, save, or further process the response.

The workflow is:

JavaScript
    ↓
Authentication
    ↓
API Request
    ↓
LLM
    ↓
API Response
    ↓
JavaScript

This is the basic pattern behind an LLM API From JavaScript application.

Technologies Required

For this tutorial, we will use:

JavaScript

JavaScript will handle the application logic.

Node.js

Node.js provides a server-side JavaScript environment.

npm

npm manages our JavaScript dependencies.

OpenAI JavaScript SDK

The official SDK provides a convenient interface for calling the OpenAI API. The SDK can be installed with npm install openai.

dotenv

This package can load environment variables from a .env file during local development.

Step 1: Install Node.js

First, make sure Node.js is installed.

Open Command Prompt or Terminal:

node --version

Then check npm:

npm --version

If both commands return version numbers, your environment is ready.

The current OpenAI JavaScript SDK documentation lists supported Node.js versions and runtimes; check the SDK’s current requirements when starting a new project.

Step 2: Create a JavaScript Project

Create a new project:

mkdir llm-javascript-app
cd llm-javascript-app

Initialize npm:

npm init -y

This creates:

package.json

Your project initially looks like:

llm-javascript-app/
│
└── package.json

Step 3: Install the OpenAI JavaScript SDK

Install the official SDK:

npm install openai

For local environment-variable management, install dotenv:

npm install dotenv

The official SDK repository provides the current installation command and JavaScript examples.

Your project now contains the packages needed for a basic LLM API From JavaScript integration.

Step 4: Create an API Key

You need an API key to authenticate requests to the AI service.

Create your API key through the provider’s developer platform.

Then create:

.env

Add:

OPENAI_API_KEY=your_api_key_here

Replace the placeholder with your actual API key.

Important Security Rule

Never put a private API key inside:

index.html
script.js
React components

For example, do not write:

const apiKey = "your-secret-api-key";

Anyone who can access the frontend can potentially inspect client-side code.

Instead:

Browser
   ↓
Backend
   ↓
LLM API

The secret remains on the server.

The official SDK explicitly warns that browser usage can expose secret credentials and therefore browser support is disabled by default.

Step 5: Protect the `.env` File

Create:

.gitignore

Add:

node_modules/
.env

This prevents your API key from accidentally being committed to Git.

Your project should now look like:

llm-javascript-app/
│
├── node_modules/
├── .env
├── .gitignore
├── package-lock.json
└── package.json

This is an important security step for every LLM API From JavaScript project.

Step 6: Create Your First JavaScript File

Create:

index.js

Add:

require("dotenv").config();

const OpenAI = require("openai");

const client = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY
});

async function main() {

    const response =
        await client.responses.create({
            model: "gpt-5.5",
            input:
                "Explain artificial intelligence in simple words."
        });

    console.log(
        response.output_text
    );
}

main();

This is the basic code required to make an LLM API From JavaScript request using Node.js.

The current official SDK examples use client.responses.create() and read generated text using response.output_text.

Step 7: Understand the JavaScript Code

Let’s understand each section.

Load Environment Variables

require("dotenv").config();

This loads values from .env.

Import the SDK

const OpenAI = require("openai");

This imports the OpenAI JavaScript library.

Create the Client

const client = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY
});

The API key comes from the environment variable.

Send the Request

const response =
    await client.responses.create({
        model: "gpt-5.5",
        input:
            "Explain artificial intelligence in simple words."
    });

The request specifies:

The model
The input

Read the Response

console.log(
    response.output_text
);

This prints the generated text.

The official SDK documentation uses this same Responses API pattern.

Step 8: Run the Application

Run:

node index.js

If everything is configured correctly, the terminal will display a response from the AI model.

For example:

Artificial intelligence is technology that allows
computers to perform tasks that normally require
human intelligence...

The exact response will vary.

Congratulations! You have successfully called an LLM API From JavaScript.

Understanding the LLM API Request

The most important part of the application is:

const response =
    await client.responses.create({
        model: "gpt-5.5",
        input: "Explain AI."
    });

Let’s understand the two main parameters.

Model

model: "gpt-5.5"

The model determines which AI model processes your request.

Model selection depends on:

Quality requirements
Speed
Cost
Context needs
Availability
Application type

Model names and availability can change, so check the provider’s current model documentation before deploying an application.

Input

input: "Explain AI."

This is the content or instruction you send to the model.

You can store it in a variable:

const prompt =
    "Write a short product description.";

Then:

const response =
    await client.responses.create({
        model: "gpt-5.5",
        input: prompt
    });

This makes the LLM API From JavaScript integration dynamic.

Step 9: Accept Dynamic User Input

Hardcoded prompts are useful for testing, but real applications need dynamic input.

For example:

const prompt =
    process.argv.slice(2).join(" ");

if (!prompt) {

    console.log(
        "Please enter a prompt."
    );

    process.exit(1);
}

const response =
    await client.responses.create({
        model: "gpt-5.5",
        input: prompt
    });

console.log(
    response.output_text
);

Now run:

node index.js "Explain machine learning for a beginner"

The user’s prompt is sent to the LLM.

This is a simple example of a dynamic LLM API From JavaScript application.

Step 10: Create an Express Backend

A real web application usually needs a backend endpoint.

Install Express:

npm install express

Create:

server.js

Add:

require("dotenv").config();

const express = require("express");
const OpenAI = require("openai");

const app = express();

app.use(express.json());

const client = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY
});


app.post("/generate", async (req, res) => {

    try {

        const prompt = req.body.prompt;

        if (
            typeof prompt !== "string" ||
            !prompt.trim()
        ) {

            return res.status(400).json({
                error:
                    "A valid prompt is required."
            });
        }

        const response =
            await client.responses.create({
                model: "gpt-5.5",
                input: prompt
            });

        res.json({
            text: response.output_text
        });

    } catch (error) {

        console.error(error);

        res.status(500).json({
            error:
                "Unable to generate a response."
        });
    }
});


app.listen(3000, () => {

    console.log(
        "Server running on http://localhost:3000"
    );

});

Now you have a reusable backend for your LLM API From JavaScript integration.

Step 11: Test the Express API

Start the server:

node server.js

The server runs at:

http://localhost:3000

Send a POST request to:

/generate

with:

{
    "prompt": "Write a short paragraph about artificial intelligence."
}

The server returns:

{
    "text": "Artificial intelligence is..."
}

Now another application can communicate with your Node.js backend without accessing your private API key.

How a Web App Uses an LLM API From JavaScript

The typical architecture becomes:

Web Browser
     ↓
JavaScript / React
     ↓
Node.js Backend
     ↓
LLM API
     ↓
AI Model
     ↓
Node.js Backend
     ↓
Web Browser

For example, frontend JavaScript can send:

const response = await fetch(
    "/generate",
    {
        method: "POST",

        headers: {
            "Content-Type":
                "application/json"
        },

        body: JSON.stringify({
            prompt: userPrompt
        })
    }
);

Then:

const data =
    await response.json();

console.log(data.text);

This pattern is commonly used when adding AI features to websites.

LLM API From JavaScript for Chatbots

One of the most popular applications is an AI chatbot.

The architecture looks like:

User Message
     ↓
JavaScript Frontend
     ↓
Node.js Backend
     ↓
Conversation Context
     ↓
LLM API
     ↓
AI Response
     ↓
Frontend

The backend can maintain conversation state and send relevant context to the model.

For a production application, conversation state should be separated by user or session.

LLM API From JavaScript for Text Generation

You can also build content-generation applications.

For example:

const prompt = `
Write five social media captions
for a new coffee shop.
`;

Send it to the model:

const response =
    await client.responses.create({
        model: "gpt-5.5",
        input: prompt
    });

Then:

console.log(
    response.output_text
);

This can power:

Blog generators
Social media tools
Product-description generators
Email assistants
Marketing applications
Writing assistants

LLM API From JavaScript for Summarization

Another useful application is summarization.

For example:

const prompt = `
Summarize the following content
in five bullet points:

${articleText}
`;

The LLM can generate a shorter version of the content.

This can be used for:

Articles
Reports
Emails
Meeting notes
Research content
Documentation

LLM API From JavaScript for Structured Data

Sometimes you don’t want a long text response.

You may want the AI to return structured information.

For example:

{
    "name": "John",
    "category": "Sales",
    "priority": "High"
}

This can be useful for:

Data extraction
Lead classification
Document processing
Customer-support automation
Form processing
Business workflows

Modern LLM APIs can support structured outputs. Follow the provider’s current documentation for the exact schema and SDK syntax supported by your selected model.

This allows your LLM API From JavaScript application to integrate AI-generated information with traditional software.

Add System Instructions

You can make your application more consistent by giving the model instructions about its role.

For example:

const response =
    await client.responses.create({
        model: "gpt-5.5",

        instructions:
            "You are a beginner-friendly JavaScript tutor.",

        input:
            "Explain asynchronous JavaScript."
    });

The model can then follow the instruction when generating its response.

You could create specialized assistants such as:

JavaScript Tutor

You are a JavaScript tutor.
Explain concepts using simple examples.

Customer Support Assistant

You are a customer support assistant.
Be polite, concise, and professional.

Marketing Assistant

You are a digital marketing assistant.
Create concise and engaging marketing content.

This is a useful technique when building an LLM API From JavaScript application for a specific purpose.

Handle Errors in an LLM API From JavaScript

API calls can fail.

Common causes include:

Invalid API key
Network problems
Invalid requests
Rate limits
Server errors
Model availability
Input limits

Use try...catch:

try {

    const response =
        await client.responses.create({
            model: "gpt-5.5",
            input: prompt
        });

    console.log(
        response.output_text
    );

} catch (error) {

    console.error(
        "LLM request failed:",
        error
    );
}

The official OpenAI JavaScript SDK exposes specific API error types and status information, including authentication errors, rate-limit errors, and server errors.

For production applications, return safe error messages to users and keep detailed diagnostics in server-side logs.

Add Input Validation

Your backend should validate user input.

For example:

if (
    typeof prompt !== "string" ||
    !prompt.trim()
) {

    return res.status(400).json({
        error:
            "Prompt is required."
    });
}

You can also limit input length:

if (prompt.length > 10000) {

    return res.status(400).json({
        error:
            "Prompt is too long."
    });
}

The appropriate limit depends on your application’s requirements and the selected model.

Input validation helps make an LLM API From JavaScript application safer and easier to control.

Add Rate Limiting

A public AI endpoint can receive many requests.

Without controls, excessive usage can increase:

API costs
Server load
Latency
Abuse risk

A production architecture can look like:

User
 ↓
Authentication
 ↓
Rate Limiter
 ↓
Node.js
 ↓
LLM API

Rate limits can be based on:

User
IP address
API key
Subscription plan
Session

The exact implementation depends on your application.

Keep API Keys Secure

Security is one of the most important parts of an LLM API From JavaScript project.

Do

Store API keys in environment variables.
Keep secrets on the server.
Add .env to .gitignore.
Use authentication for private APIs.
Validate user input.
Add rate limiting.
Use HTTPS in production.

Do Not

Put secret keys in React components.
Put secret keys in script.js.
Commit .env to Git.
Send private API credentials to users.
Log secrets.

The official SDK specifically warns that enabling browser usage can expose secret credentials.

Understanding Tokens

LLMs process text using tokens.

A token may represent:

A complete word
Part of a word
Punctuation
Other text units

For example:

Artificial intelligence is useful.

is converted into a sequence of tokens before being processed by the model.

Tokens matter because they can affect:

Input size
Output size
Context limits
Processing requirements
API costs

As your LLM API From JavaScript application becomes more advanced, understanding token usage becomes increasingly important.

LLM API From JavaScript and Streaming

Normally, your application waits for the entire response:

Prompt
 ↓
Wait
 ↓
Complete Response
 ↓
Display

With streaming:

Prompt
 ↓
First Output
 ↓
More Output
 ↓
More Output
 ↓
Complete Response

Streaming can make chatbots and long-form AI applications feel faster.

The official JavaScript SDK supports streaming responses using Server-Sent Events (SSE).

A simplified example is:

const stream =
    await client.responses.create({
        model: "gpt-5.5",
        input:
            "Explain JavaScript in detail.",
        stream: true
    });

for await (
    const event of stream
) {

    console.log(event);
}

The exact events you handle depend on the response stream and application requirements.

LLM API From JavaScript and RAG

An LLM API From JavaScript can also be used to build Retrieval-Augmented Generation applications.

RAG combines:

Document retrieval
Embeddings
Vector databases
LLM generation

The architecture looks like:

User Question
      ↓
JavaScript Backend
      ↓
Search Knowledge Base
      ↓
Relevant Information
      ↓
LLM API
      ↓
Generated Answer

For example, you could build a chatbot that answers questions about:

Company documents
Product manuals
Course materials
Technical documentation
Internal knowledge

Related resources:

How to Create Embeddings With an LLM

How to Store Embeddings in a Vector Database

How to Create a Semantic Search Feature With Embeddings

How to Build a Simple RAG Application With Python

Common Mistakes When Calling an LLM API From JavaScript

Mistake 1: Exposing the API Key

Never put a secret API key into browser-side code.

Mistake 2: Hardcoding Credentials

Avoid:

apiKey: "my-secret-key"

Use environment variables instead.

Mistake 3: Ignoring Errors

Always handle failed requests.

Mistake 4: Accepting Unlimited Input

Set reasonable input limits.

Mistake 5: No Rate Limiting

Public endpoints need usage controls.

Mistake 6: Assuming AI Is Always Correct

LLMs can generate incorrect information.

Mistake 7: Ignoring Costs

Frequent requests and large inputs can increase usage.

Mistake 8: Sending Sensitive Information Unnecessarily

Only send information required for the task, and understand the data-handling policies of the service you use.

Avoiding these mistakes will make your LLM API From JavaScript application more reliable.

Real-World Applications of an LLM API From JavaScript

There are many ways to use an LLM API From JavaScript.

AI Chatbots

Build conversational assistants.

Content Generation

Generate articles, emails, captions, and descriptions.

Summarization

Create short versions of long documents.

Customer Support

Generate responses and assist support agents.

Data Extraction

Extract structured information from unstructured text.

AI Search

Combine search with LLM-generated answers.

Document Q&A

Allow users to ask questions about documents.

Coding Assistants

Generate explanations and coding suggestions.

Business Automation

Connect AI to existing software workflows.

How to Improve an LLM API From JavaScript Application

After building the basic integration, you can add:

Authentication

Require users to sign in.

Database

Store users, conversations, and generated content.

Streaming

Display output progressively.

RAG

Connect the model to external knowledge.

Structured Outputs

Return machine-readable results.

Caching

Reuse appropriate repeated results.

Monitoring

Track errors, latency, and usage.

Analytics

Understand how users interact with your AI features.

Background Processing

Move long-running AI tasks to background jobs.

These features can turn a simple LLM API From JavaScript experiment into a production AI application.

How to Test Your LLM API From JavaScript

Before deploying, test different scenarios.

Test 1: Simple Prompt

Explain JavaScript in simple words.

Test 2: Detailed Prompt

Explain asynchronous JavaScript with three examples.

Test 3: Empty Input

Make sure the API rejects empty prompts.

Test 4: Long Input

Test how your application handles larger content.

Test 5: Special Characters

Hello 😊! Explain AI.

Test 6: Multiple Requests

Send several requests and check server behavior.

Test 7: Invalid Credentials

Verify that authentication failures are handled safely.

Test 8: Rate Limits

Check how your application behaves when limits are reached.

Test 9: Different Models

Compare models based on your application’s actual requirements.

Best Practices for an LLM API From JavaScript

Follow these practices:

Keep API keys on the server.
Use environment variables.
Add .env to .gitignore.
Validate all incoming input.
Limit request sizes.
Add rate limiting.
Handle API errors gracefully.
Monitor usage and costs.
Protect sensitive information.
Use HTTPS in production.
Keep your SDK updated.
Test different prompts.
Use structured output when appropriate.
Add RAG when external knowledge is needed.
Review important AI-generated content.
Use separate sessions for multi-user applications.

Frequently Asked Questions About LLM API From JavaScript

What is an LLM API From JavaScript?

An LLM API From JavaScript is a connection between a JavaScript application and a large language model through an API.

Can beginners call an LLM API from JavaScript?

Yes. Beginners who understand basic JavaScript and asynchronous programming can create a simple API integration using an official SDK.

Do I need to train an AI model?

No. You can use a pretrained model through an API.

Can I call an LLM API directly from a browser?

Some SDKs can technically support browser usage, but exposing a private API key in browser code is unsafe. The official OpenAI SDK disables browser use by default for this reason.

For most applications, use:

Browser → Your Backend → LLM API

Can I use React?

Yes. React can be the frontend while Node.js or another server-side environment handles the LLM API call.

Can JavaScript build an AI chatbot?

Yes. An LLM API From JavaScript can provide the AI generation layer for a chatbot.

Can I use JavaScript for RAG?

Yes. JavaScript can be used to build document retrieval, embeddings, vector-database integration, and LLM-generation workflows.

Can I stream responses?

Yes. The official OpenAI JavaScript SDK supports streaming through Server-Sent Events.

Is an LLM API free?

Pricing depends on the provider, model, and usage. Always check the provider’s current pricing before deploying an application.

Are LLM responses always accurate?

No. LLMs can produce incorrect or misleading information. Important outputs should be validated appropriately.

Useful Resources for Learning

For current API documentation and examples, visit the official OpenAI API documentation.

You can also explore the official OpenAI JavaScript/TypeScript SDK on GitHub. The repository contains installation instructions, Responses API examples, streaming examples, error handling, and supported runtime information.

For related tutorials, continue learning with:

These internal resources provide a useful learning path from basic LLM API From JavaScript integration to AI chatbots, embeddings, semantic search, RAG, and document-based AI applications.

Conclusion

Learning how to call an LLM API From JavaScript is an important skill for developers who want to build modern AI-powered applications.

In this tutorial, we learned what an LLM API is, how JavaScript communicates with an AI model, how to create a Node.js project, install the official JavaScript SDK, configure an API key, send a prompt, receive the generated response, and expose the functionality through an Express backend.

The core architecture can be summarized as:

JavaScript → LLM API → AI Model → Generated Response → JavaScript

We also learned an important security principle: private API keys should not be exposed in browser-side JavaScript. For most applications, the safer architecture is:

Browser → Backend → LLM API

Once the basic LLM API From JavaScript integration is working, you can add advanced features such as streaming, conversation memory, authentication, databases, structured outputs, embeddings, vector databases, RAG, monitoring, and analytics.

You can use the same foundation to build:

AI chatbots
Content-generation tools
Summarization applications
Customer-support assistants
AI search systems
Document Q&A applications
Coding assistants
Business automation tools

For freshers, a useful learning path is:

JavaScript → Node.js → APIs → LLM API From JavaScript → AI Text Generation → Chatbots → Embeddings → RAG → Production AI Applications

By completing this tutorial, you gain practical experience with JavaScript, Node.js, API integration, asynchronous programming, authentication, error handling, and AI application architecture.

An LLM API From JavaScript integration is therefore more than a simple API exercise. It is a foundation for building real-world AI applications that combine traditional web development with modern language models.

What Is an LLM API?

Why Use JavaScript for an LLM API?

Important: Browser JavaScript vs. Server-Side JavaScript

Browser JavaScript

Server-Side JavaScript

How Does an LLM API From JavaScript Work?

1. Create an API Key

2. Install the SDK

3. Store the API Key

4. Create the Client

5. Send a Prompt

6. Receive the Response

7. Display or Process the Result

Technologies Required

JavaScript

Node.js

npm

OpenAI JavaScript SDK

dotenv

Step 1: Install Node.js

Step 2: Create a JavaScript Project

Step 3: Install the OpenAI JavaScript SDK

Step 4: Create an API Key

Important Security Rule

Step 5: Protect the .env File

Step 6: Create Your First JavaScript File

Step 7: Understand the JavaScript Code

Load Environment Variables

Import the SDK

Create the Client

Send the Request

Read the Response

Step 8: Run the Application

Understanding the LLM API Request

Model

Input

Step 9: Accept Dynamic User Input

Step 10: Create an Express Backend

Step 11: Test the Express API

How a Web App Uses an LLM API From JavaScript

LLM API From JavaScript for Chatbots

LLM API From JavaScript for Text Generation

LLM API From JavaScript for Summarization

LLM API From JavaScript for Structured Data

Add System Instructions

JavaScript Tutor

Customer Support Assistant

Marketing Assistant

Handle Errors in an LLM API From JavaScript

Add Input Validation

Add Rate Limiting

Keep API Keys Secure

Do

Do Not

Understanding Tokens

LLM API From JavaScript and Streaming

LLM API From JavaScript and RAG

Common Mistakes When Calling an LLM API From JavaScript

Mistake 1: Exposing the API Key

Mistake 2: Hardcoding Credentials

Mistake 3: Ignoring Errors

Mistake 4: Accepting Unlimited Input

Mistake 5: No Rate Limiting

Mistake 6: Assuming AI Is Always Correct

Mistake 7: Ignoring Costs

Mistake 8: Sending Sensitive Information Unnecessarily

Real-World Applications of an LLM API From JavaScript

AI Chatbots

Content Generation

Summarization

Customer Support

Data Extraction

AI Search

Document Q&A

Coding Assistants

Business Automation

How to Improve an LLM API From JavaScript Application

Authentication

Database

Streaming

Step 5: Protect the `.env` File