An All-in-One Guide: From APIs to AI-Powered Apps
Introduction: What are LLMs and APIs?
Welcome to our comprehensive guide on building with generative AI! Before we get our hands dirty, let's understand the two core concepts we'll be working with: Large Language Models (LLMs) and APIs.
An LLM is a powerful AI model trained on a massive amount of text and code. This training allows it to understand, generate, and process human language in a remarkable way. Think of it as a super-intelligent digital brain for text.
An API (Application Programming Interface) is a set of rules that allows different applications to talk to each other. In our case, the API is the bridge that lets your code send a request (like a prompt) to an LLM and receive a response (like generated text). Using an API means you don't need to host or manage the massive LLM on your own computer.
Part 1: Getting Started with APIs
To use an LLM via its API, you first need to get a secret API key. This key authenticates your requests and tracks your usage. While there are many options, we'll use a popular and accessible provider for this tutorial.
Now that you have your key, let's look at a simple piece of code to make a basic request. This example uses JavaScript, which is great for web development.
const apiKey = 'YOUR_API_KEY_HERE';
const apiUrl = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent';
async function generateText(prompt) {
try {
const payload = {
contents: [{
role: "user",
parts: [{ text: prompt }]
}]
};
const response = await fetch(`${apiUrl}?key=${apiKey}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
const result = await response.json();
const generatedText = result.candidates[0].content.parts[0].text;
return generatedText;
} catch (error) {
console.error('Error generating text:', error);
return 'Failed to generate text.';
}
}
// Example usage
const userPrompt = "What is the capital of France?";
generateText(userPrompt).then(text => {
console.log(text);
});
Part 2: Creating a Simple Chatbot
Let's build a simple chat interface that lets you send prompts and see the responses. This demonstrates how to combine HTML, Bootstrap, and JavaScript to create a functional application.
HTML Code:
<div class="card p-3 rounded-3 shadow-sm bg-white">
<div class="chat-window border rounded p-3 mb-3" id="chat-window">
<div class="chat-message ai">
Hello! I'm a simple AI assistant. How can I help you today?
</div>
</div>
<form class="input-group" id="chat-form">
<p>
<input class="form-control rounded-start-pill" type="text" id="chat-input" placeholder="Type your message..."> <button class="btn btn-primary rounded-end-pill" type="submit">Send</button>
</p>
</form>
</div>Part 3: Generating Images with AI
Generative AI isn't just for text! Let's build a simple image generator that uses a text-to-image model. We'll use the `imagen-3.0-generate-002` model for this.
HTML Code:
<div class="card p-3 rounded-3 shadow-sm bg-white">
<div class="image-container mb-3" id="image-container">
<p class="text-muted">
Generated image will appear here.
</p>
</div>
<form class="input-group" id="image-form">
<p>
<input class="form-control rounded-start-pill" type="text" id="image-input" placeholder="Describe the image you want to create..."> <button class="btn btn-success rounded-end-pill" type="submit">Generate Image</button>
</p>
</form>
</div>Generated image will appear here.
Part 4: Building an AI-Powered Web App (Story Generator)
To show how you can build a more specific application, let's create a simple story generator. This app will take a simple idea and expand it into a short, creative story.
HTML Code:
<div class="card p-3 rounded-3 shadow-sm bg-white">
<div class="mb-3">
<label class="form-label" for="story-input">Story Idea:</label> <input class="form-control rounded-pill" type="text" id="story-input" placeholder="e.g., A robot who learns to love gardening...">
</div>
<p>
<button class="btn btn-warning mb-3" id="story-btn">Generate Story</button>
</p>
<div class="border rounded p-3 bg-light" id="story-output">
<p class="text-muted mb-0">
Your story will appear here.
</p>
</div>
</div>Your story will appear here.
Full JavaScript Code for this Page
This is the complete JavaScript code that powers all the interactive sections on this page.
// Placeholder for API keys and URLs
const API_KEY = "";
const TEXT_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent';
const IMAGE_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict';
// --- Part 2: Chatbot Logic ---
const chatForm = document.getElementById('chat-form');
const chatInput = document.getElementById('chat-input');
const chatWindow = document.getElementById('chat-window');
async function generateText(prompt) {
const payload = {
contents: [{
role: "user",
parts: [{ text: prompt }]
}]
};
try {
const response = await fetch(`${TEXT_API_URL}?key=${API_KEY}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
const result = await response.json();
const generatedText = result.candidates[0].content.parts[0].text;
return generatedText;
} catch (error) {
console.error('Error generating text:', error);
return 'I am sorry, an error occurred. Please try again.';
}
}
function addMessage(sender, message) {
const messageElement = document.createElement('div');
messageElement.classList.add('chat-message', sender);
messageElement.innerText = message;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
chatForm.addEventListener('submit', async (e) => {
e.preventDefault();
const userMessage = chatInput.value.trim();
if (!userMessage) return;
addMessage('user', userMessage);
chatInput.value = '';
chatInput.disabled = true;
const thinkingIndicator = document.createElement('div');
thinkingIndicator.classList.add('chat-message', 'ai', 'typing-indicator');
thinkingIndicator.innerText = '...';
chatWindow.appendChild(thinkingIndicator);
chatWindow.scrollTop = chatWindow.scrollHeight;
const aiResponse = await generateText(userMessage);
chatWindow.removeChild(thinkingIndicator);
addMessage('ai', aiResponse);
chatInput.disabled = false;
chatInput.focus();
});
// --- Part 3: Image Generation Logic ---
const imageForm = document.getElementById('image-form');
const imageInput = document.getElementById('image-input');
const imageContainer = document.getElementById('image-container');
async function generateImage(prompt) {
const payload = { instances: { prompt: prompt }, parameters: { "sampleCount": 1} };
try {
const response = await fetch(`${IMAGE_API_URL}?key=${API_KEY}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const result = await response.json();
if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
const base64Data = result.predictions[0].bytesBase64Encoded;
return `data:image/png;base64,${base64Data}`;
} else {
return null;
}
} catch (error) {
console.error('Error generating image:', error);
return null;
}
}
imageForm.addEventListener('submit', async (e) => {
e.preventDefault();
const userPrompt = imageInput.value.trim();
if (!userPrompt) return;
imageContainer.innerHTML = `
Loading...
`;
imageInput.disabled = true;
const imageUrl = await generateImage(userPrompt);
if (imageUrl) {
imageContainer.innerHTML = ``;
} else {
imageContainer.innerHTML = `Failed to generate image. Please try a different prompt.`;
}
imageInput.disabled = false;
});
// --- Part 4: Story Generator Logic ---
const storyInput = document.getElementById('story-input');
const storyBtn = document.getElementById('story-btn');
const storyOutput = document.getElementById('story-output');
storyBtn.addEventListener('click', async () => {
const prompt = storyInput.value.trim();
if (!prompt) {
storyOutput.innerHTML = `Please enter a story idea first.`;
return;
}
storyBtn.disabled = true;
storyOutput.innerHTML = `
Loading...
`;
const storyPrompt = `Write a short story about the following idea: "${prompt}". Focus on a compelling narrative and a clear resolution.`;
const story = await generateText(storyPrompt);
storyOutput.innerHTML = `${story}`;
storyBtn.disabled = false;
});