Astro & Agno: Modern Web Framework Meets AI Agent Design

Two frameworks dominate different ends of the modern stack, and they share more philosophy than you’d expect. Astro ships static HTML by default and only loads JavaScript when you explicitly ask for it. Agno creates AI agents in pure Python with no graphs, no chains, and no ceremony — just an agent that does what you configure it to do. Both are obsessively minimal about what they send to runtime, and both are built so that you — or an AI code generator — can get to a working result in under twenty lines.

This article walks through what makes each framework exceptional, then builds up from a single-component Astro page and a five-line Agno agent all the way to a multi-agent research dashboard served through a production API.

TL;DR

Astro is a static-first framework that ships zero JavaScript by default. Islands Architecture means you hydrate only the interactive components you actually need, resulting in Lighthouse scores of 95–100 and hosting costs near zero.
Astro 5 added the Content Layer API and Server Islands. Astro 6 (January 2026) rebuilt the dev server on Cloudflare’s workerd runtime after Cloudflare acquired Astro, giving true dev/prod parity.
Agno is a Python framework for building AI agents and multi-agent systems. It is model-agnostic, instantiates agents 529× faster than LangGraph, and produces production-ready agents in ~20 lines.
Agno’s core primitive is an Agent object: give it a model, a list of tools, optional memory, and instructions. For bigger jobs, compose agents into a Team and wrap them in a Workflow.
The two frameworks pair naturally: Astro renders the front end statically while Agno powers the backend agents that feed it content, answer questions, or automate workflows.

Part 1 — Astro: The Framework That Doesn’t Trust JavaScript

The Core Idea

Most web frameworks ship a JavaScript bundle to the browser and then hydrate the entire page from scratch. Astro inverts this default. Every .astro component renders to pure HTML on the server at build time. JavaScript only arrives in the browser if you explicitly mark a component with a client:* directive.

This is not just a configuration option. It is the architecture. You cannot accidentally ship a React bundle to a page that does not need one.

---
// src/pages/index.astro
// This file produces plain HTML. No JS bundle.
import ArticleCard from '../components/ArticleCard.astro';
import { getCollection } from 'astro:content';

const articles = await getCollection('articles');
---

<html>
  <body>
    {articles.map(a => <ArticleCard article={a} />)}
  </body>
</html>

Islands Architecture

When you do need interactivity — a search widget, a dark mode toggle, a share button — you write a React (or Vue, Svelte, Solid, Preact) component and mount it as an island. Each island hydrates independently. The rest of the page stays static HTML.

---
// A page that is mostly static, with one interactive island
import SearchBar from '../components/SearchBar.tsx';
import StaticHeader from '../components/StaticHeader.astro';
---

<html>
  <body>
    <!-- Static — zero JS cost -->
    <StaticHeader />

    <!-- Interactive island — hydrates only this component -->
    <SearchBar client:visible />
  </body>
</html>

The client:visible directive means Astro won’t even download the JavaScript bundle until the component scrolls into the viewport. Other directives give you fine-grained control:

Directive	When JS loads
`client:load`	Immediately on page load
`client:idle`	When the browser is idle
`client:visible`	When the element enters the viewport
`client:media="(max-width: 768px)"`	When a media query matches
`client:only="react"`	Client-only, no SSR at all

Content Collections

Content Collections are Astro’s type-safe system for managing markdown, MDX, YAML, and JSON files. Define a schema with Zod, and Astro validates every entry at build time.

// src/content.config.ts
import { defineCollection, z } from 'astro:content';

const articles = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    excerpt: z.string(),
    tags: z.array(z.string()),
    date: z.string(),
  }),
});

export const collections = { articles };

Query and render it in any page without touching a database:

---
import { getCollection, getEntry } from 'astro:content';

// All articles, sorted by date
const articles = await getCollection('articles');
const sorted = articles.sort((a, b) =>
  new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);
---

View Transitions

Astro’s View Transitions API turns a multi-page static site into something that feels like a single-page app — smooth animations between routes, element morphing, and persistent UI state — with two lines of code.

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---

<head>
  <ViewTransitions />
</head>

Mark elements with transition:name to morph them between pages:

<!-- Article card on index page -->
<img src={article.cover} transition:name={`cover-${article.slug}`} />

<!-- Same image on the article detail page — Astro morphs it smoothly -->
<img src={article.cover} transition:name={`cover-${article.slug}`} />

