Skip to content

Commit 528baca

Browse files
necatiozmennecatiozmen
authored
feat: add prompt management (#878)
1 parent 7c4a849 commit 528baca

File tree

2 files changed

+194
-5
lines changed

2 files changed

+194
-5
lines changed

‎website/src/components/navbar/index.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,7 @@ export default function Navbar() {
177177
</div>
178178
</div>
179179
</Link>
180-
<Link
181-
to="/docs/agents/prompts/#voltops-prompt-management"
182-
className="no-underline"
183-
>
180+
<Link to="/voltops/prompt-management" className="no-underline">
184181
<div className="group/item p-1 cursor-pointer flex items-start transition-all duration-200 rounded-lg mb-2">
185182
<ChatBubbleBottomCenterTextIcon 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" />
186183
<div>
@@ -535,7 +532,7 @@ export default function Navbar() {
535532
</span>
536533
</div>
537534
</Link>
538-
<Link to="/docs/agents/prompts/#voltops-prompt-management" className="no-underline">
535+
<Link to="/voltops/prompt-management" className="no-underline">
539536
<div className="group p-3 cursor-pointer flex items-center transition-all duration-200">
540537
<ChatBubbleBottomCenterTextIcon className="w-5 h-5 mr-2 text-white group-hover:text-emerald-500 transition-all duration-200" />
541538
<span className="text-base font-['Inter'] font-normal text-white group-hover:text-emerald-500 transition-colors duration-200">

‎website/src/pages/voltops/prompt-management.tsx‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import Head from "@docusaurus/Head";
2+
import { ArrowRightIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
3+
import { DotPattern } from "@site/src/components/ui/dot-pattern";
4+
import { Button } from "@site/src/components/voltops/Button";
5+
import Layout from "@theme/Layout";
6+
import { motion } from "framer-motion";
7+
import type React from "react";
8+
9+
// Reusable components
10+
const Section = ({
11+
children,
12+
className = "",
13+
}: { children: React.ReactNode; className?: string }) => (
14+
<section className={`py-8 md:py-10 lg:py-16 ${className}`}>{children}</section>
15+
);
16+
17+
const Container = ({
18+
children,
19+
className = "",
20+
}: { children: React.ReactNode; className?: string }) => (
21+
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${className}`}>{children}</div>
22+
);
23+
24+
const features = [
25+
{
26+
title: "Version History & Environment Labels",
27+
description:
28+
"Every edit creates a new version. Compare diffs, roll back instantly, and promote to staging or production with one click.",
29+
image: "https://cdn.voltagent.dev/website/prompts/version-1.png",
30+
},
31+
{
32+
title: "Import & Export",
33+
description:
34+
"Export prompts as JSON for backup or migration. Import them into another project or share with your team.",
35+
image: "https://cdn.voltagent.dev/website/prompts/import-1.png",
36+
},
37+
{
38+
title: "Usage Analytics",
39+
description:
40+
"See which prompts are called, how often, and what they cost. Track performance per version and trace individual requests.",
41+
image: "https://cdn.voltagent.dev/website/evals/annontations.png",
42+
},
43+
];
44+
45+
export default function PromptManagementPage(): JSX.Element {
46+
return (
47+
<Layout>
48+
<Head>
49+
<title>VoltOps Prompt Management - Version & Deploy AI Prompts | VoltAgent</title>
50+
<meta
51+
name="description"
52+
content="Manage AI prompts with version control, environment labels, and usage analytics. Edit prompts without deploying code with VoltOps Prompt Management."
53+
/>
54+
<meta
55+
property="og:title"
56+
content="VoltOps Prompt Management - Version & Deploy AI Prompts"
57+
/>
58+
<meta
59+
property="og:description"
60+
content="Manage AI prompts with version control, environment labels, and usage analytics. Edit prompts without deploying code with VoltOps Prompt Management."
61+
/>
62+
<meta property="og:type" content="website" />
63+
<meta name="twitter:card" content="summary_large_image" />
64+
<meta
65+
name="twitter:title"
66+
content="VoltOps Prompt Management - Version & Deploy AI Prompts"
67+
/>
68+
<meta
69+
name="twitter:description"
70+
content="Manage AI prompts with version control, environment labels, and usage analytics. Edit prompts without deploying code with VoltOps Prompt Management."
71+
/>
72+
</Head>
73+
74+
<main className="flex-1 bg-[#080f11d9] relative overflow-hidden">
75+
{/* Global Background Effects */}
76+
<div className="fixed inset-0 pointer-events-none">
77+
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/3 via-transparent to-cyan-500/3" />
78+
<div className="absolute top-[10%] left-[15%] w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-[120px] animate-pulse" />
79+
<div
80+
className="absolute top-[50%] right-[10%] w-[400px] h-[400px] bg-cyan-500/8 rounded-full blur-[100px] animate-pulse"
81+
style={{ animationDelay: "2s" }}
82+
/>
83+
<div
84+
className="absolute bottom-[20%] left-[25%] w-[450px] h-[450px] bg-emerald-400/8 rounded-full blur-[110px] animate-pulse"
85+
style={{ animationDelay: "4s" }}
86+
/>
87+
</div>
88+
89+
<DotPattern dotColor="#94a3b8" dotSize={1.2} spacing={20} />
90+
91+
{/* Hero Section */}
92+
<Section className="relative pt-12 md:pt-16">
93+
<Container>
94+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center relative z-10">
95+
{/* Left side - Content */}
96+
<motion.div
97+
initial={{ opacity: 0, x: -20 }}
98+
animate={{ opacity: 1, x: 0 }}
99+
transition={{ duration: 0.5 }}
100+
>
101+
<div className="mb-4">
102+
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium text-emerald-400 border-solid border-emerald-500/20">
103+
<ChatBubbleBottomCenterTextIcon className="w-4 h-4 mr-2" />
104+
VoltOps Prompt Management
105+
</span>
106+
</div>
107+
<h1 className="text-3xl sm:text-4xl md:text-5xl tracking-[-0.025em] font-normal text-white mb-4 sm:mb-6 leading-tight">
108+
Edit Prompts Without <span className="text-emerald-400">Deploying Code</span>
109+
</h1>
110+
<p className="text-base sm:text-lg md:text-xl text-gray-400 mb-6 sm:mb-8 leading-relaxed">
111+
Store prompts in the cloud, version every change, and promote to production with
112+
one click. No redeploy needed.
113+
</p>
114+
<div className="flex flex-col sm:flex-row gap-4">
115+
<Button href="https://console.voltagent.dev" variant="primary" target="_blank">
116+
Get Started
117+
<ArrowRightIcon className="w-5 h-5 ml-2" />
118+
</Button>
119+
<Button href="/prompt-engineering-docs/" variant="secondary">
120+
View Documentation
121+
</Button>
122+
</div>
123+
</motion.div>
124+
125+
{/* Right side - Image */}
126+
<motion.div
127+
initial={{ opacity: 0, x: 20 }}
128+
animate={{ opacity: 1, x: 0 }}
129+
transition={{ duration: 0.5, delay: 0.2 }}
130+
className="relative"
131+
>
132+
<img
133+
src="https://cdn.voltagent.dev/website/prompts/hero-1.png"
134+
alt="VoltOps Prompt Management Dashboard"
135+
className="w-full h-auto rounded-xl object-cover"
136+
/>
137+
</motion.div>
138+
</div>
139+
</Container>
140+
</Section>
141+
142+
{/* Features Section */}
143+
<Section className="relative">
144+
<Container className="relative z-10">
145+
<div className="space-y-16 lg:space-y-20">
146+
{features.map((feature, index) => (
147+
<motion.div
148+
key={`${feature.title}-${index}`}
149+
initial={{ opacity: 0, y: 40 }}
150+
animate={{ opacity: 1, y: 0 }}
151+
transition={{
152+
duration: 0.6,
153+
delay: 0.15 + index * 0.1,
154+
type: "spring",
155+
stiffness: 80,
156+
}}
157+
className="group"
158+
>
159+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
160+
{/* Feature Image */}
161+
<div className={`relative ${index % 2 === 1 ? "lg:order-2" : ""}`}>
162+
<img
163+
src={feature.image}
164+
alt={feature.title}
165+
className="w-full h-auto rounded-xl object-cover"
166+
/>
167+
</div>
168+
{/* Feature Content */}
169+
<div className={`${index % 2 === 1 ? "lg:order-1" : ""}`}>
170+
<div className="flex items-center gap-4 mb-5">
171+
<h3 className="text-xl sm:text-2xl md:text-3xl font-normal text-white leading-tight mb-0">
172+
{feature.title}
173+
</h3>
174+
</div>
175+
<p className="text-gray-400 text-base sm:text-lg md:text-xl mb-0">
176+
{feature.description}
177+
</p>
178+
</div>
179+
</div>
180+
{/* Divider between features */}
181+
{index < features.length - 1 && (
182+
<div className="mt-16 lg:mt-20 border-t border-solid border-gray-800/50" />
183+
)}
184+
</motion.div>
185+
))}
186+
</div>
187+
</Container>
188+
</Section>
189+
</main>
190+
</Layout>
191+
);
192+
}

0 commit comments

Comments
 (0)