Listen to this Post
Introduction:
The line between a simple chatbot and an autonomous AI agent is defined by one critical capability: tool calling. While traditional chatbots generate text based solely on prompt context, modern AI agents leverage function calling to interact with external systems, execute code, and complete multi‑step tasks end‑to‑end. Muhammad Ubaid Raza’s recently unveiled “Ubaid Raza Assistant” – a web application featuring conversational AI, chat history persistence, file upload support, and a clean responsive interface – exemplifies this paradigm shift. This article dissects the technical architecture behind such an assistant, providing a step‑by‑step guide to building your own agentic AI application with Next.js, the Vercel AI SDK, and OpenAI’s function‑calling capabilities.
Learning Objectives:
- Understand the ReAct (Reasoning + Acting) agent loop and how tool calling enables autonomous task completion.
- Build a full‑stack AI chat application with Next.js, including streaming responses and persistent chat history.
- Implement file upload and processing to enable Retrieval‑Augmented Generation (RAG) workflows.
- Deploy a secure, production‑ready AI assistant with environment variable management and API key protection.
- Agentic Architecture: The ReAct Loop and Tool Calling
At the heart of every modern AI agent lies the ReAct (Reason + Act) pattern – a loop where the model repeatedly decides which tools to call, executes them, and incorporates the results until it arrives at a final answer. Unlike a static chatbot, an agent can:
- Fetch live data from external APIs (weather, stock prices, etc.)
- Query internal databases or knowledge bases
- Perform calculations or transform data
- Orchestrate multi‑step workflows without human intervention
Implementation (Node.js / Next.js API Route):
import { openai } from '@ai-sdk/openai';
import { streamText, tool } from 'ai';
import { z } from 'zod';
export async function POST(req) {
const { messages } = await req.json();
const result = streamText({
model: openai('gpt-4o-mini'),
messages,
tools: {
getWeather: tool({
description: 'Get the current weather in a given city',
parameters: z.object({ city: z.string() }),
execute: async ({ city }) => {
const response = await fetch(
`https://api.weatherapi.com/v1/current.json?key=${process.env.WEATHER_API_KEY}&q=${city}`
);
const data = await response.json();
return data.current;
}
})
},
toolChoice: 'auto'
});
return result.toDataStreamResponse();
}
This snippet defines a weather tool that the model can invoke when a user asks about weather. The `toolChoice: ‘auto’` setting lets the model decide when to call tools, while `streamText` handles the entire ReAct loop automatically.
Windows / Linux Deployment Check:
- Ensure your `.env.local` file contains `OPENAI_API_KEY` and any third‑party API keys.
- Run `npm install ai @ai-sdk/openai zod` to install dependencies.
- Start the development server with `npm run dev` (Linux/macOS) or `npm run dev` (Windows PowerShell).
2. Persistent Chat History with localStorage
A hallmark of any polished AI assistant is the ability to retain conversation history across browser sessions. The Ubaid Raza Assistant achieves this using localStorage, a lightweight client‑side storage mechanism.
Step‑by‑Step Guide:
- Define a chat store interface – Create a type for messages and conversations.
- Save on every new message – After each AI response, serialize the conversation array and store it under a unique key.
- Load on component mount – Use `useEffect` to read from `localStorage` and populate the UI.
- Implement “New Conversation” – Clear the current messages and generate a new conversation ID.
React Hook Example:
import { useState, useEffect } from 'react';
const STORAGE_KEY = 'chat_conversations';
export function useChatHistory() {
const [conversations, setConversations] = useState(() => {
const stored = localStorage.getItem(STORAGE_KEY);
return stored ? JSON.parse(stored) : [];
});
const saveConversation = (conversation) => {
const updated = [conversation, ...conversations.filter(c => c.id !== conversation.id)];
setConversations(updated);
localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
};
return { conversations, saveConversation };
}
This pattern ensures that chat history persists even after page refresh, providing a seamless user experience.
3. File Upload and RAG Integration
File upload support transforms a simple chatbot into a document‑aware assistant. By ingesting PDFs, Word documents, or text files, the agent can answer questions based on uploaded content – a technique known as Retrieval‑Augmented Generation (RAG).
Implementation Workflow:
- Client‑side file handling – Use an `` element and read the file as `ArrayBuffer` or
Blob. - API endpoint for processing – Create a Next.js API route that accepts multipart/form‑data.
- Text extraction – Use libraries like `pdf-parse` or `mammoth.js` to extract plain text.
- Embedding and storage – Generate vector embeddings (e.g., with OpenAI’s
text-embedding-3-small) and store them in a vector database like Pinecone or pgvector. - Query augmentation – When a user asks a question, retrieve relevant chunks and inject them into the system prompt.
Linux Command for PDF Text Extraction (Alternative):
Install pdftotext (poppler-utils) sudo apt-get install poppler-utils Debian/Ubuntu or brew install poppler macOS Extract text from a PDF pdftotext document.pdf output.txt
This command‑line approach can be used for batch processing or server‑side fallback.
4. Streaming Responses with Server‑Sent Events (SSE)
Real‑time streaming is essential for a responsive chat experience. Instead of waiting for the entire LLM response, the server sends tokens as they are generated, creating a typing‑effect illusion.
Next.js API Route with Streaming:
import { StreamingTextResponse, experimental_StreamData } from 'ai';
export async function POST(req) {
const { messages } = await req.json();
const response = await openai.chat.completions.create({
model: 'gpt-4o-mini',
stream: true,
messages,
});
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
}
The Vercel AI SDK’s `useChat` hook on the frontend automatically handles the stream, updating the UI incrementally.
Troubleshooting on Windows:
- If you encounter CORS issues, ensure your `next.config.js` includes proper headers.
- For development, use
http://localhost:3000` and verify that the API route is correctly mapped underapp/api/chat/route.ts`.
5. UI/UX Design for Conversational Interfaces
A clean, modern UI is not just cosmetic – it directly impacts user engagement. The Ubaid Raza Assistant features suggested prompts, a sidebar for conversation management, and a responsive layout.
Key Design Principles:
- Minimalism – Focus on the chat input and message area; avoid clutter.
- Accessibility – Ensure proper contrast, keyboard navigation, and ARIA labels.
- Feedback – Show typing indicators, error messages, and loading states.
- Mobile‑first – Use CSS Flexbox/Grid and relative units for responsiveness.
Tailwind CSS Quick Setup:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Then configure `tailwind.config.js` to scan your components and apply utility classes for rapid prototyping.
6. Deployment and Security Hardening
Deploying an AI assistant requires careful attention to API key security and environment configuration.
Step‑by‑Step Deployment (Vercel):
1. Push your code to a GitHub repository.
2. Import the project on Vercel.
- Add environment variables (
OPENAI_API_KEY, etc.) in the Vercel dashboard.
4. Deploy with automatic SSL and global CDN.
Security Best Practices:
- Never expose API keys on the client – All LLM calls must be proxied through your backend.
- Implement rate limiting – Use Vercel’s built‑in firewall or a package like `express-rate-limit` to prevent abuse.
- Validate file uploads – Restrict file types and size (e.g., max 10MB, only PDF/DOCX/TXT).
- Sanitize user input – Prevent prompt injection by escaping special characters and using system messages to constrain the model’s behavior.
Linux Server Deployment (Alternative):
Build the Next.js application npm run build Start with PM2 for process management npm install -g pm2 pm2 start npm --1ame "ai-assistant" -- start pm2 save pm2 startup
This approach works for self‑hosted environments on Ubuntu or CentOS.
7. Extending with Memory and Multi‑Platform Integration
The next evolution of AI assistants involves persistent memory and cross‑platform availability. Muhammad Ubaid Raza has hinted at adding automation, memory, and multi‑platform integrations – features that transform a reactive chatbot into a proactive digital companion.
Implementing Memory:
- Use a vector database to store conversation embeddings and recall relevant past interactions.
- Implement a “memory bank” that the agent can query before responding.
Multi‑Platform Integration:
- Expose your agent via a REST API or WebSocket for integration with Slack, Discord, or Telegram.
- Use serverless functions to handle webhooks from these platforms.
Sample Memory Tool:
const searchMemory = tool({
description: 'Search past conversations for relevant information',
parameters: z.object({ query: z.string() }),
execute: async ({ query }) => {
// Query your vector database for similar past messages
const results = await vectorDB.similaritySearch(query, 5);
return results.map(r => r.pageContent).join('\n');
}
});
What Undercode Say:
- Key Takeaway 1: Building an AI agent is not about wrapping an LLM in a chat UI – it’s about designing a reasoning loop that can call external tools, remember context, and adapt to user needs. The ReAct pattern is the foundational architecture that makes this possible.
- Key Takeaway 2: Production‑ready AI applications demand a full‑stack mindset: secure API key management, persistent storage, streaming responses, and a polished UI are non‑negotiable. The Vercel AI SDK abstracts much of the complexity, but understanding the underlying mechanics (tool calling, SSE, localStorage) is crucial for debugging and customization.
Analysis: The Ubaid Raza Assistant is a testament to how accessible AI development has become. With tools like Next.js, the AI SDK, and OpenAI’s function calling, a single developer can build a sophisticated agent in a matter of days. However, the real challenge lies in moving beyond demos – adding robust memory, handling edge cases, and ensuring security at scale. The trajectory is clear: AI agents will soon be as ubiquitous as traditional web apps, and developers who master this stack will be at the forefront of the next computing paradigm.
Prediction:
- +1 The democratization of AI agent development will lead to an explosion of niche, task‑specific assistants – from legal document analyzers to personal finance advisors – all built on the same foundational patterns described above.
- +1 As model context windows grow and tool‑calling accuracy improves, agents will handle increasingly complex workflows, reducing the need for human intervention in routine knowledge‑work tasks.
- -1 The ease of building AI agents also lowers the barrier for malicious use – spam bots, misinformation generators, and automated social engineering attacks will proliferate, necessitating stronger content moderation and authentication mechanisms.
- -1 Without careful attention to prompt injection and data leakage, many early agent deployments will expose sensitive information or perform unintended actions, leading to high‑profile security incidents that may slow enterprise adoption.
- +1 The open‑source ecosystem (LangChain, Vercel AI SDK, Hugging Face) will continue to mature, providing battle‑tested components that make it easier to build secure, reliable agents – accelerating innovation while mitigating risks.
▶️ Related Video (74% Match):
🎯Let’s Practice For Free:
🎓 Live Courses & Certifications:
Join Undercode Academy for Verified Certifications
🚀 Request a Custom Project:
Secure, high-velocity infrastructure and disruptive technological engineering. Contact our engineering team for high-tier development and proprietary systems:
[email protected]
💎 Smart Architecture | 🛡️ Secure by Design | ⭐ Trusted by Thousands
IT/Security Reporter URL:
Reported By: Muhammad Ubaid – Hackers Feeds
Extra Hub: Undercode MoN
Basic Verification: Pass ✅