By March 2026, the View Transitions API has >85% browser support natively, and Astro falls back gracefully to instant page jumps for unsupported browsers.

Server Islands (Astro 5+)

Server Islands let you defer individual components to server-side rendering while the rest of the page ships as static HTML. This is the right tool for personalized or time-sensitive content inside an otherwise static page.

---
import UserGreeting from '../components/UserGreeting.astro';
import StaticHero from '../components/StaticHero.astro';
---

<html>
  <body>
    <!-- Pre-rendered at build time -->
    <StaticHero />

    <!-- Rendered on-demand per request, injected after the static shell loads -->
    <UserGreeting server:defer>
      <span slot="fallback">Loading your profile…</span>
    </UserGreeting>
  </body>
</html>

Astro 6 and the Cloudflare Acquisition

In January 2026, Cloudflare acquired The Astro Technology Company. The framework remains MIT-licensed and open-source. Three weeks after the acquisition, Astro 6 beta landed with the dev server rebuilt on workerd — Cloudflare’s open-source Workers runtime. This means your local npm run dev and your Cloudflare Pages production deployment now run on the exact same runtime. No more “works on my machine” surprises at the edge.

Performance Benchmarks

Real-world migrations consistently report:

Lighthouse performance scores: 95–100 (vs 85–95 for comparable Next.js sites)
Time to First Byte: faster on static pages because there is no server-side rendering at request time
Hosting cost: $0/month on Cloudflare Pages free tier for most content sites
Total Blocking Time: near zero when islands are lazy-loaded

Part 2 — Agno: AI Agents Without the Ceremony

What Agno Is

Agno is an open-source Python framework for building AI agents and multi-agent systems. Its design philosophy is a direct response to the complexity of LangChain and LangGraph: no graphs, no chains, no decorators, no LCEL — just Python.

An agent in Agno is an object. You give it a model, a list of tools, optional memory, and instructions. You call agent.run() or agent.print_response(). That is the entire API for 90% of use cases.

The performance numbers are notable: Agno agents instantiate 529× faster than LangGraph and 57× faster than PydanticAI on an Apple M4, measured in October 2025. The reason is architectural — Agno does not build a graph at instantiation time. It resolves the execution path at runtime.

Why AI Code Generators Love Agno

Code generators work best when the mapping from intent to code is direct. Agno’s API is close to a 1:1 match:

“I need an agent that searches the web” → Agent(tools=[DuckDuckGoTools()])
“I need an agent with memory” → Agent(memory=AgentMemory(db=SqliteMemoryDb(...)))
“I need two agents working together” → Agent(team=[agent1, agent2])

There are no abstract base classes to subclass, no callback systems to hook into, and no graph state to define. An AI assistant generating Agno code can stay grounded in the task rather than navigating a framework’s internal patterns.

Part 3 — Code: From Hello World to Production Dashboard

Level 0 — Hello World Agent

The minimum viable Agno agent: a model and a prompt.

from agno.agent import Agent
from agno.models.anthropic import Claude

agent = Agent(
    model=Claude(id="claude-sonnet-4-6"),
    description="You are a friendly assistant.",
)

agent.print_response("What is the capital of France?")

Paris is the capital of France.

That is the entire program. No setup files, no configuration classes, no framework initialization.

Level 1 — Agent With Tools

Add tools to let the agent take real actions. Agno ships 80+ built-in toolkits.

from agno.agent import Agent
from agno.models.anthropic import Claude
from agno.tools.duckduckgo import DuckDuckGoTools
from agno.tools.yfinance import YFinanceTools

research_agent = Agent(
    model=Claude(id="claude-sonnet-4-6"),
    tools=[
        DuckDuckGoTools(),
        YFinanceTools(stock_price=True, company_news=True),
    ],
    instructions=[
        "Always cite your sources.",
        "Use tables to display financial data.",
    ],
    markdown=True,
)

research_agent.print_response(
    "What is the current stock price of NVDA and what's the latest news about it?",
    stream=True,
)

The agent will decide which tool to call, execute it, inspect the result, and synthesize a final markdown answer with citations — all autonomously.

Level 2 — Agent With Memory and Storage

Give the agent persistent memory so it can remember facts across sessions.

