feat: add new example "with-nextjs"

examples/with-nextjs/.env.example

@@ -0,0 +1 @@
+OPENAI_API_KEY=sk-proj-

examples/with-nextjs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-nextjs/README.md

@@ -0,0 +1,53 @@
+<div align="center">
+<a href="https://voltagent.dev/">
+<img width="1800" alt="435380213-b6253409-8741-462b-a346-834cd18565a9" src="https://github.com/user-attachments/assets/452a03e7-eeda-4394-9ee7-0ffbcf37245c" />
+</a>
+
+<br/>
+<br/>
+
+<div align="center">
+    <a href="https://voltagent.dev">Home Page</a> |
+    <a href="https://voltagent.dev/docs/">Documentation</a> |
+    <a href="https://github.com/voltagent/voltagent/tree/main/examples">Examples</a> |
+    <a href="https://s.voltagent.dev/discord">Discord</a> |
+    <a href="https://voltagent.dev/blog/">Blog</a>
+</div>
+</div>
+
+<br/>
+
+<div align="center">
+    <strong>VoltAgent is an open source TypeScript framework for building and orchestrating AI agents.</strong><br>
+Escape the limitations of no-code builders and the complexity of starting from scratch.
+    <br />
+    <br />
+</div>
+
+<div align="center">
+
+[![npm version](https://img.shields.io/npm/v/@voltagent/core.svg)](https://www.npmjs.com/package/@voltagent/core)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)
+[![Discord](https://img.shields.io/discord/1361559153780195478.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://s.voltagent.dev/discord)
+[![Twitter Follow](https://img.shields.io/twitter/follow/voltagent_dev?style=social)](https://twitter.com/voltagent_dev)
+
+</div>
+
+<br/>
+
+<div align="center">
+<a href="https://voltagent.dev/">
+<img width="896" alt="Screenshot 2025-04-20 at 22 44 38" src="https://github.com/user-attachments/assets/f0627868-6153-4f63-ba7f-bdfcc5dd603d" />
+</a>
+
+</div>
+
+## VoltAgent: Build AI Agents Fast and Flexibly
+
+VoltAgent is an open-source TypeScript framework for creating and managing AI agents. It provides modular components to build, customize, and scale agents with ease. From connecting to APIs and memory management to supporting multiple LLMs, VoltAgent simplifies the process of creating sophisticated AI systems. It enables fast development, maintains clean code, and offers flexibility to switch between models and tools without vendor lock-in.
+
+## Try Example
+
+```bash
+npm create voltagent-app@latest -- --example with-nextjs
+```

examples/with-nextjs/app/actions.ts

@@ -0,0 +1,11 @@
+"use server";
+
+import { agent } from "@/voltagent";
+
+export async function calculateExpression(expression: string) {
+  const result = await agent.generateText(
+    `Calculate ${expression}. Only respond with the numeric result.`,
+  );
+
+  return result.text;
+}

examples/with-nextjs/app/components/calculator.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import { calculateExpression } from "../actions";
+
+export function Calculator() {
+  const [result, setResult] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [expression, setExpression] = useState("");
+
+  async function handleSubmit(formData: FormData) {
+    const expr = formData.get("expression") as string;
+    if (!expr.trim()) return;
+
+    setLoading(true);
+    try {
+      const calcResult = await calculateExpression(expr);
+      setResult(calcResult);
+      setExpression(expr);
+    } catch {
+      setResult("Error calculating expression");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="bg-[#1b1b1b] border-2 border-[#333333] rounded-xl shadow-xl overflow-hidden max-w-md mx-auto">
+      <div className="bg-[#333333] p-6">
+        <h2 className="text-white text-2xl font-bold">AI Calculator</h2>
+      </div>
+
+      <div className="p-6">
+        <form action={handleSubmit}>
+          <div className="mb-4">
+            <label htmlFor="expression" className="block text-sm font-medium text-gray-300 mb-2">
+              Enter your calculation
+            </label>
+            <div className="relative">
+              <input
+                id="expression"
+                name="expression"
+                type="text"
+                placeholder="E.g. (5 + 3) * 2"
+                className="w-full px-4 py-3 bg-gray-800 border border-gray-700 text-white rounded-lg focus:ring-2 focus:ring-[#24f2ff] focus:border-[#24f2ff] transition-colors"
+              />
+            </div>
+            <p className="text-xs text-gray-400 mt-1">
+              Try complex expressions like "8 * (5 + 3) / 2"
+            </p>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-[#333333] hover:bg-[#444444] focus:ring-4 focus:ring-[#333333]/50 text-white font-medium rounded-lg px-5 py-3 transition-all duration-200 ease-in-out focus:outline-none disabled:opacity-70 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <span className="flex items-center justify-center">
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-black"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+                Calculating...
+              </span>
+            ) : (
+              "Calculate"
+            )}
+          </button>
+        </form>
+
+        {result && (
+          <div className="mt-6 bg-gray-800 border border-gray-700 rounded-lg p-4">
+            <div className="flex justify-between items-center mb-2">
+              <h3 className="text-sm font-semibold text-gray-300">Result</h3>
+              <span className="text-xs bg-[#333333]/20 text-gray-300 px-2 py-1 rounded-full">
+                AI Generated
+              </span>
+            </div>
+            <div className="flex items-center">
+              <div className="mr-2 text-gray-400">{expression} =</div>
+              <div className="text-lg font-bold text-[#fdfd96]">{result}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

examples/with-nextjs/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

examples/with-nextjs/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "VoltAgent Calculator",
+  description: "AI-powered calculation made simple",
+  icons: {
+    icon: "/favicon.ico",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
+    </html>
+  );
+}

examples/with-nextjs/app/page.tsx

@@ -0,0 +1,33 @@
+import { Calculator } from "./components/calculator";
+
+export default function Home() {
+  return (
+    <div className="relative min-h-screen bg-[#1b1b1b] flex flex-col items-center justify-center p-4 overflow-hidden">
+      {/* Dot pattern background */}
+      <div className="absolute inset-0 opacity-10">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: "radial-gradient(#94a3b8 1.2px, transparent 0)",
+            backgroundSize: "20px 20px",
+          }}
+        />
+      </div>
+
+      {/* Removed gradient overlay */}
+
+      <main className="relative w-full max-w-2xl z-10">
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl font-bold text-[#00d992] mb-1">VoltAgent</h1>
+          <p className="text-gray-400">AI-powered calculation made simple</p>
+        </div>
+
+        <Calculator />
+
+        <div className="mt-8 text-center text-sm text-gray-500">
+          <p>Built with Next.js and VoltAgent</p>
+        </div>
+      </main>
+    </div>
+  );
+}

examples/with-nextjs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  serverExternalPackages: ["@voltagent/*", "npm-check-updates"],
+};
+
+export default nextConfig;

examples/with-nextjs/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "voltagent-example-with-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev --turbopack",
+    "lint": "next lint",
+    "start": "next start",
+    "volt": "volt"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^1.3.10",
+    "@libsql/client": "0.15.0",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@voltagent/cli": "^0.1.2",
+    "@voltagent/core": "^0.1.4",
+    "@voltagent/vercel-ai": "^0.1.2",
+    "next": "15.3.1",
+    "npm-check-updates": "^17.1.18",
+    "postcss": "^8.5.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.4",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}

examples/with-nextjs/postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+    plugins: {
+      "@tailwindcss/postcss": {},
+    },
+  };
+  export default config;

examples/with-nextjs/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}