From 189d08d3adcb64b6f6ad36b7a09617fba30a9689 Mon Sep 17 00:00:00 2001 From: timonwa Date: Tue, 31 Mar 2026 16:46:43 +0100 Subject: [PATCH 01/11] feat: implement showcase section with horizontal scroll and project cards --- .../_components/project-features.tsx | 347 +++++++++++++++++- apps/docs/package.json | 1 + pnpm-lock.yaml | 25 ++ 3 files changed, 366 insertions(+), 7 deletions(-) diff --git a/apps/docs/app/new-landing/_components/project-features.tsx b/apps/docs/app/new-landing/_components/project-features.tsx index ab57853e..4aff8321 100644 --- a/apps/docs/app/new-landing/_components/project-features.tsx +++ b/apps/docs/app/new-landing/_components/project-features.tsx @@ -1,11 +1,344 @@ -import { SectionWrapper } from "./section-wrapper"; +import { motion, useScroll, useTransform } from "motion/react"; +import { useRef, useLayoutEffect, useState } from "react"; +import { ArrowRight } from "lucide-react"; +import Link from "next/link"; + +const showcaseProjects = [ + { + id: 1, + title: "AI Research Assistant", + description: + "Autonomous research agent that searches the web, analyzes papers, and generates comprehensive reports.", + tags: ["Multi-Agent", "Web Search", "RAG"], + github: "research-ai/adk-assistant", + stats: { agents: 5 }, + }, + { + id: 2, + title: "Customer Support Bot", + description: + "Production-grade support agent with memory, ticket routing, and seamless handoff to human operators.", + tags: ["Production", "Memory", "Streaming"], + github: "supportco/adk-bot", + stats: { agents: 3 }, + }, + { + id: 3, + title: "Code Review Agent", + description: + "Multi-LLM code reviewer that analyzes PRs, suggests improvements, and enforces style guidelines.", + tags: ["Multi-LLM", "GitHub", "Tooling"], + github: "devtools/code-reviewer", + stats: { agents: 2 }, + }, + { + id: 4, + title: "Content Generator", + description: + "Workflow orchestrator that coordinates writers, editors, and SEO agents for content creation.", + tags: ["Workflow", "Orchestration", "SEO"], + github: "contentai/generator", + stats: { agents: 4 }, + }, + { + id: 5, + title: "Data Analysis Pipeline", + description: + "Agent system that fetches data, runs analysis, generates visualizations, and produces insights.", + tags: ["Analytics", "Visualization", "Tools"], + github: "dataai/pipeline", + stats: { agents: 6 }, + }, + { + id: 6, + title: "Email Automation", + description: + "Smart email agent with classification, prioritization, draft generation, and calendar integration.", + tags: ["Automation", "NLP", "Integration"], + github: "emailai/automation", + stats: { agents: 3 }, + }, +]; + +export default function ShowcaseSection() { + const sectionRef = useRef(null); + const trackRef = useRef(null); + const [maxScroll, setMaxScroll] = useState(0); + + // Scroll progress for the section + const { scrollYProgress } = useScroll({ + target: sectionRef, + offset: ["start start", "end end"], + }); + + // Horizontal transform - converts scroll progress to horizontal movement + const x = useTransform(scrollYProgress, [0, 1], [0, -maxScroll]); + + useLayoutEffect(() => { + const calculateDimensions = () => { + if (!sectionRef.current || !trackRef.current) return; + + const trackWidth = trackRef.current.scrollWidth; + const viewportWidth = window.innerWidth; + + // Total horizontal movement required to show all cards + const horizontalDistance = trackWidth - viewportWidth; + + // Set the section height = viewport height + horizontal distance + // This creates scroll space for the horizontal movement + sectionRef.current.style.height = `${horizontalDistance + window.innerHeight}px`; + + // Update the max scroll distance for the transform + setMaxScroll(horizontalDistance); + }; + + // Calculate on mount + calculateDimensions(); + + // Recalculate on resize + window.addEventListener("resize", calculateDimensions); + + // Small delay to ensure content is fully loaded + const timeout = setTimeout(calculateDimensions, 100); + + return () => { + window.removeEventListener("resize", calculateDimensions); + clearTimeout(timeout); + }; + }, []); -const ProjectFeaturesSection = () => { return ( - -
ProjectFeaturesSection
- +
+
+ {/* Vertical boundary lines */} +
+
+
+
+
+
+ +
+
+ {/* LEFT COLUMN (static) */} +
+ +
+
+ + Showcase + +
+

+ Built with +
+ ADK-TS +

+

+ Real-world projects and production systems powered by the + Agent Development Kit. +

+ +
+
+ + 50+ + + + Projects + +
+
+
+ + 15k+ + + + Stars + +
+
+
+ + 200+ + + + Contributors + +
+
+ + {/* View All Showcases Button */} + + View All Showcases + + + +
+ + {/* RIGHT COLUMN (horizontal scroll) */} +
+ + {showcaseProjects.map((project, index) => ( + + ))} + + + {/* Scroll indicator */} + + SCROLL DOWN + + + + +
+
+
+
+
); -}; +} + +interface ShowcaseCardProps { + project: (typeof showcaseProjects)[0]; + index: number; +} + +function ShowcaseCard({ project, index }: ShowcaseCardProps) { + return ( + +
+ {/* Card header with gradient effect */} +
+ {/* Animated grid pattern */} +
+
+
+ + {/* Pink accent line */} + -export default ProjectFeaturesSection; + {/* Stats overlay */} +
+
+ + {project.stats.agents} agents + +
+
+ + {/* Project number */} +
+ + {String(project.id).padStart(2, "0")} + +
+
+ + {/* Card content */} +
+

+ {project.title} +

+ +

+ {project.description} +

+ + {/* Tags */} +
+ {project.tags.map((tag) => ( + + {tag} + + ))} +
+ + {/* GitHub link */} +
+ + {project.github} +
+
+ + {/* Hover effect border */} +
+ +
+
+ + ); +} diff --git a/apps/docs/package.json b/apps/docs/package.json index da0133c3..0965453b 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -22,6 +22,7 @@ "gray-matter": "^4.0.3", "lucide-react": "^0.525.0", "mermaid": "^11.10.1", + "motion": "^12.38.0", "next": "16.1.1", "next-themes": "^0.4.6", "posthog-js": "^1.257.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ca5a2707..64830218 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -252,6 +252,9 @@ importers: mermaid: specifier: ^11.10.1 version: 11.12.2 + motion: + specifier: ^12.38.0 + version: 12.38.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3) next: specifier: 16.1.1 version: 16.1.1(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -6651,6 +6654,20 @@ packages: motion-utils@12.36.0: resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==} + motion@12.38.0: + resolution: {integrity: sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -15896,6 +15913,14 @@ snapshots: motion-utils@12.36.0: {} + motion@12.38.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3): + dependencies: + framer-motion: 12.38.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + tslib: 2.8.1 + optionalDependencies: + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + mri@1.2.0: {} ms@2.1.3: {} From 40a5dfc0608db68ad13034c16cd1757a837cee9d Mon Sep 17 00:00:00 2001 From: timonwa Date: Tue, 31 Mar 2026 17:07:14 +0100 Subject: [PATCH 02/11] feat: new sections --- .../_components/complete-stack.tsx | 389 +++++- .../_components/interactive-simulations.tsx | 1158 ++++++++++++++++- .../new-landing/_components/mcp-servers.tsx | 430 +++++- .../_components/project-features.tsx | 5 +- 4 files changed, 1965 insertions(+), 17 deletions(-) diff --git a/apps/docs/app/new-landing/_components/complete-stack.tsx b/apps/docs/app/new-landing/_components/complete-stack.tsx index ef22fe32..e801bd25 100644 --- a/apps/docs/app/new-landing/_components/complete-stack.tsx +++ b/apps/docs/app/new-landing/_components/complete-stack.tsx @@ -1,11 +1,390 @@ -import { SectionWrapper } from "./section-wrapper"; +import { motion } from "motion/react"; +import { Zap, Flame, FileStack, Rocket } from "lucide-react"; const CompleteStackSection = () => { return ( - -
CompleteStackSection
- +
+ {/* Vertical boundary lines */} +
+
+
+
+
+ +
+ {/* Section Header */} +
+ +

+ Developer Platform +

+

+ The Complete +
+ Agent Stack +

+

+ Everything you need to build, test, and deploy AI agents. From CLI + tools to observability, all batteries included. +

+ +
+ + {/* 2x2 Grid of Capabilities */} +
+ {/* CLI Card */} + +

ADK CLI

+ +

+ Powerful command-line interface for scaffolding projects, managing + agents, running development servers, and deploying to production. +

+ + {/* Stats grid */} +
+
+
+
+
+
+ +
+
+
+ {"<"}3s +
+
+ Project creation +
+
+
+
+ +
+
+
+
+
+ +
+
+
HMR
+
+ Hot module reload +
+
+
+
+ +
+
+
+
+
+ +
+
+
12+
+
+ Built-in templates +
+
+
+
+ +
+
+
+
+
+ +
+
+
+ 1-click +
+
+ Deploy command +
+
+
+
+
+ +
COMMANDS
+ +
+
+ $ adk init my-agent +
+
+ $ adk dev +
+
+ $ adk deploy --prod +
+
+ + + {/* Sessions & Memory Card */} + +

+ Sessions & Memory +

+ +

+ Built-in session management with persistent memory storage. + Multiple storage backends with unified API and automatic context + retention. +

+ + {/* Stack visualization */} +
+
+
+
+ + Redis + +
+
+
+
+ 100ms avg latency, 10k+ sessions/sec +
+
+ +
+
+
+ + PostgreSQL + +
+
+
+ Persistent storage, full-text search +
+
+ +
+
+
+ + In-Memory + +
+
+
+ Zero-config local development +
+
+
+ +
+ KEY FEATURES +
+ +
+
+
+ Automatic conversation threading +
+
+
+ Context window management +
+
+
+ Cross-agent memory sharing +
+
+ + + {/* Callbacks & Plugins Card */} + +

+ Callbacks & Plugin System +

+ +

+ Extensible plugin architecture with lifecycle hooks. Event-driven + callbacks for complete control over agent behavior and composable + middleware. +

+ + {/* Lifecycle flow */} +
+
+ LIFECYCLE HOOKS +
+ +
+
+
+
+ beforeExecute +
+
+ Validate & modify prompt +
+
+ +
+
+
+ onToolCall +
+
+ Intercept tool execution +
+
+ +
+
+
+ onStream +
+
+ Process streaming chunks +
+
+ +
+
+
+ afterExecute +
+
+ Log & trigger webhooks +
+
+ +
+
+
onError
+
+ Handle failures gracefully +
+
+
+
+ +
+ BUILT-IN PLUGINS +
+ +
+
+ Rate Limiter +
+
+ Logger +
+
+ Validator +
+
+ Cache +
+
+ + + {/* Observability Card */} + +

+ Observability +

+ +

+ Full OpenTelemetry integration for metrics, traces, and logs. + Monitor agent performance and debug execution flows in production. +

