Agents 101: 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.

1. What are AI agents?
2. A step-by-step guide on building your agent with Copilotkit and LangGraph.
3. 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.

Credits go to Abhishek Reddy (Medium)

 

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.

AI agents in larger environment

 

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).

Check Out 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.

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)!

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

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

langsmith api key

 

openai 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 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, 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.

local LangGraph studio

 

api docs

 

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.

copilotkit cloud dashboard

 

Step 5: Setup CopilotKit provider.

The <CopilotKit> 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 (
    <html lang="en">
      <body>
        {/* Use the public api key you got from Copilot Cloud  */}
        <CopilotKit
          agent="sample_agent" // lock the agent to the sample_agent since we only have one agent
          //  runtimeUrl="/api/copilotkit"
          showDevConsole={false}
          publicApiKey="<your-copilot-cloud-public-api-key>"
        >
          {children}
        </CopilotKit>
      </body>
    </html>
  );
}

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 (
    <main>
      <h1>Your main content</h1>

      <CopilotPopup
        labels={{
            title: "Popup Assistant",
            initial: "Hi! I'm connected to an agent. How can I help?",
        }}
      />
    </main>
  );
}

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.

 

✅ 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.

 

✅ 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.

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 :)

You can check my work at anmolbaranwal.com. Thank you for reading! 🥰

Follow CopilotKit on Twitter and say hi, and if you'd like to build something cool, join the Discord community.

CopilotKit Follow

React UI + elegant infrastructure for AI Copilots, in-app AI agents, AI chatbots, and AI-powered Textareas 🪁

Comments

[Divya]

This is a really great guide.
Thank you for creating it.

[Anmol Baranwal]

Thanks for reading Divya! Appreciate your support :)

[uliyahoo]

Nice Anmol. Been waiting to have an article of this type for awhile!

[Anmol Baranwal]

Awesome Uli. 🔥 I'm sure this will be super helpful for those starting from scratch.

[K Om Senapati]

Great tutorial for setting up co-agents

[Anmol Baranwal]

Awesome Om! 🔥 I guess the title should include CoAgents haha, totally get that.

[Rob Benzo]

Hi Omelet 👋

[Md Abid Hussain]

Great tutorial

[Anmol Baranwal]

Thanks for checking this out, Abid! 🔥 Let me know if you run into any problems :)

[Nathan Tarbert]

Thanks for the insightful article Anmol on how to get started with agents! 🚀

[Anmol Baranwal]

Thanks for reading, Nathan! 🙌

[Yash Kumar Saini]

Really good informative article really liked the approach simple & easy, yet keeping all details

[Anmol Baranwal]

Thanks for reading, Yash! 🔥 Means a lot.

[Shrijal Acharya]

Great one, Anmol! 🙌

[Anmol Baranwal]

Thanks for checking this out, Shrijal! 🔥 Time to build something amazing :)

[Morgan]

Really cool!

[Aniruddha Mukherjee]

Really well written article. Will replicate today morning!

[Anmol Baranwal]

Awesome! Let me know if you run into any problems. I've tried to cover everything, so you probably won't get stuck.

[Dariel Vila]

Nice article. Thanks for sharing. We have a similar use case in KaibanJS 👉🏻 kaibanjs.com/

[Anmol Baranwal]

Awesome! Thank you for sharing. I believe someone shared this in my community a few days ago.

I gave it a star on GitHub as well, it's very close to 1k stars! The link isn’t working so I recommend fixing it in case someone else wants to check it out.