from agno.agent import Agent
from agno.models.anthropic import Claude
from agno.memory.v2.db.sqlite import SqliteMemoryDb
from agno.memory.v2.memory import Memory
from agno.storage.sqlite import SqliteStorage

# Persistent memory backed by SQLite
memory = Memory(
    db=SqliteMemoryDb(table_name="user_memories", db_file="agent.db"),
    delete_memories=True,
    clear_memories=True,
)

agent = Agent(
    model=Claude(id="claude-sonnet-4-6"),
    memory=memory,
    # Persist conversation sessions across restarts
    storage=SqliteStorage(table_name="sessions", db_file="agent.db"),
    add_history_to_messages=True,
    num_history_runs=5,
    enable_user_memories=True,
)

# First session
agent.print_response(
    "My name is Luis and I prefer Python over TypeScript.",
    user_id="luis",
    session_id="session-001",
)

# A later session — the agent remembers the preference
agent.print_response(
    "What language should I use for my next backend project?",
    user_id="luis",
    session_id="session-002",
)
# → "Based on your preference for Python, I'd recommend FastAPI or Django..."

Level 3 — Multi-Agent Team

Compose specialized agents into a team. The team coordinator delegates subtasks and synthesizes results.

from agno.agent import Agent
from agno.models.anthropic import Claude
from agno.models.openai import OpenAIChat
from agno.tools.duckduckgo import DuckDuckGoTools
from agno.tools.yfinance import YFinanceTools
from agno.tools.newspaper4k import Newspaper4kTools

# Specialist 1: web researcher
web_agent = Agent(
    name="Web Researcher",
    role="Search the web for current information and news.",
    model=OpenAIChat(id="gpt-4o-mini"),
    tools=[DuckDuckGoTools(), Newspaper4kTools()],
    instructions=["Always include the source URL.", "Summarize key points concisely."],
    markdown=True,
)

# Specialist 2: financial analyst
finance_agent = Agent(
    name="Finance Analyst",
    role="Retrieve and analyze financial data.",
    model=OpenAIChat(id="gpt-4o-mini"),
    tools=[YFinanceTools(
        stock_price=True,
        analyst_recommendations=True,
        company_info=True,
        company_news=True,
    )],
    instructions=["Use tables to display stock data.", "Include analyst consensus."],
    markdown=True,
)

# Team coordinator: delegates and synthesizes
team_lead = Agent(
    name="Research Lead",
    team=[web_agent, finance_agent],
    model=Claude(id="claude-sonnet-4-6"),
    instructions=[
        "Delegate web research to the Web Researcher.",
        "Delegate financial analysis to the Finance Analyst.",
        "Synthesize a comprehensive final report with clear sections.",
        "Always include sources.",
    ],
    markdown=True,
)

team_lead.print_response(
    "Write a comprehensive investment analysis for NVDA including recent news, "
    "current financials, and analyst recommendations.",
    stream=True,
)

Level 4 — Full Workflow Dashboard

A production workflow that orchestrates agents through defined steps: research → draft → review → publish. This is the pattern behind autonomous content pipelines, automated reporting, and data-driven dashboards.

from agno.agent import Agent
from agno.workflow import Workflow, RunResponse
from agno.models.anthropic import Claude
from agno.models.openai import OpenAIChat
from agno.tools.duckduckgo import DuckDuckGoTools
from agno.tools.newspaper4k import Newspaper4kTools
from agno.storage.sqlite import SqliteStorage
from pydantic import BaseModel
from typing import Iterator
import json

# --- Schemas ---

class ResearchBrief(BaseModel):
    topic: str
    key_findings: list[str]
    sources: list[str]

class DraftArticle(BaseModel):
    title: str
    body: str
    summary: str

# --- Agents ---

researcher = Agent(
    name="Researcher",
    model=OpenAIChat(id="gpt-4o-mini"),
    tools=[DuckDuckGoTools(), Newspaper4kTools()],
    instructions=["Find authoritative sources.", "Extract key facts and statistics."],
    response_model=ResearchBrief,
)

writer = Agent(
    name="Writer",
    model=Claude(id="claude-sonnet-4-6"),
    instructions=[
        "Write in a clear, technical but accessible style.",
        "Structure articles with Introduction, Body sections, and Conclusion.",
        "Cite sources inline.",
    ],
    response_model=DraftArticle,
)