+ + {/* Checkmarks list */} +
+
+
+
+
+
+ Distributed tracing with context propagation +
+
+ +
+
+
+
+
+ Custom metrics & dashboards +
+
+ +
+
+
+
+
+ Structured logging with correlation IDs +
+
+
+ +
+ MONITORING PLATFORMS +
+ +
+
+ Datadog +
+
+ New Relic +
+
+ Grafana +
+
+ Jaeger +
+
+ +
+
+
); }; - export default CompleteStackSection; diff --git a/apps/docs/app/new-landing/_components/interactive-simulations.tsx b/apps/docs/app/new-landing/_components/interactive-simulations.tsx index 043c8aa0..62582d33 100644 --- a/apps/docs/app/new-landing/_components/interactive-simulations.tsx +++ b/apps/docs/app/new-landing/_components/interactive-simulations.tsx @@ -1,11 +1,1159 @@ -import { SectionWrapper } from "./section-wrapper"; +import { useState, useRef, useEffect } from "react"; +import { motion } from "motion/react"; +import { Play, RotateCw, Clock, Zap, Target } from "lucide-react"; + +interface DemoCardProps { + title: string; + subtitle: string; + description: string; + latency: string; + tokens: string; + accuracy?: string; + agents: Array<{ + name: string; + label: string; + }>; + inputLabel?: string; + outputLabel?: string; + hasInput?: boolean; + hasOutput?: boolean; +} + +function DemoCard({ + title, + subtitle, + description, + latency, + tokens, + accuracy, + agents, + inputLabel = "INPUT", + hasInput = true, +}: DemoCardProps) { + const [isPlaying, setIsPlaying] = useState(false); + const [activeAgent, setActiveAgent] = useState(-1); + const [logs, setLogs] = useState([]); + const logContainerRef = useRef(null); + + // Auto-scroll to bottom when logs update + // biome-ignore lint/correctness/useExhaustiveDependencies: logs triggers scroll on update + useEffect(() => { + if (logContainerRef.current) { + logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight; + } + }, [logs]); + + const generateDetailedLogs = (agent: { name: string; label: string }) => { + const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false }); + return [ + `[${timestamp}] 🚀 Initializing ${agent.name} agent...`, + `[${timestamp}] ⚙️ Loading model: gpt-4-turbo`, + `[${timestamp}] 📥 Processing input: ${agent.label}`, + `[${timestamp}] 🔄 Executing task...`, + `[${timestamp}] ✅ ${agent.name} completed successfully`, + `[${timestamp}] 📊 Tokens used: ${Math.floor(Math.random() * 500 + 200)}`, + `[${timestamp}] ⏱️ Execution time: ${Math.floor(Math.random() * 150 + 50)}ms`, + "", + ]; + }; + + const startSimulation = async () => { + if (isPlaying) { + setIsPlaying(false); + setActiveAgent(-1); + return; + } + + setIsPlaying(true); + setLogs([ + `[${new Date().toLocaleTimeString("en-US", { hour12: false })}] 🎬 Starting multi-agent pipeline...`, + "", + ]); + setActiveAgent(-1); + + // Execute agents one by one sequentially + for (let i = 0; i < agents.length; i++) { + await new Promise((resolve) => setTimeout(resolve, 500)); + setActiveAgent(i); + + const agentLogs = generateDetailedLogs(agents[i]); + for (const log of agentLogs) { + await new Promise((resolve) => setTimeout(resolve, 150)); + setLogs((prev) => [...prev, log]); + } + + setActiveAgent(-1); + await new Promise((resolve) => setTimeout(resolve, 300)); + } + + setLogs((prev) => [ + ...prev, + `[${new Date().toLocaleTimeString("en-US", { hour12: false })}] 🎉 Pipeline completed successfully`, + `[${new Date().toLocaleTimeString("en-US", { hour12: false })}] 📈 Total execution time: ${latency}`, + `[${new Date().toLocaleTimeString("en-US", { hour12: false })}] 🔢 Total tokens: ${tokens}`, + ]); + setIsPlaying(false); + }; + + const resetSimulation = () => { + setIsPlaying(false); + setActiveAgent(-1); + setLogs([]); + }; + + return ( +
+ {/* Header Section */} +
+
+

{title}

+

{subtitle}

+
+ +

+ {description} +

+ + {/* Metrics */} +
+
+ +
+
+ Latency: +
+
{latency}
+
+
+
+ +
+
+ Tokens: +
+
{tokens}
+
+
+ {accuracy && ( +
+ +
+
+ Accuracy: +
+
+ {accuracy} +
+
+
+ )} +
+
+ + {/* Body Section - Two Columns */} +
+ {/* LEFT - Node Graph Visualization */} +
+ +
+ + {/* RIGHT - Terminal Window */} +
+ {/* Window Header - macOS Style */} +
+
+
+
+
+
+
+ agent-output.log +
+ {/* Control Buttons - Relocated here */} +
+ + +
+
+ + {/* Window Content */} +
+
+ {logs.length === 0 ? ( +
+ Press Play to start simulation +
+ ) : ( + logs.map((log, index) => ( + + {log} + + )) + )} + {isPlaying && ( + + ▊ + + )} +
+
+
+
+
+ ); +} const InteractiveSimulationsSection = () => { return ( - -
InteractiveSimulationsSection
- +
+
+ {/* Section Header */} +
+ +

+ Real-World Implementations +

+

+ Multi-Agent +
+ Systems in Action +

+

+ Experience live simulations of production-grade multi-agent + workflows. Watch how specialized agents collaborate to solve + complex real-world problems. +

+ +
+ + {/* Demo Cards */} +
+ + + + + + + + + + + +
+
+
); }; - export default InteractiveSimulationsSection; diff --git a/apps/docs/app/new-landing/_components/mcp-servers.tsx b/apps/docs/app/new-landing/_components/mcp-servers.tsx index 3e68b4f8..b1b50495 100644 --- a/apps/docs/app/new-landing/_components/mcp-servers.tsx +++ b/apps/docs/app/new-landing/_components/mcp-servers.tsx @@ -1,11 +1,431 @@ -import { SectionWrapper } from "./section-wrapper"; +import { useState } from "react"; +import { motion, AnimatePresence } from "motion/react"; +import { ArrowRight } from "lucide-react"; + +interface MCPHighlight { + name: string; + mcpName: string; + description: string; + features: string[]; +} + +interface CategoryContent { + id: string; + label: string; + description: string; + highlights: MCPHighlight[]; +} + +const categories: CategoryContent[] = [ + { + id: "defi", + label: "DeFi & Blockchain", + description: + "Connect agents to DeFi protocols, DEXs, and on-chain data across 200+ chains", + highlights: [ + { + name: "DeFi Llama", + mcpName: "McpDefillama", + description: + "Access comprehensive DeFi protocol data including TVL, yield rates, and historical metrics", + features: [ + "Real-time TVL tracking", + "Protocol revenue analytics", + "200+ chains supported", + ], + }, + { + name: "DeBank", + mcpName: "McpDebank", + description: + "Track wallet portfolios, DeFi positions, and NFT holdings across multiple chains", + features: [ + "Multi-chain portfolio tracking", + "DeFi position analysis", + "NFT valuation", + ], + }, + { + name: "Odos", + mcpName: "McpOdos", + description: + "Smart order routing across DEXs for optimal swap paths and best execution", + features: [ + "Multi-hop optimization", + "20+ chains", + "100+ DEX integrations", + ], + }, + ], + }, + { + id: "prediction", + label: "Prediction Markets", + description: + "Build agents that interact with prediction and betting markets for market intelligence", + highlights: [ + { + name: "Polymarket", + mcpName: "McpPolymarket", + description: + "Access decentralized prediction markets built on Polygon for odds, bets, and outcomes", + features: [ + "Real-time market odds", + "Order placement", + "Historical resolution data", + ], + }, + { + name: "Kalshi", + mcpName: "McpKalshi", + description: + "CFTC-regulated event contracts marketplace for US-based prediction markets", + features: [ + "Regulated trading", + "Economic & political events", + "Settlement tracking", + ], + }, + { + name: "Limitless", + mcpName: "McpLimitless", + description: + "Aggregated prediction data from multiple sources for comprehensive intelligence", + features: [ + "Cross-platform aggregation", + "Consensus calculations", + "Real-time comparison", + ], + }, + ], + }, + { + id: "communication", + label: "Communication", + description: + "Enable agents to interact through popular messaging and community platforms", + highlights: [ + { + name: "Telegram", + mcpName: "McpTelegram", + description: + "Build Telegram bots powered by ADK-TS agents with full messaging capabilities", + features: [ + "Bot messaging", + "Command handling", + "Group management", + "Media uploads", + ], + }, + { + name: "Discord", + mcpName: "McpDiscord", + description: + "Create Discord bots with agent capabilities for server and community management", + features: [ + "Slash commands", + "Role management", + "Voice integration", + "Embeds & reactions", + ], + }, + ], + }, + { + id: "ai-knowledge", + label: "AI & Knowledge", + description: + "Specialized MCPs for agent orchestration, knowledge bases, and utilities", + highlights: [ + { + name: "NEAR Agent", + mcpName: "McpNearAgent", + description: + "Build and deploy AI agents on NEAR blockchain with intent-based interactions", + features: [ + "On-chain agent execution", + "Intent routing", + "Smart contract calls", + ], + }, + { + name: "IQ Wiki", + mcpName: "McpIqWiki", + description: + "Access decentralized knowledge base for blockchain and crypto information", + features: [ + "Structured knowledge retrieval", + "Semantic search", + "Fact verification", + ], + }, + { + name: "Filesystem & Memory", + mcpName: "McpFilesystem / McpMemory", + description: + "Essential utilities for file operations and persistent memory management", + features: [ + "File read/write/search", + "Session persistence", + "Context retention", + ], + }, + ], + }, +]; const MCPServersSection = () => { + const [activeTab, setActiveTab] = useState("defi"); + const activeCategory = + categories.find((cat) => cat.id === activeTab) || categories[0]; + return ( - -
MCPServersSection
- +
+ {/* Vertical boundary lines */} +
+
+
+
+
+ +
+ {/* Section Header */} +
+ +
+
+

+ Model Context Protocol +

+

+ Pre-built MCP +
+ Collection +

+

+ Production-ready MCPs for blockchain, communication, + prediction markets, and more. Use them standalone or integrate + seamlessly with ADK-TS agents. +

+
+ + {/* Explore All MCPs button - beside section header */} + + + Explore All MCPs + + + +
+ + {/* Overview Stats */} +
+
+
18+
+
+ MCPs Available +
+
+
+
4
+
+ Categories +
+
+
+
+ 100% +
+
+ TypeScript +
+
+
+
MIT
+
+ Open Source +
+
+
+ +
+ + {/* Horizontal Tabs */} +
+
+ {categories.map((category, index) => ( + + ))} +
+
+ + {/* Tab Content */} + + + {/* Category Description */} +
+

+ {activeCategory.description} +

+
+ + {/* MCP Highlights Grid */} +
+ {activeCategory.highlights.map((highlight) => ( +
+
+
+ {highlight.mcpName} +
+

{highlight.name}

+

+ {highlight.description} +

+
+ +
+ {highlight.features.map((feature) => ( +
+
+
+ {feature} +
+
+ ))} +
+
+ ))} + + {/* Bot Animation - Only show for communication tab */} + {activeTab === "communication" && ( + +
+ + + MCP Communication + +
+ + )} +
+ + {/* Quick Integration Example */} +
+
+ Quick Integration +
+
+ 
+									{`import { AgentBuilder, ${activeCategory.highlights[0].mcpName}, getMcpTools } from "@iqai/adk";
+
+const mcp = new ${activeCategory.highlights[0].mcpName}();
+const agent = await AgentBuilder.create("my_agent")
+  .withTools(...getMcpTools(mcp))
+  .build();`}
+
+
+
+ + + + {/* Compatibility Footer */} + +
+
COMPATIBILITY
+
+
+ ADK-TS v2.0+ +
+
+ Standalone Usage +
+
+ Node.js 18+ +
+
+ TypeScript 5+ +
+
+
+ +
+
); }; - export default MCPServersSection; diff --git a/apps/docs/app/new-landing/_components/project-features.tsx b/apps/docs/app/new-landing/_components/project-features.tsx index 4aff8321..87160eda 100644 --- a/apps/docs/app/new-landing/_components/project-features.tsx +++ b/apps/docs/app/new-landing/_components/project-features.tsx @@ -60,7 +60,7 @@ const showcaseProjects = [ }, ]; -export default function ShowcaseSection() { +const ProjectFeaturesSection = () => { const sectionRef = useRef(null); const trackRef = useRef(null); const [maxScroll, setMaxScroll] = useState(0); @@ -237,7 +237,8 @@ export default function ShowcaseSection() {
); -} +}; +export default ProjectFeaturesSection; interface ShowcaseCardProps { project: (typeof showcaseProjects)[0]; From 9edd6b1a009298a1c687a46ee6ed7ddbd9fb19e8 Mon Sep 17 00:00:00 2001 From: timonwa Date: Tue, 31 Mar 2026 17:07:42 +0100 Subject: [PATCH 03/11] refactor: simplify animation logic in BuiltForDevelopersSection --- .../_components/built-for-developers.tsx | 108 +++++++++--------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/apps/docs/app/new-landing/_components/built-for-developers.tsx b/apps/docs/app/new-landing/_components/built-for-developers.tsx index 65f08861..56d654e6 100644 --- a/apps/docs/app/new-landing/_components/built-for-developers.tsx +++ b/apps/docs/app/new-landing/_components/built-for-developers.tsx @@ -256,10 +256,8 @@ const BuiltForDevelopersSection = () => { const [popupSelected, setPopupSelected] = useState(false); const panelRef = useRef(null); const codeRef = useRef(null); - const timerRef = useRef | undefined>(undefined); - const codeTimerRef = useRef | undefined>( - undefined, - ); + const timerRef = useRef>(undefined); + const codeTimerRef = useRef>(undefined); const stepRef = useRef(0); const hasPlayedRef = useRef(false); const codeHasPlayedRef = useRef(false); @@ -302,64 +300,65 @@ const BuiltForDevelopersSection = () => { const el = codeRef.current; if (!el) return; - let lineStep = 0; - - const typeLine = () => { - lineStep++; - if (lineStep > TOTAL_CODE_LINES) { - // Hold finished state, then reset and loop - codeTimerRef.current = setTimeout(() => { - lineStep = 0; - setVisibleLines(0); - setShowPopup(false); - setHighlightedOption(-1); - setPopupSelected(false); - codeTimerRef.current = setTimeout(typeLine, CODE_LINE_INTERVAL); - }, 2000); - return; - } - setVisibleLines(lineStep); - // When we reach the .withModel line: show partial ".with|", then popup - if (lineStep === POPUP_LINE + 1) { + let cancelled = false; + + const sleep = (ms: number) => + new Promise((resolve) => { + codeTimerRef.current = setTimeout(resolve, ms); + }); + + const runAnimation = async () => { + while (!cancelled) { + setVisibleLines(0); + setShowPopup(false); + setHighlightedOption(-1); setPopupSelected(false); - // Brief pause to show the partial ".with|" typing - codeTimerRef.current = setTimeout(() => { - setShowPopup(true); - setHighlightedOption(-1); - // Highlight options one by one, then select withTools - codeTimerRef.current = setTimeout(() => { - setHighlightedOption(0); // highlight withDescription - codeTimerRef.current = setTimeout(() => { - setHighlightedOption(1); // highlight withModel - codeTimerRef.current = setTimeout(() => { - setHighlightedOption(2); // highlight withTools — select this one - codeTimerRef.current = setTimeout(() => { - // "Select" withTools — close popup, show full line, resume - setShowPopup(false); - setHighlightedOption(-1); - setPopupSelected(true); - codeTimerRef.current = setTimeout( - typeLine, - CODE_LINE_INTERVAL, - ); - }, 800); - }, 600); - }, 600); - }, 500); - }, 400); - return; + + for (let line = 1; line <= TOTAL_CODE_LINES; line++) { + if (cancelled) return; + setVisibleLines(line); + + // IntelliSense sequence at the popup line + if (line === POPUP_LINE + 1) { + setPopupSelected(false); + await sleep(400); // show partial ".with|" + if (cancelled) return; + + setShowPopup(true); + setHighlightedOption(-1); + await sleep(500); + if (cancelled) return; + + setHighlightedOption(0); // withDescription + await sleep(600); + if (cancelled) return; + + setHighlightedOption(1); // withModel + await sleep(600); + if (cancelled) return; + + setHighlightedOption(2); // withTools — select + await sleep(800); + if (cancelled) return; + + setShowPopup(false); + setHighlightedOption(-1); + setPopupSelected(true); + } + + await sleep(CODE_LINE_INTERVAL); + } + + // Hold finished state before looping + await sleep(2000); } - codeTimerRef.current = setTimeout(typeLine, CODE_LINE_INTERVAL); }; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting && !codeHasPlayedRef.current) { codeHasPlayedRef.current = true; - lineStep = 0; - setVisibleLines(0); - setShowPopup(false); - codeTimerRef.current = setTimeout(typeLine, CODE_LINE_INTERVAL); + runAnimation(); } }, { threshold: 0.3 }, @@ -367,6 +366,7 @@ const BuiltForDevelopersSection = () => { observer.observe(el); return () => { + cancelled = true; observer.disconnect(); if (codeTimerRef.current) clearTimeout(codeTimerRef.current); }; From 17357533ca62fff132207c5ce37a71e438f5d8ad Mon Sep 17 00:00:00 2001 From: timonwa Date: Wed, 1 Apr 2026 10:58:03 +0100 Subject: [PATCH 04/11] refactor: update sections to use SectionWrapper and standardize styles --- .../_components/complete-stack.tsx | 618 +++++++++--------- .../new-landing/_components/get-started.tsx | 2 +- .../_components/interactive-simulations.tsx | 192 +++--- .../new-landing/_components/mcp-servers.tsx | 380 ++++++----- .../_components/project-features.tsx | 14 +- 5 files changed, 585 insertions(+), 621 deletions(-) diff --git a/apps/docs/app/new-landing/_components/complete-stack.tsx b/apps/docs/app/new-landing/_components/complete-stack.tsx index e801bd25..73db0085 100644 --- a/apps/docs/app/new-landing/_components/complete-stack.tsx +++ b/apps/docs/app/new-landing/_components/complete-stack.tsx @@ -1,390 +1,370 @@ +"use client"; + import { motion } from "motion/react"; import { Zap, Flame, FileStack, Rocket } from "lucide-react"; +import { SectionWrapper } from "./section-wrapper"; const CompleteStackSection = () => { return ( -
- {/* Vertical boundary lines */} -
-
-
-
+ + {/* Section Header */} +
+ Developer Platform +

+ The Complete +
+ Agent Stack +

+

+ Everything you need to build, test, and deploy AI agents. From CLI + tools to observability, all batteries included. +

-
- {/* Section Header */} -
- -

- Developer Platform -

-

- The Complete -
- Agent Stack -

-

- Everything you need to build, test, and deploy AI agents. From CLI - tools to observability, all batteries included. -

- -
- - {/* 2x2 Grid of Capabilities */} -
- {/* CLI Card */} - -

ADK CLI

- -

- Powerful command-line interface for scaffolding projects, managing - agents, running development servers, and deploying to production. -

- - {/* Stats grid */} -
-
-
-
-
-
- + {/* 2x2 Grid of Capabilities */} +
+ {/* CLI Card */} + +

ADK CLI

+ +

+ Powerful command-line interface for scaffolding projects, managing + agents, running development servers, and deploying to production. +

+ + {/* Stats grid */} +
+
+
+
+
+
+ +
+
+
+ {"<"}3s
-
-
- {"<"}3s -
-
- Project creation -
+
+ Project creation
+
-
-
-
-
-
- -
-
-
HMR
-
- Hot module reload -
+
+
+
+
+
+ +
+
+
HMR
+
+ Hot module reload
+
-
-
-
-
-
- -
-
-
12+
-
- Built-in templates -
+
+
+
+
+
+ +
+
+
12+
+
+ Built-in templates
+
-
-
-
-
-
- +
+
+
+
+
+ +
+
+
+ 1-click
-
-
- 1-click -
-
- Deploy command -
+
+ Deploy command
+
-
COMMANDS
+
COMMANDS
-
-
- $ adk init my-agent -
-
- $ adk dev -
-
- $ adk deploy --prod -
+
+
+ $ adk init my-agent
- - - {/* Sessions & Memory Card */} - -

- Sessions & Memory -

- -

- Built-in session management with persistent memory storage. - Multiple storage backends with unified API and automatic context - retention. -

- - {/* Stack visualization */} -
-
-
-
- - Redis - -
-
-
-
- 100ms avg latency, 10k+ sessions/sec +
+ $ adk dev +
+
+ $ adk deploy --prod +
+
+ + + {/* Sessions & Memory Card */} + +

+ Sessions & Memory +

+ +

+ Built-in session management with persistent memory storage. Multiple + storage backends with unified API and automatic context retention. +

+ + {/* Stack visualization */} +
+
+
+
+ Redis
+
+
+
+ 100ms avg latency, 10k+ sessions/sec
+
-
-
-
- - PostgreSQL - -
-
-
- Persistent storage, full-text search +
+
+
+ + PostgreSQL +
+
+ Persistent storage, full-text search +
+
-
-
-
- - In-Memory - -
-
-
- Zero-config local development +
+
+
+ + In-Memory +
+
+ Zero-config local development +
+
+ +
+ KEY FEATURES +
+
+
+
+ Automatic conversation threading +
+
+
+ Context window management +
+
+
+ Cross-agent memory sharing +
+
+ + + {/* Callbacks & Plugins Card */} + +

+ Callbacks & Plugin System +

+ +

+ Extensible plugin architecture with lifecycle hooks. Event-driven + callbacks for complete control over agent behavior and composable + middleware. +

+ + {/* Lifecycle flow */} +
- KEY FEATURES + LIFECYCLE HOOKS
-
-
-
- Automatic conversation threading -
-
-
- Context window management -
-
-
- Cross-agent memory sharing -
-
- - - {/* Callbacks & Plugins Card */} - -

- Callbacks & Plugin System -

- -

- Extensible plugin architecture with lifecycle hooks. Event-driven - callbacks for complete control over agent behavior and composable - middleware. -

- - {/* Lifecycle flow */} -
-
- LIFECYCLE HOOKS +
+
+
+
+ beforeExecute +
+
+ Validate & modify prompt +
-
-
-
-
- beforeExecute -
-
- Validate & modify prompt -
+
+
+
+ onToolCall
- -
-
-
- onToolCall -
-
- Intercept tool execution -
+
+ Intercept tool execution
+
-
-
-
- onStream -
-
- Process streaming chunks -
+
+
+
onStream
+
+ Process streaming chunks
+
-
-
-
- afterExecute -
-
- Log & trigger webhooks -
+
+
+
+ afterExecute
+
+ Log & trigger webhooks +
+
-
-
-
onError
-
- Handle failures gracefully -
+
+
+
onError
+
+ Handle failures gracefully
+
-
- BUILT-IN PLUGINS -
+
+ BUILT-IN PLUGINS +
-
-
- Rate Limiter +
+
+ Rate Limiter +
+
+ Logger +
+
+ Validator +
+
+ Cache +
+
+ + + {/* Observability Card */} + +

+ Observability +

+ +

+ Full OpenTelemetry integration for metrics, traces, and logs. + Monitor agent performance and debug execution flows in production. +

+ + {/* Checkmarks list */} +
+
+
+
-
- Logger +
+ Distributed tracing with context propagation
-
- Validator +
+ +
+
+
-
- Cache +
+ Custom metrics & dashboards
- - - {/* Observability Card */} - -

- Observability -

- -

- Full OpenTelemetry integration for metrics, traces, and logs. - Monitor agent performance and debug execution flows in production. -

- - {/* Checkmarks list */} -
-
-
-
-
-
- Distributed tracing with context propagation -
-
-
-
-
-
-
- Custom metrics & dashboards -
+
+
+
- -
-
-
-
-
- Structured logging with correlation IDs -
+
+ Structured logging with correlation IDs
+
-
- MONITORING PLATFORMS -
+
+ MONITORING PLATFORMS +
-
-
- Datadog -
-
- New Relic -
-
- Grafana -
-
- Jaeger -
+
+
+ Datadog +
+
+ New Relic +
+
+ Grafana +
+
+ Jaeger
- -
+
+
-
+ ); }; export default CompleteStackSection; diff --git a/apps/docs/app/new-landing/_components/get-started.tsx b/apps/docs/app/new-landing/_components/get-started.tsx index 37e78e02..42675f55 100644 --- a/apps/docs/app/new-landing/_components/get-started.tsx +++ b/apps/docs/app/new-landing/_components/get-started.tsx @@ -111,7 +111,7 @@ const GetStartedSection = () => {
{step.code.map((line) => (
{line.text || "\u00A0"} diff --git a/apps/docs/app/new-landing/_components/interactive-simulations.tsx b/apps/docs/app/new-landing/_components/interactive-simulations.tsx index 62582d33..5afdb132 100644 --- a/apps/docs/app/new-landing/_components/interactive-simulations.tsx +++ b/apps/docs/app/new-landing/_components/interactive-simulations.tsx @@ -1,5 +1,8 @@ +"use client"; + import { useState, useRef, useEffect } from "react"; import { motion } from "motion/react"; +import { SectionWrapper } from "./section-wrapper"; import { Play, RotateCw, Clock, Zap, Target } from "lucide-react"; interface DemoCardProps { @@ -107,7 +110,7 @@ function DemoCard({

{title}

-

{subtitle}

+

{subtitle}

@@ -122,7 +125,7 @@ function DemoCard({

Latency:
-
{latency}
+
{latency}
@@ -131,7 +134,7 @@ function DemoCard({
Tokens:
-
{tokens}
+
{tokens}
{accuracy && ( @@ -141,9 +144,7 @@ function DemoCard({
Accuracy:
-
- {accuracy} -
+
{accuracy}
)} @@ -996,7 +997,7 @@ function DemoCard({ type="button" onClick={startSimulation} disabled={isPlaying} - className="p-2 bg-[#1a1a1a] border border-white/20 hover:border-[#FF1A88] hover:bg-[#FF1A88]/10 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 rounded" + className="p-2 bg-[#1a1a1a] border border-white/20 hover:border-primary hover:bg-primary/10 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 rounded" > { return ( -
-
- {/* Section Header */} -
- -

- Real-World Implementations -

-

- Multi-Agent -
- Systems in Action -

-

- Experience live simulations of production-grade multi-agent - workflows. Watch how specialized agents collaborate to solve - complex real-world problems. -

- -
+ + {/* Section Header */} +
+ Real-World Implementations +

+ Multi-Agent +
+ Systems in Action +

+

+ Experience live simulations of production-grade multi-agent workflows. + Watch how specialized agents collaborate to solve complex real-world + problems. +

+
- {/* Demo Cards */} -
- - - + {/* Demo Cards */} +
+ + + - - - + + + - - - -
+ + +
-
+ ); }; export default InteractiveSimulationsSection; diff --git a/apps/docs/app/new-landing/_components/mcp-servers.tsx b/apps/docs/app/new-landing/_components/mcp-servers.tsx index b1b50495..ad514a7a 100644 --- a/apps/docs/app/new-landing/_components/mcp-servers.tsx +++ b/apps/docs/app/new-landing/_components/mcp-servers.tsx @@ -1,6 +1,9 @@ +"use client"; + import { useState } from "react"; import { motion, AnimatePresence } from "motion/react"; import { ArrowRight } from "lucide-react"; +import { SectionWrapper } from "./section-wrapper"; interface MCPHighlight { name: string; @@ -180,53 +183,42 @@ const MCPServersSection = () => { categories.find((cat) => cat.id === activeTab) || categories[0]; return ( -
- {/* Vertical boundary lines */} -
-
-
-
+ + {/* Section Header */} +
+ Model Context Protocol +

+ Pre-built MCP +
+ Collection +

+

+ Production-ready MCPs for blockchain, communication, prediction + markets, and more. Use them standalone or integrate seamlessly with + ADK-TS agents. +

-
- {/* Section Header */} -
- -
-
-

- Model Context Protocol -

-

- Pre-built MCP -
- Collection -

-

- Production-ready MCPs for blockchain, communication, - prediction markets, and more. Use them standalone or integrate - seamlessly with ADK-TS agents. -

-
- - {/* Explore All MCPs button - beside section header */} - - - Explore All MCPs - - - -
+
+ +
+ {/* Explore All MCPs button */} + + + Explore All MCPs + + + {/* Overview Stats */}
@@ -257,175 +249,175 @@ const MCPServersSection = () => {
- -
- - {/* Horizontal Tabs */} -
-
- {categories.map((category, index) => ( - - ))}
+ +
+ + {/* Horizontal Tabs */} +
+
+ {categories.map((category, index) => ( + + ))}
+
- {/* Tab Content */} - - - {/* Category Description */} -
-

- {activeCategory.description} -

-
+ {/* Tab Content */} + + + {/* Category Description */} +
+

+ {activeCategory.description} +

+
- {/* MCP Highlights Grid */} -
- {activeCategory.highlights.map((highlight) => ( -
-
-
- {highlight.mcpName} -
-

{highlight.name}

-

- {highlight.description} -

+ {/* MCP Highlights Grid */} +
+ {activeCategory.highlights.map((highlight) => ( +
+
+
+ {highlight.mcpName}
+

{highlight.name}

+

+ {highlight.description} +

+
-
- {highlight.features.map((feature) => ( -
-
-
- {feature} -
+
+ {highlight.features.map((feature) => ( +
+
+
+ {feature}
- ))} -
+
+ ))}
- ))} +
+ ))} - {/* Bot Animation - Only show for communication tab */} - {activeTab === "communication" && ( - -
-
+ - - MCP Communication - -
- - )} -
+ strokeDasharray="2 2" + /> + + + MCP Communication + +
+ + )} +
- {/* Quick Integration Example */} -
-
- Quick Integration -
-
- 
-									{`import { AgentBuilder, ${activeCategory.highlights[0].mcpName}, getMcpTools } from "@iqai/adk";
+					{/* Quick Integration Example */}
+					

+						

+							Quick Integration
+						

+						

+							
+								{`import { AgentBuilder, ${activeCategory.highlights[0].mcpName}, getMcpTools } from "@iqai/adk";
 
 const mcp = new ${activeCategory.highlights[0].mcpName}();
 const agent = await AgentBuilder.create("my_agent")
   .withTools(...getMcpTools(mcp))
   .build();`}
-								

-							

+
- - +
+ + - {/* Compatibility Footer */} - -
-
COMPATIBILITY
-
-
- ADK-TS v2.0+ -
-
- Standalone Usage -
-
- Node.js 18+ -
-
- TypeScript 5+ -
+ {/* Compatibility Footer */} + +
+
COMPATIBILITY
+
+
+ ADK-TS v2.0+ +
+
+ Standalone Usage +
+
+ Node.js 18+ +
+
+ TypeScript 5+
- -
-
+
+ + ); }; export default MCPServersSection; diff --git a/apps/docs/app/new-landing/_components/project-features.tsx b/apps/docs/app/new-landing/_components/project-features.tsx index 87160eda..3bddc8a5 100644 --- a/apps/docs/app/new-landing/_components/project-features.tsx +++ b/apps/docs/app/new-landing/_components/project-features.tsx @@ -1,3 +1,5 @@ +"use client"; + import { motion, useScroll, useTransform } from "motion/react"; import { useRef, useLayoutEffect, useState } from "react"; import { ArrowRight } from "lucide-react"; @@ -132,7 +134,7 @@ const ProjectFeaturesSection = () => { viewport={{ once: true }} >
-
+
Showcase @@ -179,7 +181,7 @@ const ProjectFeaturesSection = () => { {/* View All Showcases Button */} View All Showcases @@ -273,7 +275,7 @@ function ShowcaseCard({ project, index }: ShowcaseCardProps) { {/* Pink accent line */} -

+

{project.title}

@@ -313,7 +315,7 @@ function ShowcaseCard({ project, index }: ShowcaseCardProps) { {project.tags.map((tag) => ( {tag} @@ -337,7 +339,7 @@ function ShowcaseCard({ project, index }: ShowcaseCardProps) { {/* Hover effect border */}
- +
From aa40fcfb425a7008b1d23a305b8817f2c9c8e504 Mon Sep 17 00:00:00 2001 From: timonwa Date: Wed, 1 Apr 2026 13:02:15 +0100 Subject: [PATCH 05/11] feat: project feature section completed --- .../_components/project-features.tsx | 379 ++++++++---------- 1 file changed, 173 insertions(+), 206 deletions(-) diff --git a/apps/docs/app/new-landing/_components/project-features.tsx b/apps/docs/app/new-landing/_components/project-features.tsx index 3bddc8a5..d94d7390 100644 --- a/apps/docs/app/new-landing/_components/project-features.tsx +++ b/apps/docs/app/new-landing/_components/project-features.tsx @@ -2,69 +2,18 @@ import { motion, useScroll, useTransform } from "motion/react"; import { useRef, useLayoutEffect, useState } from "react"; -import { ArrowRight } from "lucide-react"; +import { ArrowRight, ExternalLink } from "lucide-react"; import Link from "next/link"; +import { SectionWrapper } from "./section-wrapper"; +import { projects } from "@/app/showcase/_schema"; +import Image from "next/image"; -const showcaseProjects = [ - { - id: 1, - title: "AI Research Assistant", - description: - "Autonomous research agent that searches the web, analyzes papers, and generates comprehensive reports.", - tags: ["Multi-Agent", "Web Search", "RAG"], - github: "research-ai/adk-assistant", - stats: { agents: 5 }, - }, - { - id: 2, - title: "Customer Support Bot", - description: - "Production-grade support agent with memory, ticket routing, and seamless handoff to human operators.", - tags: ["Production", "Memory", "Streaming"], - github: "supportco/adk-bot", - stats: { agents: 3 }, - }, - { - id: 3, - title: "Code Review Agent", - description: - "Multi-LLM code reviewer that analyzes PRs, suggests improvements, and enforces style guidelines.", - tags: ["Multi-LLM", "GitHub", "Tooling"], - github: "devtools/code-reviewer", - stats: { agents: 2 }, - }, - { - id: 4, - title: "Content Generator", - description: - "Workflow orchestrator that coordinates writers, editors, and SEO agents for content creation.", - tags: ["Workflow", "Orchestration", "SEO"], - github: "contentai/generator", - stats: { agents: 4 }, - }, - { - id: 5, - title: "Data Analysis Pipeline", - description: - "Agent system that fetches data, runs analysis, generates visualizations, and produces insights.", - tags: ["Analytics", "Visualization", "Tools"], - github: "dataai/pipeline", - stats: { agents: 6 }, - }, - { - id: 6, - title: "Email Automation", - description: - "Smart email agent with classification, prioritization, draft generation, and calendar integration.", - tags: ["Automation", "NLP", "Integration"], - github: "emailai/automation", - stats: { agents: 3 }, - }, -]; +const showcaseProjects = projects.slice(0, 6); // Show top 6 projects const ProjectFeaturesSection = () => { const sectionRef = useRef(null); const trackRef = useRef(null); + const rightColRef = useRef(null); const [maxScroll, setMaxScroll] = useState(0); // Scroll progress for the section @@ -78,13 +27,14 @@ const ProjectFeaturesSection = () => { useLayoutEffect(() => { const calculateDimensions = () => { - if (!sectionRef.current || !trackRef.current) return; + if (!sectionRef.current || !trackRef.current || !rightColRef.current) + return; const trackWidth = trackRef.current.scrollWidth; - const viewportWidth = window.innerWidth; + const visibleWidth = rightColRef.current.offsetWidth; - // Total horizontal movement required to show all cards - const horizontalDistance = trackWidth - viewportWidth; + // Total horizontal movement = total track minus visible area + const horizontalDistance = trackWidth - visibleWidth; // Set the section height = viewport height + horizontal distance // This creates scroll space for the horizontal movement @@ -110,134 +60,149 @@ const ProjectFeaturesSection = () => { }, []); return ( -
-
- {/* Vertical boundary lines */} -
-
-
-
-
+ + {/* Vertical boundary lines — span full section height */} +
+
+
+
+
-
-
- {/* LEFT COLUMN (static) */} -
- -
-
- - Showcase - -
-

- Built with -
- ADK-TS -

-

- Real-world projects and production systems powered by the - Agent Development Kit. -

+ {/* Mobile header — shown above sticky on small screens */} +
+
+ Community Projects +

Built with ADK-TS

+

+ Community-built projects and hackathon winners powered by ADK-TS. +

+
+ + View All Showcases + + +
-
-
- - 50+ - - - Projects - -
-
-
- - 15k+ - - - Stars - -
-
-
- - 200+ - - - Contributors - +
+
+
+
+ {/* LEFT COLUMN — hidden on small screens (shown above sticky) */} +
+ + {/* Section header */} +
+ Community Projects +

Built with ADK-TS

+

+ Community-built projects and hackathon winners powered by + ADK-TS. +

+ +
+
+ + 90+ + + Projects +
+
+
+ + 90+ + + Stars +
+
+
+ + 100+ + + + Contributors + +
+
-
- {/* View All Showcases Button */} - - View All Showcases - - - -
+ {/* View All Showcases Button */} + + View All Showcases + + + +
- {/* RIGHT COLUMN (horizontal scroll) */} -
- - {showcaseProjects.map((project, index) => ( - - ))} - +
- {/* Scroll indicator */} - - SCROLL DOWN - + {showcaseProjects.map((project, index) => ( + + ))} + + + {/* Scroll indicator — static, below the right section */} + +
+ SCROLL DOWN + + {" "} + + +
- +
-
+ ); }; export default ProjectFeaturesSection; @@ -258,19 +223,24 @@ function ShowcaseCard({ project, index }: ShowcaseCardProps) { >
{/* Card header with gradient effect */} -
- {/* Animated grid pattern */} -
-
+
+ {/* Cover image */} +
+ {project.image ? ( + {project.title} + ) : ( +
+
+ {project.title.substring(0, 2).toUpperCase()} +
+
+ )}
{/* Pink accent line */} @@ -283,31 +253,22 @@ function ShowcaseCard({ project, index }: ShowcaseCardProps) { style={{ transformOrigin: "left" }} /> - {/* Stats overlay */} -
-
- - {project.stats.agents} agents - -
-
- {/* Project number */}
- - {String(project.id).padStart(2, "0")} + + {String(index + 1).padStart(2, "0")}
{/* Card content */}
-

+

{project.title}

-

- {project.description} +

+ {project.description.slice(0, 100)}...

{/* Tags */} @@ -315,15 +276,20 @@ function ShowcaseCard({ project, index }: ShowcaseCardProps) { {project.tags.map((tag) => ( {tag} ))}
- {/* GitHub link */} -
+ {/* View code link */} + - {project.github} -
+ View Code + +
{/* Hover effect border */} From 5994f40c548f98131d97c49071414d1562652848 Mon Sep 17 00:00:00 2001 From: timonwa Date: Wed, 1 Apr 2026 15:05:38 +0100 Subject: [PATCH 06/11] style: completed simulation section --- .../_components/interactive-simulations.tsx | 78 +++++++++---------- apps/docs/app/new-landing/landing.css | 2 +- 2 files changed, 38 insertions(+), 42 deletions(-) diff --git a/apps/docs/app/new-landing/_components/interactive-simulations.tsx b/apps/docs/app/new-landing/_components/interactive-simulations.tsx index 5afdb132..287845e4 100644 --- a/apps/docs/app/new-landing/_components/interactive-simulations.tsx +++ b/apps/docs/app/new-landing/_components/interactive-simulations.tsx @@ -105,46 +105,48 @@ function DemoCard({ }; return ( -
+
{/* Header Section */} -
-
-

{title}

-

{subtitle}

+
+
+

{title}

+

{subtitle}

-

+

{description}

{/* Metrics */} -
+
- +
-
+
Latency:
-
{latency}
+
{latency}
- +
-
+
Tokens:
-
{tokens}
+
{tokens}
{accuracy && (
- +
-
+
Accuracy:
-
{accuracy}
+
+ {accuracy} +
)} @@ -152,11 +154,11 @@ function DemoCard({
{/* Body Section - Two Columns */} -
+
{/* LEFT - Node Graph Visualization */}
+
{/* Window Header - macOS Style */}
@@ -988,9 +990,7 @@ function DemoCard({
-
- agent-output.log -
+
agent-output.log
{/* Control Buttons - Relocated here */}
@@ -83,7 +79,7 @@ const CompleteStackSection = () => {
12+
-
+
Built-in templates
@@ -101,15 +97,13 @@ const CompleteStackSection = () => {
1-click
-
- Deploy command -
+
Deploy command
-
COMMANDS
+
COMMANDS
@@ -136,7 +130,7 @@ const CompleteStackSection = () => { Sessions & Memory -

+

Built-in session management with persistent memory storage. Multiple storage backends with unified API and automatic context retention.

@@ -150,7 +144,7 @@ const CompleteStackSection = () => {
-
+
100ms avg latency, 10k+ sessions/sec
@@ -163,7 +157,7 @@ const CompleteStackSection = () => {
-
+
Persistent storage, full-text search
@@ -176,26 +170,24 @@ const CompleteStackSection = () => {
-
+
Zero-config local development
-
- KEY FEATURES -
+
KEY FEATURES
-
+
Automatic conversation threading
-
+
Context window management
-
+
Cross-agent memory sharing
@@ -215,7 +207,7 @@ const CompleteStackSection = () => { Callbacks & Plugin System -

+

Extensible plugin architecture with lifecycle hooks. Event-driven callbacks for complete control over agent behavior and composable middleware. @@ -223,74 +215,64 @@ const CompleteStackSection = () => { {/* Lifecycle flow */}

-
- LIFECYCLE HOOKS -
+
LIFECYCLE HOOKS
-
- beforeExecute -
-
+
beforeExecute
+
Validate & modify prompt
-
- onToolCall -
-
+
onToolCall
+
Intercept tool execution
-
onStream
-
+
onStream
+
Process streaming chunks
-
- afterExecute -
-
+
afterExecute
+
Log & trigger webhooks
-
onError
-
+
onError
+
Handle failures gracefully
-
- BUILT-IN PLUGINS -
+
BUILT-IN PLUGINS
-
+
Rate Limiter
-
+
Logger
-
+
Validator
-
+
Cache
@@ -309,7 +291,7 @@ const CompleteStackSection = () => { Observability -

+

Full OpenTelemetry integration for metrics, traces, and logs. Monitor agent performance and debug execution flows in production.

@@ -320,7 +302,7 @@ const CompleteStackSection = () => {
-
+
Distributed tracing with context propagation
@@ -329,7 +311,7 @@ const CompleteStackSection = () => {
-
+
Custom metrics & dashboards
@@ -338,27 +320,25 @@ const CompleteStackSection = () => {
-
+
Structured logging with correlation IDs
-
- MONITORING PLATFORMS -
+
MONITORING PLATFORMS
-
+
Datadog
-
+
New Relic
-
+
Grafana
-
+
Jaeger
diff --git a/apps/docs/app/new-landing/_components/mcp-servers.tsx b/apps/docs/app/new-landing/_components/mcp-servers.tsx index ad514a7a..4a121102 100644 --- a/apps/docs/app/new-landing/_components/mcp-servers.tsx +++ b/apps/docs/app/new-landing/_components/mcp-servers.tsx @@ -223,30 +223,20 @@ const MCPServersSection = () => { {/* Overview Stats */}
-
18+
-
- MCPs Available -
+
18+
+
MCPs Available
-
4
-
- Categories -
+
4
+
Categories
-
- 100% -
-
- TypeScript -
+
100%
+
TypeScript
-
MIT
-
- Open Source -
+
MIT
+
Open Source
@@ -261,7 +251,7 @@ const MCPServersSection = () => { type="button" key={category.id} onClick={() => setActiveTab(category.id)} - className={`px-6 py-3 font-mono text-sm whitespace-nowrap border transition-all duration-300 ${ + className={`px-6 py-3 text-sm whitespace-nowrap border transition-all duration-300 ${ activeTab === category.id ? "border-primary border-b-transparent bg-primary/20 text-primary relative z-10 shadow-[0_0_20px_rgba(255,26,136,0.3)]" : "border-white/10 border-b-white/10 bg-black/20 text-white/60 hover:border-white/20 hover:text-white/80 hover:bg-black/30" @@ -285,7 +275,7 @@ const MCPServersSection = () => { > {/* Category Description */}
-

+

{activeCategory.description}

@@ -298,11 +288,11 @@ const MCPServersSection = () => { className="border border-white/10 bg-black/60 p-6 hover:border-primary/30 hover:bg-black/80 transition-all duration-300" >
-
+
{highlight.mcpName}
-

{highlight.name}

-

+

{highlight.name}

+

{highlight.description}

@@ -311,9 +301,7 @@ const MCPServersSection = () => { {highlight.features.map((feature) => (
-
- {feature} -
+
{feature}
))}
@@ -364,7 +352,7 @@ const MCPServersSection = () => { strokeDasharray="2 2" /> - + MCP Communication
@@ -374,7 +362,7 @@ const MCPServersSection = () => { {/* Quick Integration Example */}
-
+
Quick Integration
@@ -400,18 +388,18 @@ const agent = await AgentBuilder.create("my_agent") className="mt-16 pt-8 border-t border-white/5" >
-
COMPATIBILITY
+
COMPATIBILITY
-
+
ADK-TS v2.0+
-
+
Standalone Usage
-
+
Node.js 18+
-
+
TypeScript 5+
From 987e5c35266da24405032fe38f304c5f146f7bbc Mon Sep 17 00:00:00 2001 From: timonwa Date: Wed, 1 Apr 2026 15:27:10 +0100 Subject: [PATCH 08/11] docs: update landing page copy to match updated design doc Update all section copy across the landing page to match the latest design document. Changes include hero badge/title/subtitle/CTAs, feature descriptions, CLI commands, MCP stats, simulation descriptions, and model name consistency. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../_components/built-for-developers.tsx | 2 +- .../_components/complete-stack.tsx | 49 +++++++++---------- .../new-landing/_components/get-started.tsx | 2 +- .../docs/app/new-landing/_components/hero.tsx | 18 +++---- .../_components/interactive-simulations.tsx | 4 +- .../new-landing/_components/mcp-servers.tsx | 24 ++++----- .../_components/project-features.tsx | 4 +- .../app/new-landing/_components/why-adkts.tsx | 12 ++--- 8 files changed, 55 insertions(+), 60 deletions(-) diff --git a/apps/docs/app/new-landing/_components/built-for-developers.tsx b/apps/docs/app/new-landing/_components/built-for-developers.tsx index 56d654e6..b611687d 100644 --- a/apps/docs/app/new-landing/_components/built-for-developers.tsx +++ b/apps/docs/app/new-landing/_components/built-for-developers.tsx @@ -32,7 +32,7 @@ const dxHighlights = [ }, { icon: LayoutDashboard, - title: "7 Starter Templates", + title: "7+ Starter Templates", description: "RAG, chat, workflow & more out of the box", }, { diff --git a/apps/docs/app/new-landing/_components/complete-stack.tsx b/apps/docs/app/new-landing/_components/complete-stack.tsx index a79187e6..3a3b57aa 100644 --- a/apps/docs/app/new-landing/_components/complete-stack.tsx +++ b/apps/docs/app/new-landing/_components/complete-stack.tsx @@ -10,14 +10,10 @@ const CompleteStackSection = () => { {/* Section Header */}
Developer Platform -

- The Complete -
- Agent Stack -

+

The Complete ADK-TS Stack

- Everything you need to build, test, and deploy AI agents. From CLI - tools to observability, all batteries included. + Not just a framework, but a complete development experience. Every + layer you need, from project scaffolding to production observability.

@@ -31,11 +27,12 @@ const CompleteStackSection = () => { transition={{ duration: 0.8, delay: 0 }} className="relative p-12 border-b lg:border-r border-white/5 bg-black/20 hover:bg-black/40 transition-colors duration-500" > -

ADK CLI

+

ADK-TS CLI

- Powerful command-line interface for scaffolding projects, managing - agents, running development servers, and deploying to production. + The official CLI for ADK-TS. Scaffold projects from templates, run + agents with hot-reload, and launch a web UI for testing — all in one + tool.

{/* Stats grid */} @@ -51,7 +48,7 @@ const CompleteStackSection = () => {
{"<"}3s
-
Project creation
+
Project ready
@@ -65,7 +62,7 @@ const CompleteStackSection = () => {
HMR
-
Hot module reload
+
Hot reload
@@ -78,10 +75,8 @@ const CompleteStackSection = () => {
-
12+
-
- Built-in templates -
+
7+
+
Starter templates
@@ -107,13 +102,13 @@ const CompleteStackSection = () => {
- $ adk init my-agent + $ adk new my-agent
- $ adk dev + $ adk run
- $ adk deploy --prod + $ adk web
@@ -131,8 +126,9 @@ const CompleteStackSection = () => {

- Built-in session management with persistent memory storage. Multiple - storage backends with unified API and automatic context retention. + Persistent session state across every conversation. Multiple storage + backends with a unified interface and automatic conversation + threading.

{/* Stack visualization */} @@ -208,9 +204,9 @@ const CompleteStackSection = () => {

- Extensible plugin architecture with lifecycle hooks. Event-driven - callbacks for complete control over agent behavior and composable - middleware. + Orchestrate complex agents with a built-in workflow engine and + plugin system. Intercept events, manage long-running tasks, and + extend agent behavior with ease.

{/* Lifecycle flow */} @@ -292,8 +288,9 @@ const CompleteStackSection = () => {

- Full OpenTelemetry integration for metrics, traces, and logs. - Monitor agent performance and debug execution flows in production. + Production-grade observability and systematic evaluation. Monitor + performance with OpenTelemetry and test agent behavior with built-in + evaluation suites.

{/* Checkmarks list */} diff --git a/apps/docs/app/new-landing/_components/get-started.tsx b/apps/docs/app/new-landing/_components/get-started.tsx index 3729bb97..683073c5 100644 --- a/apps/docs/app/new-landing/_components/get-started.tsx +++ b/apps/docs/app/new-landing/_components/get-started.tsx @@ -19,7 +19,7 @@ const steps = [ labelColor: "text-[#4ADE80]", title: "Configure Your Agent", description: - "Choose your LLM provider and model, then add instructions, tools, and sub-agents.", + "Choose any supported model and add instructions, tools, or sub-agents.", code: [ { text: "import { AgentBuilder, GoogleSearchTool,", diff --git a/apps/docs/app/new-landing/_components/hero.tsx b/apps/docs/app/new-landing/_components/hero.tsx index 542ae329..223c75c8 100644 --- a/apps/docs/app/new-landing/_components/hero.tsx +++ b/apps/docs/app/new-landing/_components/hero.tsx @@ -31,14 +31,14 @@ function ClipboardCopyButton({ text }: { text: string }) { const cliCommand = "npx @iqai/adk-cli new"; const codeSnippet = dedent` - const workflow = AgentBuilder - .asSequential([researchAgent,analysisAgent]) - .withTools([GoogleSearch, DataProcessor]) - .withMemory(vectorMemoryService); - - const result = await workflow.ask( - "Analyze market trends in AI" - ); + const { runner } = await AgentBuilder + .create("research-pipeline") + .withModel("gemini-2.5-flash") + .asSequential([researchAgent, analysisAgent, summaryAgent]) + .withInstruction("Orchestrate research, analysis, and synthesis") + .build(); + + const result = await runner.ask("Analyze AI market trends"); `; export function Hero() { @@ -131,7 +131,7 @@ export function Hero() {
- multi-agent-system.ts + agent-pipeline.ts
diff --git a/apps/docs/app/new-landing/_components/interactive-simulations.tsx b/apps/docs/app/new-landing/_components/interactive-simulations.tsx index 287845e4..c006dcf8 100644 --- a/apps/docs/app/new-landing/_components/interactive-simulations.tsx +++ b/apps/docs/app/new-landing/_components/interactive-simulations.tsx @@ -50,7 +50,7 @@ function DemoCard({ const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false }); return [ `[${timestamp}] 🚀 Initializing ${agent.name} agent...`, - `[${timestamp}] ⚙️ Loading model: gpt-4-turbo`, + `[${timestamp}] ⚙️ Loading model: gemini-2.5-flash`, `[${timestamp}] 📥 Processing input: ${agent.label}`, `[${timestamp}] 🔄 Executing task...`, `[${timestamp}] ✅ ${agent.name} completed successfully`, @@ -1061,7 +1061,7 @@ const InteractiveSimulationsSection = () => { {/* Section Header */}
Interactive Simulations -

Multi-Agent Systems in Actionn

+

See Multi-Agent Execution in Action

Interactive simulations of real multi-agent execution flows. See how agents coordinate, call tools, and generate structured outputs step by diff --git a/apps/docs/app/new-landing/_components/mcp-servers.tsx b/apps/docs/app/new-landing/_components/mcp-servers.tsx index 4a121102..02893939 100644 --- a/apps/docs/app/new-landing/_components/mcp-servers.tsx +++ b/apps/docs/app/new-landing/_components/mcp-servers.tsx @@ -186,16 +186,12 @@ const MCPServersSection = () => { {/* Section Header */}

- Model Context Protocol -

- Pre-built MCP -
- Collection -

+ Model Context Protocol (MCP) +

Pre-Built MCP Servers

- Production-ready MCPs for blockchain, communication, prediction - markets, and more. Use them standalone or integrate seamlessly with - ADK-TS agents. + Production-ready MCP servers built by IQ AI for DeFi, market data, + messaging, prediction markets, and more. Use them with ADK-TS, other + agent frameworks, or any MCP-compatible runtime.

@@ -215,7 +211,7 @@ const MCPServersSection = () => { className="group inline-flex items-center gap-3 px-6 py-3 border-2 border-primary bg-primary/10 hover:bg-primary/20 transition-all duration-300 whitespace-nowrap flex-shrink-0" > - Explore All MCPs + Browse All MCP Servers @@ -223,8 +219,8 @@ const MCPServersSection = () => { {/* Overview Stats */}
-
18+
-
MCPs Available
+
20+
+
MCP Servers
4
@@ -232,11 +228,11 @@ const MCPServersSection = () => {
100%
-
TypeScript
+
TypeScript First
MIT
-
Open Source
+
MIT Licensed
diff --git a/apps/docs/app/new-landing/_components/project-features.tsx b/apps/docs/app/new-landing/_components/project-features.tsx index d94d7390..d7634879 100644 --- a/apps/docs/app/new-landing/_components/project-features.tsx +++ b/apps/docs/app/new-landing/_components/project-features.tsx @@ -113,7 +113,9 @@ const ProjectFeaturesSection = () => { 90+ - Projects + + Community Projects +
diff --git a/apps/docs/app/new-landing/_components/why-adkts.tsx b/apps/docs/app/new-landing/_components/why-adkts.tsx index 8cf7a385..51120626 100644 --- a/apps/docs/app/new-landing/_components/why-adkts.tsx +++ b/apps/docs/app/new-landing/_components/why-adkts.tsx @@ -12,7 +12,7 @@ const features = [ label: "AgentBuilder API", title: "AgentBuilder API", description: - "Build single-prompt agents and full multi-team orchestrators with the same fluent AgentBuilder interface, without any rewrites or boilerplate changes.", + "Build a single-prompt agent or a full multi-team orchestrator using the same fluent AgentBuilder interface — no rewrites, no boilerplate changes.", image: "/landing-page/agentbuilder.svg", }, { @@ -21,7 +21,7 @@ const features = [ label: "Multi-LLM Support", title: "Multi-LLM Support", description: - "Seamlessly switch between any LLM provider by changing one string, while your agent logic, tools, and memory remain unchanged.", + "Switch between any LLM provider by changing one string. Your agent logic, tools, and memory stay exactly the same.", image: "/landing-page/multi-llm-support.svg", }, { @@ -30,7 +30,7 @@ const features = [ label: "Production-Ready Architecture", title: "Production-Ready Architecture", description: - "Deploy to Node.js, serverless, or containers without changing your agent code, with sessions, memory, streaming, and Zod-typed outputs all built in.", + "Sessions, memory, streaming, and Zod-typed outputs are all built in. Deploy to Node.js, serverless, or containers without changing a line of your agent code.", image: "/landing-page/production-ready.svg", }, { @@ -39,7 +39,7 @@ const features = [ label: "Advanced Tooling", title: "Advanced Tooling", description: - "Turn any function into a typed agent tool with automatic schema generation via ADK-TS, and connect to 20+ built-in MCP servers or any external API from a single unified tool registry.", + "Turn any function into a typed agent tool — ADK-TS generates the schema automatically. Connect to 20+ built-in MCP servers or any external API from the same tool registry.", image: "/landing-page/advanced-tooling.svg", }, { @@ -48,7 +48,7 @@ const features = [ label: "Multi-Agent Workflows", title: "Multi-Agent Workflows", description: - "Run tasks sequentially, in parallel, or in loops using the same AgentBuilder API, with four execution patterns: sequential pipelines, parallel fan-outs, iterative loops, and custom DAGs.", + "Run tasks sequentially, in parallel, or in loops — all using the same AgentBuilder API. Four execution patterns: sequential pipelines, parallel fan-outs, iterative loops, and custom DAGs.", image: "/landing-page/multi-agent-workflows.svg", }, { @@ -57,7 +57,7 @@ const features = [ label: "Workflow Control", title: "Workflow Control", description: - "Pause and resume agent workflows at any step with built-in suspend/resume primitives, enabling human-in-the-loop systems, approval gates, and long-running pipelines using persistent state snapshots and an agent scheduler for cron-style execution.", + "Pause and resume agent workflows at any step with built-in suspend/resume primitives. Build human-in-the-loop systems, approval gates, and long-running pipelines — with persistent state snapshots and an agent scheduler for cron-style execution.", image: "/landing-page/workflow-control.svg", }, ]; From 92fc19c1fcb66e8f0292a38078662fa96c6ec5d0 Mon Sep 17 00:00:00 2001 From: timonwa Date: Wed, 1 Apr 2026 15:39:34 +0100 Subject: [PATCH 09/11] feat: update hero section layout and improve code snippet presentation --- .../docs/app/new-landing/_components/hero.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/docs/app/new-landing/_components/hero.tsx b/apps/docs/app/new-landing/_components/hero.tsx index 223c75c8..3033d0cb 100644 --- a/apps/docs/app/new-landing/_components/hero.tsx +++ b/apps/docs/app/new-landing/_components/hero.tsx @@ -31,14 +31,14 @@ function ClipboardCopyButton({ text }: { text: string }) { const cliCommand = "npx @iqai/adk-cli new"; const codeSnippet = dedent` - const { runner } = await AgentBuilder - .create("research-pipeline") - .withModel("gemini-2.5-flash") - .asSequential([researchAgent, analysisAgent, summaryAgent]) - .withInstruction("Orchestrate research, analysis, and synthesis") - .build(); - - const result = await runner.ask("Analyze AI market trends"); +const { runner } = await AgentBuilder + .create("research-pipeline") + .withModel("gemini-2.5-flash") + .asSequential([researcher, analyst, summarizer]) + .withInstruction("Research, analyze and summarize") + .build(); + +const result = await runner.ask("AI market trends"); `; export function Hero() { @@ -126,7 +126,7 @@ export function Hero() { initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.4 }} - className="w-full max-w-117.5 mx-auto lg:mx-0 lg:ml-auto" + className="w-full max-w-120 mx-auto lg:mx-0 lg:ml-auto" >
@@ -135,7 +135,7 @@ export function Hero() {
-
+
From 7c5ed43a46655c539c88dc1c0edae1c1d22408e5 Mon Sep 17 00:00:00 2001 From: timonwa Date: Wed, 1 Apr 2026 16:27:40 +0100 Subject: [PATCH 10/11] fix: update showcase links and improve project features section - Changed showcase link from "/showcases" to "/showcase" in project features component. - Updated star count from "90+" to "115+" in project features section. - Added a new animated dot in the advanced-tooling SVG for enhanced visual effects. - Added right arc to the advanced-tooling SVG for improved design. - Corrected numbering in the examples README for clarity. - Updated links to the Contributing Guide from "CONTRIBUTION.md" to "CONTRIBUTING.md" in multiple README files for consistency. --- README.md | 2 +- apps/adk-web/README.md | 2 +- apps/docs/README.md | 4 +- apps/docs/app/(home)/_components/footer.tsx | 4 +- apps/docs/app/layout.config.tsx | 4 +- .../_components/complete-stack.tsx | 116 +++++++++++------- apps/docs/app/new-landing/_components/cta.tsx | 6 +- .../new-landing/_components/footer.data.tsx | 4 +- .../new-landing/_components/get-started.tsx | 17 ++- .../_components/interactive-simulations.tsx | 12 +- .../new-landing/_components/mcp-servers.tsx | 11 +- .../app/new-landing/_components/navbar.tsx | 6 +- .../_components/project-features.tsx | 6 +- .../public/landing-page/advanced-tooling.svg | 8 ++ apps/examples/README.md | 8 +- packages/adk-cli/README.md | 2 +- packages/adk/README.md | 2 +- 17 files changed, 136 insertions(+), 78 deletions(-) diff --git a/README.md b/README.md index c9aae3f7..17cb6208 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,7 @@ pnpm start ## 🤝 Contributing -All contributions are welcome! Please check out our [Contributing Guide](CONTRIBUTION.md) for details on how to get started. +All contributions are welcome! Please check out our [Contributing Guide](CONTRIBUTING.md) for details on how to get started. ## 🌍 Community diff --git a/apps/adk-web/README.md b/apps/adk-web/README.md index 74691c59..fda29720 100644 --- a/apps/adk-web/README.md +++ b/apps/adk-web/README.md @@ -259,7 +259,7 @@ We welcome various types of contributions: - **[Check existing issues](https://github.com/IQAIcom/adk-ts/issues)** for similar questions or problems - **[Ask in discussions](https://github.com/IQAIcom/adk-ts/discussions)** for clarification on development topics -- **[Contributing Guide](../../CONTRIBUTION.md)** - Main project contribution guidelines +- **[Contributing Guide](../../CONTRIBUTING.md)** - Main project contribution guidelines --- diff --git a/apps/docs/README.md b/apps/docs/README.md index 27c3592c..3035a578 100644 --- a/apps/docs/README.md +++ b/apps/docs/README.md @@ -135,7 +135,7 @@ We welcome various types of contributions to improve the documentation: - **[Check existing issues](https://github.com/IQAIcom/adk-ts/issues)** for similar questions or problems - **[Ask in discussions](https://github.com/IQAIcom/adk-ts/discussions)** for clarification on documentation topics -For more detailed contribution guidelines, see the main project's [Contributing Guide](../../CONTRIBUTION.md). +For more detailed contribution guidelines, see the main project's [Contributing Guide](../../CONTRIBUTING.md). ## 📚 Resources for Contributors @@ -149,7 +149,7 @@ For more detailed contribution guidelines, see the main project's [Contributing - **[ADK-TS Repository](https://github.com/IQAIcom/adk-ts)** - Main framework repository - **[Live Documentation](https://adk.iqai.com)** - Published documentation site -- **[Contributing Guide](../../CONTRIBUTION.md)** - General project contribution guidelines +- **[Contributing Guide](../../CONTRIBUTING.md)** - General project contribution guidelines - **[Examples](../../apps/examples/)** - Code examples and tutorials ### Writing & Style Resources diff --git a/apps/docs/app/(home)/_components/footer.tsx b/apps/docs/app/(home)/_components/footer.tsx index 7b105754..657c0fd9 100644 --- a/apps/docs/app/(home)/_components/footer.tsx +++ b/apps/docs/app/(home)/_components/footer.tsx @@ -91,7 +91,7 @@ const developerLinks = [ ]; const resourceLinks = [ - { href: "https://blog.iqai.com/", text: "Blog", external: true }, + { href: "https://blog.iqai.com/tag/dev//", text: "Blog", external: true }, { href: "/showcase", text: "Showcase" }, { href: "https://github.com/IQAIcom/adk-ts-samples", @@ -112,7 +112,7 @@ const supportLinks = [ external: true, }, { - href: "https://github.com/IQAIcom/adk-ts/blob/main/CONTRIBUTION.md", + href: "https://github.com/IQAIcom/adk-ts/blob/main/CONTRIBUTING.md", text: "Contributing", external: true, }, diff --git a/apps/docs/app/layout.config.tsx b/apps/docs/app/layout.config.tsx index 02907bae..f36a00ce 100644 --- a/apps/docs/app/layout.config.tsx +++ b/apps/docs/app/layout.config.tsx @@ -30,7 +30,7 @@ const baseNavLinks = [ }, { text: "Blog", - url: "https://blog.iqai.com/", + url: "https://blog.iqai.com/tag/dev//", icon: , external: true, }, @@ -78,7 +78,7 @@ const docsResourceMenuItems = [ ...resourceMenuItems, { text: "Blog", - url: "https://blog.iqai.com/", + url: "https://blog.iqai.com/tag/dev//", icon: , external: true, }, diff --git a/apps/docs/app/new-landing/_components/complete-stack.tsx b/apps/docs/app/new-landing/_components/complete-stack.tsx index 3a3b57aa..5a3e087c 100644 --- a/apps/docs/app/new-landing/_components/complete-stack.tsx +++ b/apps/docs/app/new-landing/_components/complete-stack.tsx @@ -58,11 +58,11 @@ const CompleteStackSection = () => {
- +
-
HMR
-
Hot reload
+
7+
+
Starter templates
@@ -72,11 +72,11 @@ const CompleteStackSection = () => {
- +
-
7+
-
Starter templates
+
HMR
+
Hot reload
@@ -89,10 +89,8 @@ const CompleteStackSection = () => {
-
- 1-click -
-
Deploy command
+
Web
+
Browser UI
@@ -110,6 +108,9 @@ const CompleteStackSection = () => {
$ adk web
+
+ $ adk serve +
@@ -134,40 +135,42 @@ const CompleteStackSection = () => { {/* Stack visualization */}
-
+
- Redis + + In-Memory +
- 100ms avg latency, 10k+ sessions/sec + Zero-config local development, no persistence needed.
-
+
- PostgreSQL + PostgreSQL/SQLite
- Persistent storage, full-text search + Persistent sessions with Drizzle ORM and full-text search.
-
+
- In-Memory + Vertex AI
- Zero-config local development + Google Cloud-native session storage for production scale.
@@ -187,10 +190,18 @@ const CompleteStackSection = () => {
Cross-agent memory sharing
+
+
+ Vertex AI RAG memory integration +
+
+
+ Unified Memory API (combine multiple sources) +
- {/* Callbacks & Plugins Card */} + {/* Workflows & Extensibility Card */} { style={{ userSelect: "text" }} >

- Callbacks & Plugin System + Workflows & Extensibility

@@ -216,41 +227,49 @@ const CompleteStackSection = () => {

-
beforeExecute
+
beforeModelCallback
- Validate & modify prompt + Inspect and transform prompts before model execution
-
onToolCall
+
beforeToolCallback
- Intercept tool execution + Observe or override tool execution
-
onStream
+
afterModelCallback
- Process streaming chunks + Post-process and validate model responses
-
afterExecute
+
afterToolCallback
- Log & trigger webhooks + Capture and transform tool results
-
onError
+
beforeAgentCallback
- Handle failures gracefully + Intercept agent execution before any step +
+
+ +
+
+
afterAgentCallback
+
+ Inspect final agent output and execution trace
@@ -260,21 +279,21 @@ const CompleteStackSection = () => {
- Rate Limiter + ModelFallbackPlugin
- Logger + LangfusePlugin
- Validator + ReflectRetryToolPlugin
- Cache + ToolFilterPlugin
- {/* Observability Card */} + {/* Reliability & Observability Card */} { style={{ userSelect: "text" }} >

- Observability + Reliability & Observability

@@ -296,29 +315,29 @@ const CompleteStackSection = () => { {/* Checkmarks list */}

-
+
- Distributed tracing with context propagation + Distributed tracing (OTLP) with automatic context propagation
-
-
+
+
- Custom metrics & dashboards + ADK-TS semantic spans for agents, tools, and models
-
-
+
+
- Structured logging with correlation IDs + Structured logs correlated with traces and requests
@@ -327,10 +346,10 @@ const CompleteStackSection = () => {
- Datadog + Langfuse (built-in)
- New Relic + Datadog
Grafana @@ -338,6 +357,9 @@ const CompleteStackSection = () => {
Jaeger
+
+ New Relic +
diff --git a/apps/docs/app/new-landing/_components/cta.tsx b/apps/docs/app/new-landing/_components/cta.tsx index c940e601..ccba1d6a 100644 --- a/apps/docs/app/new-landing/_components/cta.tsx +++ b/apps/docs/app/new-landing/_components/cta.tsx @@ -34,11 +34,13 @@ const CTASection = () => { href="/docs" className="inline-flex text-sm lg:text-base items-center gap-2 px-5 py-3.5 lg:py-4.5 rounded-md bg-primary text-white font-medium transition-colors hover:bg-primary/90 leading-0" > - Read Docs + Read the Docs Explore Templates diff --git a/apps/docs/app/new-landing/_components/footer.data.tsx b/apps/docs/app/new-landing/_components/footer.data.tsx index 1518fe5a..c9348fa9 100644 --- a/apps/docs/app/new-landing/_components/footer.data.tsx +++ b/apps/docs/app/new-landing/_components/footer.data.tsx @@ -96,7 +96,7 @@ export const DOCUMENTATION_LINKS = [ ]; export const RESOURCE_LINKS = [ - { href: "https://blog.iqai.com/", text: "Blog", external: true }, + { href: "https://blog.iqai.com/tag/dev//", text: "Blog", external: true }, { href: "/showcase", text: "Showcase" }, { href: "https://github.com/IQAIcom/adk-ts-samples", @@ -117,7 +117,7 @@ export const SUPPORT_LINKS = [ external: true, }, { - href: "https://github.com/IQAIcom/adk-ts/blob/main/CONTRIBUTION.md", + href: "https://github.com/IQAIcom/adk-ts/blob/main/CONTRIBUTING.md", text: "Contributing", external: true, }, diff --git a/apps/docs/app/new-landing/_components/get-started.tsx b/apps/docs/app/new-landing/_components/get-started.tsx index 683073c5..fe7925ef 100644 --- a/apps/docs/app/new-landing/_components/get-started.tsx +++ b/apps/docs/app/new-landing/_components/get-started.tsx @@ -42,9 +42,22 @@ const steps = [ }, { text: ' assistant")', color: "text-[#98C379]" }, { - text: ' .withInstruction("Gather information and', + text: ' .withInstruction("Gather information', color: "text-[#98C379]", }, + { + text: ' and summarize findings.")', + color: "text-[#98C379]", + }, + { + text: " .withTools(new GoogleSearchTool(),", + color: "text-[#61AFEF]", + }, + { + text: " new LoadMemoryTool())", + color: "text-[#61AFEF]", + }, + { text: " .build();", color: "text-[#ABB2BF]" }, ], }, { @@ -78,7 +91,7 @@ const GetStartedSection = () => { {/* Section header */}
Getting Started -

Create Agents in Minutes

+

Create Your First Agent in Minutes

Start with a simple agent or scale to a full multi-agent system using the same strongly-typed AgentBuilder API. diff --git a/apps/docs/app/new-landing/_components/interactive-simulations.tsx b/apps/docs/app/new-landing/_components/interactive-simulations.tsx index c006dcf8..9f8e240f 100644 --- a/apps/docs/app/new-landing/_components/interactive-simulations.tsx +++ b/apps/docs/app/new-landing/_components/interactive-simulations.tsx @@ -20,6 +20,7 @@ interface DemoCardProps { outputLabel?: string; hasInput?: boolean; hasOutput?: boolean; + patternLabel?: string; } function DemoCard({ @@ -32,6 +33,7 @@ function DemoCard({ agents, inputLabel = "INPUT", hasInput = true, + patternLabel, }: DemoCardProps) { const [isPlaying, setIsPlaying] = useState(false); const [activeAgent, setActiveAgent] = useState(-1); @@ -160,6 +162,11 @@ function DemoCard({ className="relative bg-black/40 border border-white/20 overflow-hidden flex items-center justify-center rounded-md" style={{ minHeight: "500px", maxHeight: "500px" }} > + {patternLabel && ( +

+ {patternLabel} +
+ )}
{/* Explore All MCPs button */} - Browse All MCP Servers - + {/* Overview Stats */}
diff --git a/apps/docs/app/new-landing/_components/navbar.tsx b/apps/docs/app/new-landing/_components/navbar.tsx index 7088ccb4..2d183b99 100644 --- a/apps/docs/app/new-landing/_components/navbar.tsx +++ b/apps/docs/app/new-landing/_components/navbar.tsx @@ -24,7 +24,11 @@ const NAV_LINKS = [ { text: "Docs", href: "/docs" }, { text: "MCP", href: "/docs/mcp-servers" }, { text: "API", href: "https://iqaicom.github.io/adk-ts/", external: true }, - { text: "Blog", href: "https://blog.iqai.com/", external: true }, + { + text: "Blog", + href: "https://blog.iqai.com/tag/dev//tag/dev/", + external: true, + }, ]; type ResourceLinkType = { diff --git a/apps/docs/app/new-landing/_components/project-features.tsx b/apps/docs/app/new-landing/_components/project-features.tsx index d7634879..42ac3090 100644 --- a/apps/docs/app/new-landing/_components/project-features.tsx +++ b/apps/docs/app/new-landing/_components/project-features.tsx @@ -79,7 +79,7 @@ const ProjectFeaturesSection = () => {

View All Showcases @@ -120,7 +120,7 @@ const ProjectFeaturesSection = () => {
- 90+ + 115+ Stars
@@ -138,7 +138,7 @@ const ProjectFeaturesSection = () => { {/* View All Showcases Button */} View All Showcases diff --git a/apps/docs/public/landing-page/advanced-tooling.svg b/apps/docs/public/landing-page/advanced-tooling.svg index abd29c85..f043ebab 100644 --- a/apps/docs/public/landing-page/advanced-tooling.svg +++ b/apps/docs/public/landing-page/advanced-tooling.svg @@ -9,6 +9,7 @@ } /* Moving dot on arc */ .dot-1 { offset-path: path('M192,182.145 C245.818,160.618 317.574,160.618 371.392,182.145'); animation: moveDot 3s linear infinite; filter: drop-shadow(0 0 4px #FF1A88); } + .dot-2 { offset-path: path('M522,182.145 C565,160.618 590,160.618 630,182.145'); animation: moveDot 3s linear infinite 0.5s; filter: drop-shadow(0 0 4px #FF1A88); } @keyframes moveDot { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* Left panel: 5 tool status dots light up in sequence */ .tool-1 { animation: toolBlink 5s ease-in-out infinite 0s; } @@ -59,6 +60,12 @@ + + + + + + @@ -97,6 +104,7 @@ + diff --git a/apps/examples/README.md b/apps/examples/README.md index 74fe2fd0..93a00398 100644 --- a/apps/examples/README.md +++ b/apps/examples/README.md @@ -34,7 +34,7 @@ _Note: this project uses [**pnpm**](https://pnpm.io/) as the package manager. Yo pnpm install ``` -2. **Build the ADK-TS Package** +1. **Build the ADK-TS Package** For the examples to work correctly, you need to build the core ADK-TS package first. This step compiles the TypeScript code and prepares the necessary files. @@ -42,7 +42,7 @@ For the examples to work correctly, you need to build the core ADK-TS package fi pnpm build ``` -3. **Configure Environment Variables** +1. **Configure Environment Variables** Create a `.env` file in the **examples directory** (not in the root folder) and add your API keys and optional model configuration. This file is used to set environment variables that the examples will use. @@ -62,7 +62,7 @@ The default LLM is Google Gemini. You can get a Google API key from [Google AI S > Note: Some examples require additional configuration or dependencies. Please check the [`.env.example`](.env.example) file for specific instructions. -4. **Run Examples** +1. **Run Examples** To explore the examples, you can either browse all available examples or run a specific one directly: @@ -107,7 +107,7 @@ We have **9 comprehensive examples** that cover the complete ADK-TS feature set, ## 🤝 Contributing -If you would like to add examples or improve existing ones, please check out our [Contributing Guide](../../CONTRIBUTION.md) for details on how to get started. +If you would like to add examples or improve existing ones, please check out our [Contributing Guide](../../CONTRIBUTING.md) for details on how to get started. --- diff --git a/packages/adk-cli/README.md b/packages/adk-cli/README.md index fdc5df6b..9f383d10 100644 --- a/packages/adk-cli/README.md +++ b/packages/adk-cli/README.md @@ -315,7 +315,7 @@ Tests are organized alongside source files: - **[ADK-TS Repository](https://github.com/IQAIcom/adk-ts)** - Main framework repository - **[Live Documentation](https://adk.iqai.com)** - Published documentation site - **[CLI Documentation](https://adk.iqai.com/docs/cli)** - User-facing CLI docs -- **[Contributing Guide](../../CONTRIBUTION.md)** - General project contribution guidelines +- **[Contributing Guide](../../CONTRIBUTING.md)** - General project contribution guidelines - **[Examples](../../apps/examples/)** - Code examples and tutorials ### Technical Resources diff --git a/packages/adk/README.md b/packages/adk/README.md index 310a409f..32742676 100644 --- a/packages/adk/README.md +++ b/packages/adk/README.md @@ -322,7 +322,7 @@ pnpm install && pnpm dev ## 🤝 Contributing -Contributions are welcome! See our [Contributing Guide](https://github.com/IQAIcom/adk-ts/blob/main/CONTRIBUTION.md) for details. +Contributions are welcome! See our [Contributing Guide](https://github.com/IQAIcom/adk-ts/blob/main/CONTRIBUTING.md) for details. ## 📜 License From b9c7dba2e76a47429130307ed7ab3d273c32a01c Mon Sep 17 00:00:00 2001 From: timonwa Date: Wed, 1 Apr 2026 16:35:11 +0100 Subject: [PATCH 11/11] feat: enhance MCP servers section with updated categories and highlights --- .../new-landing/_components/mcp-servers.tsx | 135 ++++++++++++------ 1 file changed, 88 insertions(+), 47 deletions(-) diff --git a/apps/docs/app/new-landing/_components/mcp-servers.tsx b/apps/docs/app/new-landing/_components/mcp-servers.tsx index 03bbd42b..83aab106 100644 --- a/apps/docs/app/new-landing/_components/mcp-servers.tsx +++ b/apps/docs/app/new-landing/_components/mcp-servers.tsx @@ -23,109 +23,138 @@ interface CategoryContent { const categories: CategoryContent[] = [ { id: "defi", - label: "DeFi & Blockchain", + label: "Blockchain & DeFi", description: - "Connect agents to DeFi protocols, DEXs, and on-chain data across 200+ chains", + "Connect agents to on-chain protocols, DEX liquidity, and blockchain execution across multiple networks.", highlights: [ { - name: "DeFi Llama", - mcpName: "McpDefillama", + name: "ABI Decoder", + mcpName: "McpAbi", + description: + "Decode and interact with smart contract ABIs for any on-chain address.", + features: ["ABI fetch", "Function decoding", "Event parsing"], + }, + { + name: "NEAR Intents", + mcpName: "McpNearIntents", + description: + "Execute cross-chain swaps and asset moves via NEAR's intent system without managing bridges.", + features: [ + "Cross-chain intents", + "Swap execution", + "Chain abstraction", + ], + }, + { + name: "Odos", + mcpName: "McpOdos", description: - "Access comprehensive DeFi protocol data including TVL, yield rates, and historical metrics", + "Aggregated order routing across 100+ DEXs on 20+ chains for optimal swap execution and minimal slippage.", features: [ - "Real-time TVL tracking", - "Protocol revenue analytics", - "200+ chains supported", + "Multi-hop optimization", + "20+ chains", + "100+ DEX integrations", ], }, + ], + }, + { + id: "market-data", + label: "Market Data", + description: + "Give agents real-time access to crypto prices, protocol TVL, wallet portfolios, and exchange data.", + highlights: [ + { + name: "DeFi Llama", + mcpName: "McpDefillama", + description: + "Access comprehensive DeFi protocol data, including TVL, yield rates, and protocol revenue.", + features: ["Real-time TVL", "Protocol revenue", "200+ chain support"], + }, { name: "DeBank", mcpName: "McpDebank", description: - "Track wallet portfolios, DeFi positions, and NFT holdings across multiple chains", + "Track wallet portfolios, DeFi positions, and NFT holdings across multiple chains.", features: [ - "Multi-chain portfolio tracking", + "Multi-chain portfolio", "DeFi position analysis", "NFT valuation", ], }, { - name: "Odos", - mcpName: "McpOdos", + name: "CoinGecko", + mcpName: "McpCoinGecko", description: - "Smart order routing across DEXs for optimal swap paths and best execution", + "Access real-time and historical cryptocurrency market data from CoinGecko's free API.", features: [ - "Multi-hop optimization", - "20+ chains", - "100+ DEX integrations", + "Price feeds", + "Market cap rankings", + "Historical OHLCV data", ], }, ], }, { id: "prediction", - label: "Prediction Markets", + label: "Prediction", description: - "Build agents that interact with prediction and betting markets for market intelligence", + "Build agents that monitor odds, place positions, and aggregate signals across prediction and event markets.", highlights: [ { name: "Polymarket", mcpName: "McpPolymarket", description: - "Access decentralized prediction markets built on Polygon for odds, bets, and outcomes", + "Access Polymarket's decentralized prediction markets for real-time odds, position management, and historical resolution data.", features: [ "Real-time market odds", "Order placement", - "Historical resolution data", + "Historical resolution", ], }, { name: "Kalshi", mcpName: "McpKalshi", description: - "CFTC-regulated event contracts marketplace for US-based prediction markets", + "CFTC-regulated event contracts marketplace for US-based prediction markets.", features: [ "Regulated trading", - "Economic & political events", - "Settlement tracking", + "Economic & Political Events", + "Settlement Tracking", ], }, { name: "Limitless", mcpName: "McpLimitless", description: - "Aggregated prediction data from multiple sources for comprehensive intelligence", - features: [ - "Cross-platform aggregation", - "Consensus calculations", - "Real-time comparison", - ], + "Access Limitless prediction markets for question-based event contracts.", + features: ["Market discovery", "Position tracking", "Settlement data"], }, ], }, { - id: "communication", - label: "Communication", + id: "messaging", + label: "Messaging", description: - "Enable agents to interact through popular messaging and community platforms", + "Give agents a presence in messaging platforms. Send messages, handle commands, and manage communities.", highlights: [ { name: "Telegram", mcpName: "McpTelegram", description: - "Build Telegram bots powered by ADK-TS agents with full messaging capabilities", + "Build Telegram bots with full ADK-TS agent capabilities — messaging, commands, and group management.", features: [ - "Bot messaging", - "Command handling", + "Bot Messaging", + "Command Handling", "Group management", - "Media uploads", + "Media Uploads", ], }, { name: "Discord", mcpName: "McpDiscord", description: - "Create Discord bots with agent capabilities for server and community management", + "Create Discord bots powered by ADK-TS agents for slash commands, role management, and rich embeds.", features: [ "Slash commands", "Role management", @@ -136,8 +165,8 @@ const categories: CategoryContent[] = [ ], }, { - id: "ai-knowledge", - label: "AI & Knowledge", + id: "ai-data", + label: "AI & Data", description: "Specialized MCPs for agent orchestration, knowledge bases, and utilities", highlights: [ @@ -221,10 +250,6 @@ const MCPServersSection = () => {
20+
MCP Servers
-
-
4
-
Categories
-
100%
TypeScript First
@@ -362,11 +387,14 @@ const MCPServersSection = () => { 
-								{`import { AgentBuilder, ${activeCategory.highlights[0].mcpName}, getMcpTools } from "@iqai/adk";
+								{`import { AgentBuilder, ${activeCategory.highlights[0].mcpName} } from "@iqai/adk";
+
+const toolset = ${activeCategory.highlights[0].mcpName}();
+const tools = await toolset.getTools();
 
-const mcp = new ${activeCategory.highlights[0].mcpName}();
-const agent = await AgentBuilder.create("my_agent")
-  .withTools(...getMcpTools(mcp))
+const { runner } = await AgentBuilder.create("my-agent")
+  .withModel("gemini-2.5-flash")
+  .withTools(...tools)
   .build();`}
@@ -400,6 +428,19 @@ const agent = await AgentBuilder.create("my_agent")
+ + {/* External MCP callout */} +
+

+ Not just IQ AI servers. +

+

+ ADK-TS connects to any MCP server from the ecosystem — + Anthropic's official servers, community servers, or servers you + build yourself using the{" "} + mcp-starter template. +

+
); };