import { YouTubeVideo } from "@/components/react/youtube-video"; import { FaGithub } from "react-icons/fa"; import { PiMonitor } from "react-icons/pi"; import { Button } from "@/components/ui/button"; import Link from "next/link";

Research Agent Native Application (ANA)

<div> <div>**Time to complete:** 15 minutes</div> <div>**Difficulty:** Medium</div> </div>

<video src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/tutorials/research-ana/final-results.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />

<div className="flex flex-row gap-2"> <Button size="lg" asChild className="flex gap-2 items-center"> <Link href="https://github.com/CopilotKit/CopilotKit/tree/main/examples/showcases/research-canvas" className="no-underline" target="_blank"> <FaGithub className="w-6 h-6 mr-2" /> <span>View on GitHub</span> </Link> </Button> <Button size="lg" asChild className="flex gap-2 items-center"> <Link href="https://open-research-ana.vercel.app/" className="no-underline" target="_blank"> <PiMonitor className="w-6 h-6 mr-2" /> <span>View live app</span> </Link> </Button> </div>

What you'll learn

In this tutorial, we'll build a Research Agent Native Application (ANA) using CopilotKit. Starting with a basic application, we'll add agent capabilities step by step.

You'll learn:

• 🎯 Core principles of agent native applications
• 🔄 How LangGraph helps structure LLM behavior
• 🧱 Building blocks of a Copilot Agent (CoAgent)
• 🛠️ Creating interactive agent experiences with CopilotKit

Let's get started!

Next, we'll set up the project and install dependencies.