editor = Agent(
    name="Editor",
    model=Claude(id="claude-opus-4-6"),
    instructions=[
        "Check for factual accuracy and logical consistency.",
        "Improve clarity and flow.",
        "Flag any claims that need stronger sourcing.",
    ],
)

# --- Workflow ---

class ContentPipeline(Workflow):
    description: str = "Research → Draft → Edit → Publish pipeline"

    def run(self, topic: str) -> Iterator[RunResponse]:
        # Step 1: Research
        yield RunResponse(content=f"Researching: {topic}…")
        research_result = researcher.run(
            f"Research this topic thoroughly: {topic}"
        )
        brief: ResearchBrief = research_result.content

        # Step 2: Write draft
        yield RunResponse(content="Writing first draft…")
        draft_result = writer.run(
            f"Write an article based on this research:\n{brief.model_dump_json(indent=2)}"
        )
        draft: DraftArticle = draft_result.content

        # Step 3: Editorial review
        yield RunResponse(content="Reviewing draft…")
        review = editor.run(
            f"Review and improve this article:\n\nTitle: {draft.title}\n\n{draft.body}"
        )

        # Step 4: Final output
        yield RunResponse(
            content=json.dumps({
                "title": draft.title,
                "summary": draft.summary,
                "sources": brief.sources,
                "body": review.content,
            }),
            event="workflow_completed",
        )

# --- Run it ---

pipeline = ContentPipeline(
    storage=SqliteStorage(table_name="pipeline_sessions", db_file="pipeline.db"),
)

for response in pipeline.run("The impact of Cloudflare's acquisition of Astro"):
    print(response.content)

To serve this as a REST API with session management, wrap it in AgentOS:

from agno.app.agentOS import AgentOS
from agno.agent import Agent

# Expose agents + workflows as a single API
agent_os = AgentOS(
    description="Content Intelligence Platform",
    agents=[researcher, writer, editor],
    workflows=[pipeline],
)

# Serves at http://localhost:8000
# POST /v1/agents/researcher/runs
# POST /v1/workflows/content-pipeline/runs
agent_os.serve(app="main:agent_os", reload=True)

Part 4 — Combining Astro and Agno

The natural split: Astro owns the front end, Agno owns the intelligence layer.

Browser
  └─ Astro (static HTML + React islands for interactivity)
       └─ Calls AgentOS API for dynamic content
            └─ Agno agents handle research, Q&A, and workflows

A concrete example: an Astro site with a live Q&A island backed by an Agno agent.

// src/components/AskAgent.tsx — React island
import { useState } from 'react';

export default function AskAgent() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');
  const [loading, setLoading] = useState(false);

  async function ask() {
    setLoading(true);
    const res = await fetch('https://your-agentOS-api.example.com/v1/agents/assistant/runs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: question }),
    });
    const data = await res.json();
    setAnswer(data.content);
    setLoading(false);
  }

  return (
    <div className="ask-agent">
      <input
        value={question}
        onChange={e => setQuestion(e.target.value)}
        placeholder="Ask anything…"
      />
      <button onClick={ask} disabled={loading}>
        {loading ? 'Thinking…' : 'Ask'}
      </button>
      {answer && <div className="answer">{answer}</div>}
    </div>
  );
}

---
// src/pages/index.astro
import AskAgent from '../components/AskAgent.tsx';
---

<html>
  <body>
    <h1>My Astro + Agno Site</h1>

    <!-- Static content — zero cost -->
    <p>This page is pre-rendered HTML.</p>

    <!-- Interactive AI island — loads only when visible -->
    <AskAgent client:visible />
  </body>
</html>

Why These Two Frameworks Together

Both Astro and Agno are reactions to the same underlying problem: frameworks that do too much by default.

Astro pushes back against the idea that every web page needs a JavaScript runtime in the browser. The result is faster pages, better SEO, lower hosting costs, and simpler deployments.

Agno pushes back against the idea that AI agents need complex graph abstractions, callback systems, and verbose configuration. The result is agents that are faster to write, easier to read, and simpler to debug.

When you combine them, you get a stack where the performance defaults are always correct on both ends — static HTML until you need interactivity, lightweight Python agents until you need coordination — and where the gap between an idea and working code is measured in lines, not days.

Luis Mori Guerra

Recent Articles

Topics

Astro & Agno: Where Modern Web Performance Meets AI-Native Agent Design