Skip to content

feat: enhance FeatureShowcase with trigger and action code tabs, and … #892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
omeraplak merged 2 commits into from
Dec 25, 2025
Merged

feat: enhance FeatureShowcase with trigger and action code tabs, and … #892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65ac726
feat: enhance FeatureShowcase with trigger and action code tabs, and …
necatiozmen Dec 25, 2025
41f14bf
feat: simplify navbar links by renaming and removing unused entries
necatiozmen Dec 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 41 additions & 3 deletions website/src/components/feature-showcase/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,14 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
bell: BellIcon,
message: ChatBubbleLeftIcon,
shield: ShieldCheckIcon,
book: BookOpenIcon,
};

export function FeatureShowcase() {
const [activeTab, setActiveTab] = useState("framework");
const [hoveredTab, setHoveredTab] = useState<string | null>(null);
const [lightboxImage, setLightboxImage] = useState<string | null>(null);
const [activeCodeTab, setActiveCodeTab] = useState<"trigger" | "action">("trigger");
const tabsContainerRef = useRef<HTMLDivElement>(null);

const activeTabData = tabsData.find((tab) => tab.id === activeTab);
Expand Down Expand Up @@ -97,7 +99,7 @@ export function FeatureShowcase() {
className={`
relative flex items-center justify-center gap-1 md:gap-2 p-2 md:px-4 md:py-3 font-medium
transition-all duration-700 ease-in-out cursor-pointer
min-w-[33.333%] md:min-w-0 md:flex-1
md:flex-1
${
isActive && !hoveredTab
? "bg-zinc-800/60 text-emerald-400 border-b-2 border-emerald-400"
Expand All @@ -109,7 +111,7 @@ export function FeatureShowcase() {
>
{Icon && (
<Icon
className={`w-4 h-4 transition-colors duration-700 ease-in-out ${
className={`w-5 h-5 transition-colors duration-700 ease-in-out ${
isHighlighted ? "text-emerald-400" : ""
}`}
/>
Expand Down Expand Up @@ -198,7 +200,43 @@ export function FeatureShowcase() {

{/* Code Panel - Bottom on mobile, Left on desktop */}
<div className="h-[250px] sm:h-[350px] md:h-[600px] overflow-auto showcase-code-block lg:border-r border-solid border-t-0 border-b-0 border-l-0 border-zinc-700 order-2 lg:order-1">
<CodeBlock language="typescript">{displayTabData?.code}</CodeBlock>
{displayTabData?.triggerCode && displayTabData?.actionCode ? (
<div className="flex flex-col h-full">
{/* Code Tabs */}
<div className="flex border-b border-solid border-t-0 border-l-0 border-r-0 border-zinc-800 bg-black">
<button
onClick={() => setActiveCodeTab("trigger")}
className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer border-0 outline-none ${
activeCodeTab === "trigger"
? "text-zinc-100 bg-zinc-900 border-b-2 border-zinc-500"
: "text-zinc-500 hover:text-zinc-300 bg-transparent"
}`}
>
Trigger
</button>
<button
onClick={() => setActiveCodeTab("action")}
className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer border-0 outline-none ${
activeCodeTab === "action"
? "text-zinc-100 bg-zinc-900 border-b-2 border-zinc-500"
: "text-zinc-500 hover:text-zinc-300 bg-transparent"
}`}
>
Action
</button>
</div>
{/* Code Content */}
<div className="flex-1 overflow-auto">
<CodeBlock language="typescript">
{activeCodeTab === "trigger"
? displayTabData.triggerCode
: displayTabData.actionCode}
</CodeBlock>
</div>
</div>
) : (
<CodeBlock language="typescript">{displayTabData?.code}</CodeBlock>
)}
</div>

{/* Preview Image - Desktop only */}
Expand Down
70 changes: 47 additions & 23 deletions website/src/components/feature-showcase/mock-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ export interface TabData {
icon: string;
image?: string;
code?: string;
triggerCode?: string;
actionCode?: string;
description?: string;
features?: string[];
fullImage?: boolean;
Expand Down Expand Up @@ -59,7 +61,7 @@ new VoltAgent({
});
}),
});`,
footerText: "Build AI agents with a type-safe, modular TypeScript framework",
footerText: "Create production-ready AI agents in minutes with type-safe TypeScript APIs",
docLink: "/docs",
},
{
Expand All @@ -68,7 +70,8 @@ new VoltAgent({
icon: "chart",
image: "https://cdn.voltagent.dev/website/feature-showcase/dashboard.png",
fullImage: true,
footerText: "Monitor and debug your AI agents with real-time observability",
footerText:
"See exactly what your agents are doing with full execution traces and debugging tools",
docLink: "/observability-docs",
},
{
Expand Down Expand Up @@ -100,15 +103,15 @@ const agent = new Agent({
},
},
});`,
footerText: "Evaluate agent responses with customizable scorers in production",
footerText: "Test agent outputs automatically and catch issues before they hit production",
docLink: "/evaluation-docs/",
},
{
id: "triggers",
label: "Triggers",
icon: "zap",
id: "triggers-actions",
label: "Triggers & Actions",
icon: "play",
image: "https://cdn.voltagent.dev/website/feature-showcase/trigger.png",
code: `import { VoltAgent, createTriggers } from "@voltagent/core";
triggerCode: `import { VoltAgent, createTriggers } from "@voltagent/core";

new VoltAgent({
triggers: createTriggers((on) => {
Expand All @@ -133,15 +136,7 @@ new VoltAgent({
});
}),
});`,
footerText: "React to events from Slack, GitHub, Airtable, and webhooks automatically",
docLink: "/actions-triggers-docs/triggers/overview",
},
{
id: "actions",
label: "Actions",
icon: "play",
image: "https://cdn.voltagent.dev/website/feature-showcase/actions.png",
code: `import { Agent, createTool } from "@voltagent/core";
actionCode: `import { Agent, createTool } from "@voltagent/core";
import { voltOps } from "@voltagent/voltops";

// Create Airtable action as a tool
Expand All @@ -165,8 +160,38 @@ const agent = new Agent({
name: "data-agent",
tools: [createAirtableRecord],
});`,
footerText: "Execute actions on external services like Airtable, Slack, and more",
docLink: "/actions-triggers-docs/actions/overview",
footerText: "Connect agents to Slack, GitHub, and webhooks to automate workflows end-to-end",
docLink: "/actions-triggers-docs/triggers/overview",
},
{
id: "rag",
label: "RAG",
icon: "book",
image: "https://cdn.voltagent.dev/website/feature-showcase/rag-features.png",
code: `import { openai } from "@ai-sdk/openai";
import { Agent, VoltAgent } from "@voltagent/core";
import { VoltAgentRagRetriever } from "@voltagent/core";

const retriever = new VoltAgentRagRetriever({
knowledgeBaseName: "My Document",
topK: 8,
includeSources: true,
});

const agent = new Agent({
name: "RAG Assistant",
instructions:
"A helpful assistant that searches your knowledge base and uses relevant context to answer.",
model: openai("gpt-4o-mini"),
retriever,
});

const result = await agent.generateText("Ask a question about your docs…");
console.log(result.text);
// Optional: inspect which chunks were used
// console.log(result.context.get("rag.references"));`,
footerText: "Ground agent responses in your own data with built-in vector search",
docLink: "/docs/rag/overview/",
},
{
id: "monitoring",
Expand Down Expand Up @@ -200,7 +225,7 @@ await voltOps.alerts.create({
channels: ["pagerduty"],
severity: "critical",
});`,
footerText: "Set up alerts for latency, errors, and custom metrics",
footerText: "Set up alerts for latency spikes, errors, and anomalies in agent behavior",
docLink: "/docs/quick-start",
},
{
Expand Down Expand Up @@ -230,7 +255,7 @@ new VoltAgent({
agents: { agent },
voltOpsClient: voltOpsClient,
});`,
footerText: "Manage and version prompts centrally with VoltOps",
footerText: "Version and update prompts without code changes using a central registry",
docLink: "/docs/agents/prompts#voltops-prompt-management",
},
{
Expand Down Expand Up @@ -271,8 +296,7 @@ const agent = new Agent({
],
},
});`,
footerText:
"Protect your agents with content moderation, PII detection, and topic restrictions",
footerText: "Block harmful content, mask PII, and enforce topic boundaries automatically",
docLink: "/docs/guardrails/overview",
},
{
Expand All @@ -281,7 +305,7 @@ const agent = new Agent({
icon: "zap",
image: "https://cdn.voltagent.dev/website/feature-showcase/deployment-4.png",
fullImage: true,
footerText: "Deploy your agents to production with one command",
footerText: "Deploy agents to production with one click — no infrastructure to manage",
docLink: "/deployment-docs/",
},
];
32 changes: 2 additions & 30 deletions website/src/components/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
PuzzlePieceIcon,
RocketLaunchIcon,
ScaleIcon,
ServerIcon,
ShieldCheckIcon,
ShoppingCartIcon,
UserGroupIcon,
Expand Down Expand Up @@ -406,10 +405,7 @@ export default function Navbar() {
</div>
</div>
<Link to="/docs/" className={`${styles.navLink} `}>
VoltAgent Docs
</Link>
<Link to="/observability-docs/" className={`${styles.navLink} `}>
Observability Docs
Docs
</Link>

<div className={`${styles.navLink} group relative`}>
Expand Down Expand Up @@ -480,19 +476,6 @@ export default function Navbar() {
</div>
</div>
</Link>
<Link to="/mcp/" className="no-underline">
<div className="group/item p-1 cursor-pointer flex items-start transition-all duration-200 rounded-lg mb-2">
<ServerIcon className="w-4 h-4 !text-white group-hover/item:!text-emerald-500 transition-all duration-200 mr-3 mt-0.5 flex-shrink-0" />
<div>
<span className="text-sm font-['Inter'] font-normal !text-white group-hover/item:!text-emerald-500 transition-all duration-200 block">
MCP Directory
</span>
<span className="text-xs font-normal text-gray-500 font-['Inter'] leading-[1.2]">
Browse MCP services
</span>
</div>
</div>
</Link>
</div>

{/* Right Column - Connect */}
Expand Down Expand Up @@ -734,10 +717,7 @@ export default function Navbar() {
</div>
</div>
<Link to="/docs/" className={`${styles.mobileNavLink}`}>
VoltAgent Docs
</Link>
<Link to="/observability-docs/" className={`${styles.mobileNavLink}`}>
Observability Docs
Docs
</Link>
<Link to="/recipes-and-guides/" className={`${styles.mobileNavLink}`}>
Recipes & Guides
Expand Down Expand Up @@ -809,14 +789,6 @@ export default function Navbar() {
</span>
</div>
</Link>
<Link to="/mcp/" className="no-underline">
<div className="group p-3 cursor-pointer flex items-center transition-all duration-200">
<ServerIcon className="w-5 h-5 mr-2 text-white group-hover:text-emerald-500 transition-all duration-200" />
<span className="text-base font-['Inter'] font-normal text-white group-hover:text-emerald-500 transition-colors duration-200">
MCP Directory
</span>
</div>
</Link>
<h4 className="text-sm font-normal text-gray-400 uppercase tracking-wider pb-2 mt-4 mb-2 border-b border-solid border-t-0 border-l-0 border-r-0 border-gray-700/50">
Connect
</h4>
Expand Down