Agents 101: A Guide on How to Build Your First AI Agent in 30 Minutes!

We are seeing a rise in AI agents in 2025. Building your own agent can be complex, and all the concepts, frameworks, and practices you need to follow can be a bit overwhelming. The good news is that adding agents to your application can be easy and I'll show you how. In this guide, you will learn how to build your first AI agent in just 30 minutes, even if you don't know anything about AI agents. Let’s jump in. What Is Covered? In a nutshell, we are covering these topics in detail. What are AI agents? A step-by-step guide on building your agent with Copilotkit and LangGraph. Some real-world examples with source code. Note: Copilotkit (framework for building AI Copilots) recently launched CoAgents with the partnership of LangChain. That is what we will be using in this. 1. What Are AI Agents? AI agents are like really smart assistants. You just tell them what you need and they figure out how to get it done!! The LLM acts as the brain of the system. When an AI has to communicate with the outside world, obtain data, or carry out particular tasks, it can utilize tools, which are external resources or APIs. They can plan, make decisions, and even get better over time. Think of it as a digital entity that can observe, think, and act, much like how humans interact with their surroundings, but in a programmed and purposeful manner. AI agents can be mainly of two types: ⚡ Reactive: Respond to immediate inputs from their environment. ⚡ Proactive Agents: Plan ahead to achieve long-term goals. Core Components. At its core, an AI agent is made up of the following interconnected components that allow them to perceive their environment, reason, act, and learn: Perception - collects and interprets data from its environment. Reasoning - analyzes information to make decisions. Action - performs tasks based on decisions made. Learning - adapts and improves performance from past experiences using ML algorithms. Communication Interface - interacts with other agents or systems through NLP and protocols. Memory - stores past data and knowledge for future use. Profiling - agent's means of gathering the data from its environment. You will find different details in different places, but it more or less says the same thing. If you're interested in reading more, you can check the guide on What is an AI Agent by simform. What AI Agents Are Not A lot of people are actually confused about AI agents. Let's clarify what an AI agent is not: ❌ Not magic - they don’t “think” like humans but only follow patterns. ❌ Not always accurate - they can hallucinate and can make errors. Plus, they are not always needed. Like if you already know all possible user actions, just code it. For instance, a user clicks a button to book a hotel room → show available dates → confirm the booking. No AI is needed at all. A simple thumb of rule: If your task is straightforward, rule-based, or needs 100% accuracy, AI agents are not the right choice. Now that we have understood about AI agents, it's time to build one in the next section. 2. A Step-By-Step Guide on Building Your Agent With Copilotkit and LangGraph. In this section, we will be talking about how to build your first Agent within a few minutes. CopilotKit is a framework for integrating AI copilots into products. It offers React components for AI chat, generative UI, and autocomplete, plus a runtime that improves AI agents with context, tools, and skills based on user behavior. They recently announced CoAgents (which is in the beta stage). With LangGraph SDK + CoAgents (Copilotkit), developers can quickly build these types of applications for any vertical. Simply build a LangGraph agent attuned to your workflow, then use CoAgents to integrate custom actions and generative UI experiences. Plus, this is all within a clean framework to manage agents inside your application (thanks to LangGraph). You get everything you need including: Shared State (Agent ↔ Application) Agentic Generative UI Human-in-the-Loop Realtime frontend actions Agent Steering (LangGraph checkpoints) You can read more on copilotkit.ai/coagents which also has illustrative diagrams to help you understand. If you want a quick overview, watch this 2-minute video by Atai (Co-founder of Copilotkit)! https://www.youtube.com/watch?v=tVjVYJE-Nic&embedable=true If you want to explore yourself, you can follow the official quickstart guide. It's okay if you don't want to, I will be explaining all the steps in detail. If you have a LangGraph agent, you can just skip to step 3. Here, we will clone the starter repository to start quickly. To avoid making this blog very long, I won't be covering every minor concept. You can read it in the learning section of the docs including terminologies, concepts, and much more. Step 1: Clone the Starter Repository. Since we don't have an agent and just need to get started, we will need to clone the coagents starter repository under the CopilotKit GitHub. git clone https://github.com/CopilotKit/CopilotKit cd CopilotKit/examples/coagents-starter/agent-py I've created a new clean directory (copy-paste) so it's much easier to understand. You can follow the same steps with the cloned repo. This is how our directory will look. The agent directory will hold the LangGraph Agent and the ui will contain our frontend application. If you don't have a frontend, you can create a new Next.js app with TypeScript and then install the Copilotkit react package. In the cloned repository, it's already there, so you just need to install the dependencies using pnpm i under the ui directory. // creates a nextjs app with typescript npx create-next-app@latest ui --typescript // install copilotkit packages npm install @copilotkit/react-ui @copilotkit/react-core The CopilotKit packages allow the co-agent to interact with the React state values and make decisions within the application. You need to run the frontend using pnpm run dev. You can use the agent-js directory if you want to use LangGraph JS; I will be using the Python version (agent-py) for the scope of this blog. Inside the agent-py directory, install the project dependencies using Poetry. cd agent/agent-py poetry install Then, run the demo using the command: poetry run demo. Step 2: Add Necessary API Keys. Create a .env file under the agent-py directory. Then add your OpenAI API key and LangSmith API key to the .env file. I've attached the docs link, so it's easy to follow. This will be the naming convention. OPENAI_API_KEY=your_openai_api_key LANGSMITH_API_KEY=your_langsmith_api_key Step 3: Start Your LangGraph Agent. There are various ways you can start your agent, such as using Self-hosted (FastAPI) which is only supported for Python agents, or deploying to the LangGraph Platform by following the official guide for production. For the scope of this article, we will be using local development, where we use the LangGraph CLI to start a development server and LangGraph studio session. You will need a LangSmith account to use this method. You will need to make sure docker is installed in your system and then install the CLI using pip install langgraph-cli. Before running the main command, you need to make sure CopilotKit is installed. You can do so by following this command. python -m pip show copilotkit If it's not installed, you can do so using: python -m pip install copilotkit. Then, just run the following command to host it locally. langgraph dev --host localhost --port 8000 # our deployment URL will be http://localhost:8000 This command starts a LangGraph development server and uses the langgraph.json to read settings (like routes, nodes, and behaviors) from this file to configure the application. If it's running successfully, then you will get a local LangGraph studio. It helps visualize the steps_node, then searches for the results, summarizes them, and extracts the key points. You can run and test different flows interactively while debugging issues with step-by-step execution. Step 4: Connect Your LangGraph Agent to CopilotKit. Now, you need to connect your LangGraph agent to CopilotKit using either a self-hosted cloud runtime or Copilot Cloud (recommended), which we will use here. With Copilot Cloud, you need to connect a remote endpoint to your LangGraph agent. You can read the docs if you're interested in self-hosted (FastAPI) or LangGraph platform. We will be setting it up locally using LangGraph Studio. When running your LangGraph agent locally, you need to open a tunnel so Copilot Cloud can connect to it. Use the following command: npx copilotkit@latest dev --port 8000 You will get the option to install that copilotkit package and also the option to authenticate with Copilot Cloud in case you are not. As you can see, the Local tunnel is live and linked to Copilot Cloud! You will also receive the confirmation on the CopilotKit cloud dashboard. Step 5: Setup CopilotKit Provider. The component must wrap the Copilot-aware parts of your application. In most cases, it's best to place it around the entire app, like in layout.tsx. You can find it in ui/app/layout.tsx. You will get this API key on the copilotkit cloud available at cloud.copilotkit.ai. import type { Metadata } from "next"; import { CopilotKit } from "@copilotkit/react-core"; import "@copilotkit/react-ui/styles.css"; import "./globals.css"; export const metadata: Metadata = { title: "CoAgents Starter", description: "CoAgents Starter", }; export default function RootLayout({ children }: { children: any }) { return ( {/* Use the public api key you got from Copilot Cloud */} " > {children} ); } Since we are using Copilot Cloud, we have to omit the runtimeUrl property in the CopilotKit component and provide a valid API key. In this example, we are only using a single agent, but if you're looking to run multiple LangGraph agents, check the official Multi-Agent guide. Step 6: Setup the Copilot UI. The last step is to use CopilotKit's UI components to render the chat interaction with your agent. In most cases, this is done alongside your core page components, like in your page.tsx file. import "@copilotkit/react-ui/styles.css"; import { CopilotPopup } from "@copilotkit/react-ui"; export function YourApp() { return ( Your main content ); } In the cloned repo, CopilotSidebar is used with proper styling. Either of these is totally fine; I used this so it's easy to understand. If you are looking for other chat component options (CopilotPopup, CopilotChat...), you can check out the Agentic Chat UI guide. That's it. Congrats! 🎉 You have successfully integrated a LangGraph agent into your application. To start, try asking a few questions to your agent. I also recommend reading Introducing CoAgents: Everything You Need To Build Agent-Native Applications Powered by LangGraph on the official copilotkit blog. It goes into deeper concepts you might find interesting. In the next section, we will check out some of the examples of applications we can build. 3. Some Real-World Examples With Source Code. You can build lots of innovative AI agents, so let's explore a few that stand out. All of these include source code (GitHub repository). ✅ AI Travel App You can read this blog to build an AI Travel app using CopilotKit, LangGraph & Google Maps API. You can ask the agent: Plan a Trip to England, and it will provide all the details which you can act on. You can check the GitHub Repository, Docs, and live demo. https://www.youtube.com/watch?v=9v3kXiOY3vg&embedable=true ✅ Research Canvas You can build a virtual research assistant which has a shared state with the user interface. It uses LangGraph and CoAgents (CopilotKit). You can check the GitHub Repository and live demo. https://youtu.be/0b6BVqPwqA0?embedable=true ✅ Perplexity Clone You can check this tutorial blog to build a Perplexity-style application using LangGraph, Tavily and CopilotKit. You can check the GitHub Repository and live demo. https://youtu.be/HvzmwwDF4aM?embedable=true You can also find a few others on the official examples in the CopilotKit repository. Many developers believe building AI agents is tough. Hopefully, this guide makes it easier for you to build your first agent. Let me know if you have any other ideas or if you have built any agents before. Have a great day! Until next time :) Check my work at anmolbaranwal.com, and reach out to hi@anmolbaranwal.com for any collab or sponsorships. You can connect with me on GitHub, Twitter, and LinkedIn if you love the content :) “Write more, inspire more.” We are seeing a rise in AI agents in 2025. Building your own agent can be complex, and all the concepts, frameworks, and practices you need to follow can be a bit overwhelming. The good news is that adding agents to your application can be easy and I'll show you how. In this guide, you will learn how to build your first AI agent in just 30 minutes , even if you don't know anything about AI agents. build your first AI agent in just 30 minutes Let’s jump in. What Is Covered? In a nutshell, we are covering these topics in detail. What are AI agents? A step-by-step guide on building your agent with Copilotkit and LangGraph. Some real-world examples with source code. What are AI agents? A step-by-step guide on building your agent with Copilotkit and LangGraph. Some real-world examples with source code. Note: Copilotkit (framework for building AI Copilots) recently launched CoAgents with the partnership of LangChain. That is what we will be using in this. 1. What Are AI Agents? AI agents are like really smart assistants. You just tell them what you need and they figure out how to get it done!! The LLM acts as the brain of the system. When an AI has to communicate with the outside world, obtain data, or carry out particular tasks, it can utilize tools, which are external resources or APIs. brain They can plan, make decisions, and even get better over time. Think of it as a digital entity that can observe, think, and act, much like how humans interact with their surroundings, but in a programmed and purposeful manner. AI agents can be mainly of two types: ⚡ Reactive : Respond to immediate inputs from their environment. Reactive ⚡ Proactive Agents : Plan ahead to achieve long-term goals. Proactive Agents Core Components. At its core, an AI agent is made up of the following interconnected components that allow them to perceive their environment, reason, act, and learn: Perception - collects and interprets data from its environment. Reasoning - analyzes information to make decisions. Action - performs tasks based on decisions made. Learning - adapts and improves performance from past experiences using ML algorithms. Communication Interface - interacts with other agents or systems through NLP and protocols. Memory - stores past data and knowledge for future use. Profiling - agent's means of gathering the data from its environment. Perception - collects and interprets data from its environment. Perception - collects and interprets data from its environment. Perception Reasoning - analyzes information to make decisions. Reasoning - analyzes information to make decisions. Reasoning Action - performs tasks based on decisions made. Action - performs tasks based on decisions made. Action Learning - adapts and improves performance from past experiences using ML algorithms. Learning - adapts and improves performance from past experiences using ML algorithms. Learning Communication Interface - interacts with other agents or systems through NLP and protocols. Communication Interface - interacts with other agents or systems through NLP and protocols. Communication Interface Memory - stores past data and knowledge for future use. Memory - stores past data and knowledge for future use. Memory Profiling - agent's means of gathering the data from its environment. Profiling - agent's means of gathering the data from its environment. Profiling You will find different details in different places, but it more or less says the same thing. If you're interested in reading more, you can check the guide on What is an AI Agent by simform. What is an AI Agent What AI Agents Are Not A lot of people are actually confused about AI agents. Let's clarify what an AI agent is not: ❌ Not magic - they don’t “think” like humans but only follow patterns. Not magic ❌ Not always accurate - they can hallucinate and can make errors. Not always accurate Plus, they are not always needed. Like if you already know all possible user actions, just code it. For instance, a user clicks a button to book a hotel room → show available dates → confirm the booking. No AI is needed at all. A simple thumb of rule: If your task is straightforward, rule-based, or needs 100% accuracy, AI agents are not the right choice. If your task is straightforward, rule-based, or needs 100% accuracy, AI agents are not the right choice. Now that we have understood about AI agents, it's time to build one in the next section. 2. A Step-By-Step Guide on Building Your Agent With Copilotkit and LangGraph. In this section, we will be talking about how to build your first Agent within a few minutes. CopilotKit is a framework for integrating AI copilots into products. It offers React components for AI chat, generative UI, and autocomplete, plus a runtime that improves AI agents with context, tools, and skills based on user behavior. They recently announced CoAgents (which is in the beta stage). CopilotKit With LangGraph SDK + CoAgents (Copilotkit) , developers can quickly build these types of applications for any vertical. Simply build a LangGraph agent attuned to your workflow, then use CoAgents to integrate custom actions and generative UI experiences. LangGraph SDK CoAgents (Copilotkit) LangGraph agent CoAgents Plus, this is all within a clean framework to manage agents inside your application (thanks to LangGraph). You get everything you need including: Shared State (Agent ↔ Application) Agentic Generative UI Human-in-the-Loop Realtime frontend actions Agent Steering (LangGraph checkpoints) Shared State (Agent ↔ Application) Shared State (Agent ↔ Application) Agentic Generative UI Agentic Generative UI Human-in-the-Loop Human-in-the-Loop Realtime frontend actions Realtime frontend actions Agent Steering (LangGraph checkpoints) Agent Steering (LangGraph checkpoints) You can read more on copilotkit.ai/coagents which also has illustrative diagrams to help you understand. copilotkit.ai/coagents If you want a quick overview, watch this 2-minute video by Atai (Co-founder of Copilotkit)! https://www.youtube.com/watch?v=tVjVYJE-Nic&embedable=true https://www.youtube.com/watch?v=tVjVYJE-Nic&embedable=true If you want to explore yourself, you can follow the official quickstart guide . It's okay if you don't want to, I will be explaining all the steps in detail. quickstart guide If you have a LangGraph agent, you can just skip to step 3 . Here, we will clone the starter repository to start quickly. step 3 To avoid making this blog very long, I won't be covering every minor concept. You can read it in the learning section of the docs including terminologies, concepts, and much more. docs Step 1: Clone the Starter Repository. Since we don't have an agent and just need to get started, we will need to clone the coagents starter repository under the CopilotKit GitHub. coagents starter repository git clone https://github.com/CopilotKit/CopilotKit cd CopilotKit/examples/coagents-starter/agent-py git clone https://github.com/CopilotKit/CopilotKit cd CopilotKit/examples/coagents-starter/agent-py I've created a new clean directory (copy-paste) so it's much easier to understand. You can follow the same steps with the cloned repo. This is how our directory will look. The agent directory will hold the LangGraph Agent and the ui will contain our frontend application. agent ui If you don't have a frontend, you can create a new Next.js app with TypeScript and then install the Copilotkit react package. In the cloned repository, it's already there, so you just need to install the dependencies using pnpm i under the ui directory. pnpm i ui // creates a nextjs app with typescript npx create-next-app@latest ui --typescript // install copilotkit packages npm install @copilotkit/react-ui @copilotkit/react-core // creates a nextjs app with typescript npx create-next-app@latest ui --typescript // install copilotkit packages npm install @copilotkit/react-ui @copilotkit/react-core The CopilotKit packages allow the co-agent to interact with the React state values and make decisions within the application. You need to run the frontend using pnpm run dev . pnpm run dev You can use the agent-js directory if you want to use LangGraph JS ; I will be using the Python version ( agent-py ) for the scope of this blog. agent-js LangGraph JS agent-py Inside the agent-py directory, install the project dependencies using Poetry . agent-py Poetry cd agent/agent-py poetry install cd agent/agent-py poetry install Then, run the demo using the command: poetry run demo . poetry run demo Step 2: Add Necessary API Keys. Create a .env file under the agent-py directory. Then add your OpenAI API key and LangSmith API key to the .env file. I've attached the docs link, so it's easy to follow. .env agent-py OpenAI API key LangSmith API key .env This will be the naming convention. OPENAI_API_KEY=your_openai_api_key LANGSMITH_API_KEY=your_langsmith_api_key OPENAI_API_KEY=your_openai_api_key LANGSMITH_API_KEY=your_langsmith_api_key Step 3: Start Your LangGraph Agent. There are various ways you can start your agent, such as using Self-hosted (FastAPI) which is only supported for Python agents, or deploying to the LangGraph Platform by following the official guide for production . official guide for production For the scope of this article, we will be using local development, where we use the LangGraph CLI to start a development server and LangGraph studio session. LangGraph CLI You will need a LangSmith account to use this method. You will need to make sure docker is installed in your system and then install the CLI using pip install langgraph-cli . LangSmith account pip install langgraph-cli Before running the main command, you need to make sure CopilotKit is installed. You can do so by following this command. CopilotKit python -m pip show copilotkit python -m pip show copilotkit If it's not installed, you can do so using: python -m pip install copilotkit . python -m pip install copilotkit Then, just run the following command to host it locally. langgraph dev --host localhost --port 8000 # our deployment URL will be http://localhost:8000 langgraph dev --host localhost --port 8000 # our deployment URL will be http://localhost:8000 This command starts a LangGraph development server and uses the langgraph.json to read settings (like routes, nodes, and behaviors) from this file to configure the application. langgraph.json If it's running successfully, then you will get a local LangGraph studio. It helps visualize the steps_node , then searches for the results, summarizes them, and extracts the key points. steps_node You can run and test different flows interactively while debugging issues with step-by-step execution. Step 4: Connect Your LangGraph Agent to CopilotKit. Now, you need to connect your LangGraph agent to CopilotKit using either a self-hosted cloud runtime or Copilot Cloud (recommended), which we will use here. With Copilot Cloud , you need to connect a remote endpoint to your LangGraph agent. You can read the docs if you're interested in self-hosted (FastAPI) or LangGraph platform. Copilot Cloud docs We will be setting it up locally using LangGraph Studio. When running your LangGraph agent locally, you need to open a tunnel so Copilot Cloud can connect to it. Use the following command: npx copilotkit@latest dev --port 8000 npx copilotkit@latest dev --port 8000 You will get the option to install that copilotkit package and also the option to authenticate with Copilot Cloud in case you are not. As you can see, the Local tunnel is live and linked to Copilot Cloud! You will also receive the confirmation on the CopilotKit cloud dashboard. Step 5: Setup CopilotKit Provider. The component must wrap the Copilot-aware parts of your application. In most cases, it's best to place it around the entire app, like in layout.tsx . layout.tsx You can find it in ui/app/layout.tsx . You will get this API key on the copilotkit cloud available at cloud.copilotkit.ai . ui/app/layout.tsx cloud.copilotkit.ai import type { Metadata } from "next"; import { CopilotKit } from "@copilotkit/react-core"; import "@copilotkit/react-ui/styles.css"; import "./globals.css"; export const metadata: Metadata = { title: "CoAgents Starter", description: "CoAgents Starter", }; export default function RootLayout({ children }: { children: any }) { return ( {/* Use the public api key you got from Copilot Cloud */} " > {children} ); } import type { Metadata } from "next"; import { CopilotKit } from "@copilotkit/react-core"; import "@copilotkit/react-ui/styles.css"; import "./globals.css"; export const metadata: Metadata = { title: "CoAgents Starter", description: "CoAgents Starter", }; export default function RootLayout({ children }: { children: any }) { return ( {/* Use the public api key you got from Copilot Cloud */} " > {children} ); } Since we are using Copilot Cloud , we have to omit the runtimeUrl property in the CopilotKit component and provide a valid API key. Copilot Cloud runtimeUrl CopilotKit In this example, we are only using a single agent, but if you're looking to run multiple LangGraph agents, check the official Multi-Agent guide . official Multi-Agent guide Step 6: Setup the Copilot UI. The last step is to use CopilotKit's UI components to render the chat interaction with your agent. In most cases, this is done alongside your core page components, like in your page.tsx file. page.tsx import "@copilotkit/react-ui/styles.css"; import { CopilotPopup } from "@copilotkit/react-ui"; export function YourApp() { return ( Your main content ); } import "@copilotkit/react-ui/styles.css"; import { CopilotPopup } from "@copilotkit/react-ui"; export function YourApp() { return ( Your main content ); } In the cloned repo, CopilotSidebar is used with proper styling. Either of these is totally fine; I used this so it's easy to understand. CopilotSidebar If you are looking for other chat component options ( CopilotPopup , CopilotChat ...), you can check out the Agentic Chat UI guide . CopilotPopup CopilotChat Agentic Chat UI guide That's it. Congrats! 🎉 You have successfully integrated a LangGraph agent into your application. To start, try asking a few questions to your agent. I also recommend reading Introducing CoAgents: Everything You Need To Build Agent-Native Applications Powered by LangGraph on the official copilotkit blog. It goes into deeper concepts you might find interesting. Introducing CoAgents: Everything You Need To Build Agent-Native Applications Powered by LangGraph In the next section, we will check out some of the examples of applications we can build. 3. Some Real-World Examples With Source Code. You can build lots of innovative AI agents, so let's explore a few that stand out. All of these include source code (GitHub repository). ✅ AI Travel App AI Travel App You can read this blog to build an AI Travel app using CopilotKit , LangGraph & Google Maps API . You can ask the agent: Plan a Trip to England , and it will provide all the details which you can act on. CopilotKit LangGraph Google Maps API Plan a Trip to England You can check the GitHub Repository , Docs , and live demo . GitHub Repository Docs live demo https://www.youtube.com/watch?v=9v3kXiOY3vg&embedable=true https://www.youtube.com/watch?v=9v3kXiOY3vg&embedable=true ✅ Research Canvas Research Canvas You can build a virtual research assistant which has a shared state with the user interface. It uses LangGraph and CoAgents (CopilotKit) . LangGraph CoAgents (CopilotKit) You can check the GitHub Repository and live demo . GitHub Repository live demo https://youtu.be/0b6BVqPwqA0?embedable=true https://youtu.be/0b6BVqPwqA0?embedable=true ✅ Perplexity Clone Perplexity Clone You can check this tutorial blog to build a Perplexity-style application using LangGraph , Tavily and CopilotKit . LangGraph Tavily CopilotKit You can check the GitHub Repository and live demo . GitHub Repository live demo https://youtu.be/HvzmwwDF4aM?embedable=true https://youtu.be/HvzmwwDF4aM?embedable=true You can also find a few others on the official examples in the CopilotKit repository. official examples Many developers believe building AI agents is tough. Hopefully, this guide makes it easier for you to build your first agent. Let me know if you have any other ideas or if you have built any agents before. Have a great day! Until next time :) Check my work at anmolbaranwal.com , and reach out to hi@anmolbaranwal.com for any collab or sponsorships. anmolbaranwal.com hi@anmolbaranwal.com You can connect with me on GitHub , Twitter , and LinkedIn if you love the content :) GitHub Twitter LinkedIn “Write more, inspire more.”