[V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "d3": "7.9.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]xml:file="public/v0-logo-dark.svg" isMerged="true" [V0_FILE]xml:file="public/v0-logo-light.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/about-demo.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/about-demo-NFqhE.tsx" isMerged="true" "use client" import { ArrowRight } from "lucide-react" export function AboutDemo() { return (

Quick Setup

No complex configurations needed to get started.

Learn by Doing

See AI Agents respond in real-time as you interact.

Production Ready

Real embedding patterns you can use in your apps.

Open Source

Fork and extend the codebase for your projects.

Perfect for

{[ "Learning AI Foundry Agent embedding", "Testing agent configurations before production", "Teaching teammates about AI Agents", "Building proof-of-concepts quickly", "Exploring agent capabilities", "Creating starter templates", ].map((useCase, i) => (

{useCase}

))}

) } [V0_FILE]typescriptreact:file="components/embed-code-form.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/embed-code-form-4ScPC.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ExternalLink, CheckCircle2, AlertCircle, Eye, EyeOff, Loader2 } from "lucide-react" interface EmbedCodeFormProps { onEmbedCodeChange: (code: string) => void onCredentialsChange?: (credentials: { tenantId: string clientId: string clientSecret: string apiUrl: string }) => void onConnectionVerified?: (verified: boolean) => void compact?: boolean } const DEFAULT_VALUES = { tenantId: "", clientId: "", clientSecret: "", apiUrl: "", } export function EmbedCodeForm({ onEmbedCodeChange, onCredentialsChange, onConnectionVerified, compact = false, }: EmbedCodeFormProps) { const [apiUrl, setApiUrl] = useState(DEFAULT_VALUES.apiUrl) const [tenantId, setTenantId] = useState(DEFAULT_VALUES.tenantId) const [clientId, setClientId] = useState(DEFAULT_VALUES.clientId) const [clientSecret, setClientSecret] = useState(DEFAULT_VALUES.clientSecret) const [showSecret, setShowSecret] = useState(false) const [error, setError] = useState("") const [errorDetails, setErrorDetails] = useState("") const [isConnected, setIsConnected] = useState(false) const [isTesting, setIsTesting] = useState(false) const handleChange = (field: string, value: string) => { switch (field) { case "apiUrl": setApiUrl(value) break case "tenantId": setTenantId(value) break case "clientId": setClientId(value) break case "clientSecret": setClientSecret(value) break } setError("") setErrorDetails("") setIsConnected(false) onConnectionVerified?.(false) } const handleTestConnection = async () => { if (!apiUrl.trim()) { setError("API endpoint URL is required") return } if ( !apiUrl.includes("services.ai.azure.com") && !apiUrl.includes("cognitiveservices.azure.com") && !apiUrl.includes("openai.azure.com") ) { setError( "Invalid URL. Please paste a valid AI Foundry project endpoint (e.g., https://.services.ai.azure.com/...)", ) return } if (!tenantId.trim() || !clientId.trim() || !clientSecret.trim()) { setError("All service principal credentials are required") return } setIsTesting(true) setError("") setErrorDetails("") try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: "Hello", apiUrl, tenantId, clientId, clientSecret, }), }) if (!response.ok) { const errorData = await response.json() setError(errorData.error || "Connection failed") setErrorDetails(errorData.details || "") throw new Error(errorData.error || "Connection failed") } setIsConnected(true) onEmbedCodeChange(apiUrl) onCredentialsChange?.({ tenantId, clientId, clientSecret, apiUrl }) onConnectionVerified?.(true) } catch (err) { setIsConnected(false) onConnectionVerified?.(false) } finally { setIsTesting(false) } } if (compact) { return (

Tenant ID handleChange("tenantId", e.target.value)} className="font-mono text-xs" />

Client ID (Application ID) handleChange("clientId", e.target.value)} className="font-mono text-xs" />

Client Secret (Value, not Secret ID)

handleChange("clientSecret", e.target.value)} className="font-mono text-xs pr-10" />

AI Foundry Project Endpoint handleChange("apiUrl", e.target.value)} className="font-mono text-xs" />

{error && (

{error}

{errorDetails &&

{errorDetails}

}

)} {isConnected && (

Connected successfully! Chatbot is ready.

)}

) } return (

Tenant ID

Your Azure AD tenant ID

handleChange("tenantId", e.target.value)} className="font-mono text-xs" />

Client ID (Application ID)

The Application (client) ID from your app registration

handleChange("clientId", e.target.value)} className="font-mono text-xs" />

Client Secret

Important: Use the secret{" "} Value (starts with characters like ~, ., etc.), not the Secret ID (a GUID)

handleChange("clientSecret", e.target.value)} className="font-mono text-xs pr-10" />

AI Foundry Project Endpoint

Find this in your AI Foundry project under Libraries → Foundry

handleChange("apiUrl", e.target.value)} className="font-mono text-xs" />

{error && (

{error}

{errorDetails &&

{errorDetails}

}

)} {isConnected && (

Agent connected successfully

)}

Resources

{[ { title: "AI Foundry Agent Quickstart", url: "https://learn.microsoft.com/en-us/azure/ai-foundry/agents/quickstart", }, { title: "Environment Setup Guide", url: "https://learn.microsoft.com/en-us/azure/ai-foundry/agents/environment-setup", }, { title: "Service Principal Setup", url: "https://learn.microsoft.com/en-us/entra/identity-platform/howto-create-service-principal-portal", }, ].map((resource) => ( {resource.title} ))}

) } [V0_FILE]typescriptreact:file="components/chatbot-renderer.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Send, Loader2 } from "lucide-react" interface ChatbotRendererProps { embedCode: string credentials?: { tenantId: string clientId: string clientSecret: string apiUrl: string } } interface Message { role: "user" | "assistant" content: string timestamp: Date } export function ChatbotRenderer({ embedCode, credentials }: ChatbotRendererProps) { const [messages, setMessages] = useState([ { role: "assistant", content: "Hello! I'm your AI Foundry Agent. Ask me anything about your data.", timestamp: new Date(), }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) const handleSend = async () => { if (!input.trim() || isLoading) return const userMessage: Message = { role: "user", content: input.trim(), timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ apiUrl: embedCode, message: userMessage.content, tenantId: credentials?.tenantId, clientId: credentials?.clientId, clientSecret: credentials?.clientSecret, }), }) const data = await response.json() if (!response.ok) { throw new Error(data.error || "Failed to get response") } const assistantMessage: Message = { role: "assistant", content: data.response, timestamp: new Date(), } setMessages((prev) => [...prev, assistantMessage]) } catch (error) { console.error("[v0] Error calling AI Foundry Agent:", error) setMessages((prev) => [ ...prev, { role: "assistant", content: "Sorry, I couldn't connect to the AI Foundry Agent. Please verify your credentials and API URL are correct.", timestamp: new Date(), }, ]) } finally { setIsLoading(false) } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSend() } } return (

{/* Chatbot Header */}

AI Foundry Agent Chatbot

Ask questions about your data

{/* Messages Container */}

{messages.map((message, index) => (

{message.content}

{message.timestamp.toLocaleTimeString()}

))} {isLoading && (

Thinking...

)}

{/* Input Area */}

setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Ask a question about your data..."
            className="resize-none min-h-[60px]"
            disabled={isLoading}
          />
          <Button
            onClick={handleSend}
            disabled={!input.trim() || isLoading}
            size="icon"
            className="bg-[#7C3AED] hover:bg-[#6D28D9] h-[60px] w-[60px] shrink-0"
          >
            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : <Send className="w-5 h-5" />}
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/floating-background.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/floating-background-CiMy5.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

// AI Foundry related SVG icons
const AIFoundryIcons = {
  chart: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M128 1792h1792v128H128v-128zm1024-256h256v256h-256v-256zm-512-512h256v768h-256v-768zm512-256h256v1024h-256v-1024zm-512-256h256v512h-256v-512zm1024 256h256v768h-256v-768z"
        fill="currentColor"
      />
    </svg>
  ),
  ai: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M512 256h768v512H512V256zm768 640h512v512h-512v-512zm-768 0h512v512H512v-512zm768 640h512v512h-512v-512zM256 256h256v512H256V256zm0 640h256v512H256v-512zm0 640h256v512H256v-512z"
        fill="currentColor"
      />
    </svg>
  ),
  database: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1024 256c376 0 704 80 704 192v384c0 112-328 192-704 192S320 944 320 832V448c0 112 328 192 704 192zm0 768c376 0 704 80 704 192v384c0 112-328 192-704 192S320 1712 320 1600v-384c0 112 328 192 704 192z"
        fill="currentColor"
      />
    </svg>
  ),
  analytics: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path d="M384 256h256v1280H384V256zm576 384h256v896h-256V640zm576-128h256v1024h-256V512z" fill="currentColor" />
    </svg>
  ),
  brain: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1024 128c-494 0-896 402-896 896s402 896 896 896 896-402 896-896-402-896-896-896zm0 1664c-423 0-768-345-768-768s345-768 768-768 768 345 768 768-345 768-768 768zm0-1280c-282 0-512 230-512 512s230 512 512 512 512-230 512-512-230-512-512-512z"
        fill="currentColor"
      />
    </svg>
  ),
  report: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path d="M1728 256H320v1536h1408V256zm-128 1280H448V384h1152v1152z" fill="currentColor" />
    </svg>
  ),
  query: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path d="M256 256h1536v256H256V256zm0 512h1536v256H256v-256zm0 512h1536v256H256v-256z" fill="currentColor" />
    </svg>
  ),
  foundry: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1024 256L256 640v768l768 384 768-384V640l-768-384zm640 896l-640 320-640-320V672l640-320 640 320v480z"
        fill="currentColor"
      />
    </svg>
  ),
}

const iconArray = Object.values(AIFoundryIcons)

export function FloatingBackground() {
  const [positions, setPositions] = useState<
    Array<{ iconIndex: number; left: number; top: number; delay: number; size: number }>
  >([])

useEffect(() => {
    const newPositions = Array.from({ length: 16 }).map(() => ({
      iconIndex: Math.floor(Math.random() * iconArray.length),
      left: Math.random() * 100,
      top: Math.random() * 100,
      delay: Math.random() * 3,
      size: 40 + Math.random() * 60, // 40-100px
    }))
    setPositions(newPositions)
  }, [])

return (
    <div className="floating-icons-bg">
      {positions.map((pos, idx) => (
        <div
          key={idx}
          className="floating-icon-powerbi"
          style={{
            left: `${pos.left}%`,
            top: `${pos.top}%`,
            animationDelay: `${pos.delay}s`,
            width: `${pos.size}px`,
            height: `${pos.size}px`,
            color: "rgba(124, 58, 237, 0.08)",
          }}
        >
          {iconArray[pos.iconIndex]}
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/embed-renderer.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/embed-renderer-N4RPm.tsx" isMerged="true"
interface EmbedRendererProps {
  embedCode: string
}

export function EmbedRenderer({ embedCode }: EmbedRendererProps) {
  return (
    <div className="w-full h-full flex items-center justify-center">
      <div
        dangerouslySetInnerHTML={{ __html: embedCode }}
        className="w-full h-full [&_iframe]:w-full [&_iframe]:h-full [&_iframe]:rounded-none"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-flow-viz.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/data-flow-viz-dBVkg.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import * as d3 from "d3"

export function DataFlowViz() {
  const svgRef = useRef<SVGSVGElement>(null)

useEffect(() => {
    if (!svgRef.current) return

const width = svgRef.current.clientWidth
    const height = svgRef.current.clientHeight

// Create SVG with D3
    const svg = d3
      .select(svgRef.current)
      .attr("viewBox", `0 0 ${width} ${height}`)
      .attr("preserveAspectRatio", "xMidYMid meet")

svg.selectAll("*").remove()

// Create a group for the visualization
    const g = svg.append("g").attr("transform", `translate(${width / 2},${height / 2})`)

// Data nodes representing Power BI data flow
    const nodes = [
      { id: "source", label: "Data Source", angle: 0, color: "#0078D4" },
      { id: "transform", label: "Transform", angle: 72, color: "#50E6FF" },
      { id: "analyze", label: "Analyze", angle: 144, color: "#FFB900" },
      { id: "visualize", label: "Visualize", angle: 216, color: "#107C10" },
      { id: "share", label: "Share", angle: 288, color: "#8661C5" },
    ]

const radius = Math.min(width, height) / 4

// Create connections
    nodes.forEach((d, i) => {
      const nextNode = nodes[(i + 1) % nodes.length]
      const startAngle = (d.angle * Math.PI) / 180
      const endAngle = (nextNode.angle * Math.PI) / 180

const x1 = Math.cos(startAngle) * radius
      const y1 = Math.sin(startAngle) * radius
      const x2 = Math.cos(endAngle) * radius
      const y2 = Math.sin(endAngle) * radius

// Draw connections with gradients
      const defs = svg.append("defs")
      const gradient = defs
        .append("linearGradient")
        .attr("id", `grad-${i}`)
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "100%")
        .attr("y2", "100%")

gradient.append("stop").attr("offset", "0%").attr("stop-color", d.color).attr("stop-opacity", 0.3)

gradient.append("stop").attr("offset", "100%").attr("stop-color", nextNode.color).attr("stop-opacity", 0.3)

g.append("line")
        .attr("x1", x1)
        .attr("y1", y1)
        .attr("x2", x2)
        .attr("y2", y2)
        .attr("stroke", `url(#grad-${i})`)
        .attr("stroke-width", 2)
        .attr("opacity", 0.5)
    })

// Create nodes
    g.selectAll(".node")
      .data(nodes)
      .enter()
      .append("circle")
      .attr("class", "node")
      .attr("cx", (d) => Math.cos((d.angle * Math.PI) / 180) * radius)
      .attr("cy", (d) => Math.sin((d.angle * Math.PI) / 180) * radius)
      .attr("r", 0)
      .attr("fill", (d) => d.color)
      .attr("opacity", 0.9)
      .transition()
      .duration(800)
      .attr("r", 24)

// Add labels
    g.selectAll(".label")
      .data(nodes)
      .enter()
      .append("text")
      .attr("class", "label")
      .attr("x", (d) => Math.cos((d.angle * Math.PI) / 180) * radius)
      .attr("y", (d) => Math.sin((d.angle * Math.PI) / 180) * radius)
      .attr("dy", "0.3em")
      .attr("text-anchor", "middle")
      .attr("font-size", "11px")
      .attr("font-weight", "600")
      .attr("fill", "white")
      .attr("pointer-events", "none")
      .text((d) => d.label.split(" ")[0])

// Add center circle
    g.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 0)
      .attr("fill", "none")
      .attr("stroke", "#E7E5E4")
      .attr("stroke-width", 1)
      .attr("opacity", 0.3)
      .transition()
      .duration(800)
      .attr("r", 60)

// Animate connections flowing
    const animateFlow = () => {
      g.selectAll("line").each(function (d, i) {
        const line = d3.select(this)
        const length = Math.sqrt(
          Math.pow(Number.parseInt(line.attr("x2")) - Number.parseInt(line.attr("x1")), 2) +
            Math.pow(Number.parseInt(line.attr("y2")) - Number.parseInt(line.attr("y1")), 2),
        )

line
          .attr("stroke-dasharray", length)
          .attr("stroke-dashoffset", length)
          .transition()
          .duration(2000)
          .ease(d3.easeLinear)
          .attr("stroke-dashoffset", 0)
          .on("end", animateFlow)
      })
    }

setTimeout(animateFlow, 1000)
  }, [])

return (
    <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-muted/20 to-muted/5 rounded-lg border border-border/40 p-6">
      <svg ref={svgRef} className="w-full h-full" style={{ minHeight: "300px" }} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/footer-wV31y.tsx" isMerged="true"
"use client"

import { ExternalLink } from "lucide-react"

export function Footer() {
  return (
    <footer className="border-t border-border/40 bg-background/50 mt-24">
      <div className="max-w-7xl mx-auto px-4 py-16">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
          {/* Column 1: Resources - Updated links for AI Foundry */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">Resources</h3>
            <ul className="space-y-2.5 text-xs text-muted-foreground">
              <li>
                <a
                  href="https://learn.microsoft.com/en-us/azure/ai-foundry/agents/quickstart"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  Agent Quickstart
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://learn.microsoft.com/en-us/azure/ai-foundry/agents/environment-setup"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  Environment Setup
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://learn.microsoft.com/en-us/azure/ai-foundry/how-to/develop/sdk-overview"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  SDK Overview
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
            </ul>
          </div>

{/* Column 2: Community */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">Community</h3>
            <ul className="space-y-2.5 text-xs text-muted-foreground">
              <li>
                <a
                  href="https://v0.app"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition"
                >
                  v0
                </a>
              </li>
              <li>
                <a
                  href="https://community.vercel.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  v0 Community
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://vercel.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition"
                >
                  Vercel
                </a>
              </li>
            </ul>
          </div>

{/* Column 3: Azure */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">Azure AI</h3>
            <ul className="space-y-2.5 text-xs text-muted-foreground">
              <li>
                <a
                  href="https://ai.azure.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  AI Foundry Portal
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://learn.microsoft.com/en-us/azure/ai-foundry/agents/concepts/model-region-support"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition"
                >
                  Supported Models
                </a>
              </li>
              <li>
                <a
                  href="https://learn.microsoft.com/en-us/azure/ai-foundry/concepts/rbac-azure-ai-foundry"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition"
                >
                  RBAC Roles
                </a>
              </li>
            </ul>
          </div>

{/* Column 4: About */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">About</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              An interactive educational demo showcasing Azure AI Foundry Agent embedding. Built for the v0 community.
            </p>
          </div>
        </div>

{/* Bottom Bar */}
        <div className="border-t border-border/40 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-muted-foreground">
            Built with <span className="text-primary font-medium">v0</span> for the community
          </p>
          <p className="text-xs text-muted-foreground">© 2026 AI Foundry Embedding Demo</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Updated color scheme from green (Fabric) to purple (AI Foundry) */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.45 0.18 285);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.145 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.55 0.2 285);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.45 0.18 285);
  --chart-1: oklch(0.45 0.18 285);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.45 0.18 285);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.45 0.18 285);
  --foundry-purple: oklch(0.55 0.2 285);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.65 0.22 285);
  --primary-foreground: oklch(0.145 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.7 0.25 285);
  --accent-foreground: oklch(0.145 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.65 0.22 285);
  --chart-1: oklch(0.65 0.25 285);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.65 0.25 285);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.65 0.22 285);
  --foundry-purple: oklch(0.7 0.25 285);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "AI Foundry Agent Embedding Demo",
  description: "Learn how to embed AI Foundry Agents in your applications with interactive chatbots",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/step-guide.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ExternalLink, ChevronRight } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
import { EmbedCodeForm } from "./embed-code-form"

interface StepGuideProps {
  onStepsComplete: (complete: boolean) => void
  onEmbedCodeChange: (code: string) => void
  onCredentialsChange?: (credentials: { tenantId: string; clientId: string; clientSecret: string }) => void
  onConnectionVerified?: (verified: boolean) => void
}

export function StepGuide({
  onStepsComplete,
  onEmbedCodeChange,
  onCredentialsChange,
  onConnectionVerified,
}: StepGuideProps) {
  const [activeModal, setActiveModal] = useState<number | null>(null)

const steps = [
    {
      number: 1,
      title: "Create AI Foundry Project & Agent",
      description: "Set up your project in Azure AI Foundry portal and create an agent.",
    },
    {
      number: 2,
      title: "Configure Service Principal",
      description: "Create an Azure AD app registration with Azure AI User role.",
    },
    {
      number: 3,
      title: "Connect Your Agent",
      description: "Enter your project endpoint and credentials to test the connection.",
    },
  ]

const stepModals = [
    {
      title: "Create an AI Foundry Project & Agent",
      description: "Follow these steps to create your AI Agent in Azure AI Foundry.",
      content: (
        <div className="space-y-4">
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Step 1: Create a Foundry Account & Project</h4>
            <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
              <li>
                Go to <strong>ai.azure.com</strong> (Microsoft Foundry portal)
              </li>
              <li>
                Click <strong>Create an agent</strong> for the fastest setup
              </li>
              <li>Enter a name for your project</li>
              <li>
                Click <strong>Create</strong> and wait for resources to provision
              </li>
              <li>A GPT-4o model will be automatically deployed</li>
            </ol>
          </div>
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Step 2: Configure Your Agent</h4>
            <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
              <li>In the agent playground, give your agent instructions</li>
              <li>Example: "You are a helpful agent that can answer questions about geography."</li>
              <li>Add tools like Code Interpreter if needed</li>
              <li>Test your agent in the playground</li>
            </ol>
          </div>
          <div className="p-3 bg-muted/50 rounded-lg border border-border/40">
            <p className="text-xs text-muted-foreground">
              <strong>Tip:</strong> Find your project endpoint in the project overview under{" "}
              <strong>Libraries → Foundry</strong>
              <br />
              <code className="text-xs mt-1 block">
                Format: https://<resource>.services.ai.azure.com/api/projects/<project>
              </code>
            </p>
          </div>
          <a
            href="https://learn.microsoft.com/en-us/azure/ai-foundry/agents/quickstart"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
          >
            <ExternalLink className="w-4 h-4" />
            Microsoft Docs: AI Foundry Agent Quickstart
          </a>
        </div>
      ),
    },
    {
      title: "Configure Service Principal Access",
      description: "Set up an Azure AD app registration to authenticate with your AI Foundry Agent.",
      content: (
        <div className="space-y-4">
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Step 1: Create App Registration</h4>
            <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
              <li>
                Go to <strong>Azure Portal</strong> → <strong>Microsoft Entra ID</strong>
              </li>
              <li>
                Navigate to <strong>App registrations</strong> → <strong>New registration</strong>
              </li>
              <li>Name your app (e.g., "AI Foundry Agent Client")</li>
              <li>
                Set account type to <strong>Single tenant</strong>
              </li>
              <li>
                Click <strong>Register</strong>
              </li>
            </ol>
          </div>
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Step 2: Create Client Secret</h4>
            <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
              <li>
                In your app, go to <strong>Certificates & secrets</strong>
              </li>
              <li>
                Click <strong>New client secret</strong>
              </li>
              <li>Copy the secret value immediately (you won't see it again!)</li>
            </ol>
          </div>
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Step 3: Grant Azure AI User Role</h4>
            <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
              <li>Go to your AI Foundry project in Azure Portal</li>
              <li>
                Navigate to <strong>Access control (IAM)</strong>
              </li>
              <li>
                Add role assignment: <strong>Azure AI User</strong>
              </li>
              <li>Assign to your service principal</li>
            </ol>
          </div>
          <div className="p-3 bg-amber-50 dark:bg-amber-950/30 rounded-lg border border-amber-200 dark:border-amber-800">
            <p className="text-xs text-amber-700 dark:text-amber-400">
              <strong>Important:</strong> The Azure AI User role is required for creating and editing agents. Minimum
              permissions needed: agents/*/read, agents/*/action, agents/*/delete
            </p>
          </div>
          <a
            href="https://learn.microsoft.com/en-us/azure/ai-foundry/concepts/rbac-azure-ai-foundry"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
          >
            <ExternalLink className="w-4 h-4" />
            Microsoft Docs: AI Foundry RBAC Roles
          </a>
        </div>
      ),
    },
    {
      title: "Behind the Scenes: How It Works",
      description: "Technical details about how this demo connects to your AI Foundry Agent.",
      content: (
        <div className="space-y-4">
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Authentication Flow</h4>
            <p className="text-sm text-muted-foreground">When you click "Test Connection", the following happens:</p>
            <div className="p-3 bg-muted/50 rounded-lg border border-border/40 space-y-2">
              <p className="text-xs font-mono">1. Request access token from Azure AD</p>
              <pre className="text-xs font-mono text-muted-foreground overflow-x-auto">
                {`POST https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token
grant_type=client_credentials
client_id={clientId}
client_secret={clientSecret}
scope=https://cognitiveservices.azure.com/.default`}
              </pre>
            </div>
          </div>
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Calling the AI Foundry Agent</h4>
            <div className="p-3 bg-muted/50 rounded-lg border border-border/40 space-y-2">
              <p className="text-xs font-mono">2. Send chat message to AI Foundry Agent API</p>
              <pre className="text-xs font-mono text-muted-foreground overflow-x-auto">
                {`POST {projectEndpoint}/agents/{agentId}/threads/{threadId}/messages
Authorization: Bearer {accessToken}
Content-Type: application/json

{
  "role": "user",
  "content": "Your question"
}`}
              </pre>
            </div>
          </div>
          <div className="space-y-3">
            <h4 className="font-semibold text-sm">Python SDK Alternative</h4>
            <p className="text-sm text-muted-foreground">For production apps, use the official Azure AI SDK:</p>
            <div className="p-3 bg-muted/50 rounded-lg border border-border/40">
              <pre className="text-xs font-mono text-muted-foreground overflow-x-auto">
                {`from azure.identity import ClientSecretCredential
from azure.ai.projects import AIProjectClient

credential = ClientSecretCredential(
    tenant_id="...",
    client_id="...",
    client_secret="..."
)

client = AIProjectClient(
    endpoint="https://<resource>.services.ai.azure.com/api/projects/<project>",
    credential=credential
)

# Create and run an agent
agent = client.agents.create_agent(
    model="gpt-4o",
    name="my-agent",
    instructions="You are a helpful assistant."
)`}
              </pre>
            </div>
          </div>
          <a
            href="https://learn.microsoft.com/en-us/azure/ai-foundry/how-to/develop/sdk-overview"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
          >
            <ExternalLink className="w-4 h-4" />
            Microsoft Docs: Azure AI Foundry SDK
          </a>
        </div>
      ),
    },
  ]

return (
    <div className="space-y-5">
      {/* Main Steps - Clickable */}
      <div className="space-y-3">
        {steps.map((step, index) => (
          <button
            key={index}
            onClick={() => setActiveModal(index)}
            className="w-full text-left p-3 rounded-lg border border-border/40 bg-card/50 hover:bg-muted/50 hover:border-primary/30 transition-colors group"
          >
            <div className="flex gap-3 items-start">
              <div className="flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center font-semibold text-xs bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
                {step.number}
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-foreground text-sm">{step.title}</h3>
                  <ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
                </div>
                <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{step.description}</p>
              </div>
            </div>
          </button>
        ))}
      </div>

{/* Divider */}
      <div className="h-px bg-border/40" />

{/* Form Section */}
      <EmbedCodeForm
        onEmbedCodeChange={onEmbedCodeChange}
        onCredentialsChange={onCredentialsChange}
        onConnectionVerified={onConnectionVerified}
        compact={true}
      />

{/* Resources */}
      <div className="space-y-2 pt-3 border-t border-border/40">
        <h4 className="font-semibold text-foreground text-xs">LEARN MORE</h4>
        <div className="space-y-1">
          <a
            href="https://learn.microsoft.com/en-us/azure/ai-foundry/agents/quickstart"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center text-xs text-primary hover:text-primary/80 transition font-medium"
          >
            → AI Foundry Agent Quickstart
          </a>
          <a
            href="https://learn.microsoft.com/en-us/azure/ai-foundry/agents/environment-setup"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center text-xs text-primary hover:text-primary/80 transition font-medium"
          >
            → Environment Setup Guide
          </a>
        </div>
      </div>

{/* Step Detail Modals */}
      {stepModals.map((modal, index) => (
        <Dialog key={index} open={activeModal === index} onOpenChange={(open) => !open && setActiveModal(null)}>
          <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{modal.title}</DialogTitle>
              <DialogDescription>{modal.description}</DialogDescription>
            </DialogHeader>
            <div className="py-4">{modal.content}</div>
          </DialogContent>
        </Dialog>
      ))}
    </div>
  )
}
[V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true"
import { NextRequest, NextResponse } from "next/server";

interface TokenCache {
  token: string;
  expiresAt: number;
}

const tokenCache = new Map<string, TokenCache>();

async function getAzureToken(
  tenantId: string,
  clientId: string,
  clientSecret: string
): Promise<string> {
  const cacheKey = `${tenantId}:${clientId}`;
  const cached = tokenCache.get(cacheKey);

// Return cached token if still valid (with 5 min buffer)
  if (cached && cached.expiresAt > Date.now() + 5 * 60 * 1000) {
    return cached.token;
  }

const tokenUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;

const response = await fetch(tokenUrl, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({
      client_id: clientId,
      client_secret: clientSecret,
      scope: "https://cognitiveservices.azure.com/.default",
      grant_type: "client_credentials",
    }),
  });

if (!response.ok) {
    const error = await response.text();
    throw new Error(`Failed to get Azure token: ${error}`);
  }

const data = await response.json();
  const token = data.access_token;
  const expiresIn = data.expires_in || 3600;

// Cache the token
  tokenCache.set(cacheKey, {
    token,
    expiresAt: Date.now() + expiresIn * 1000,
  });

return token;
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { message, apiUrl, tenantId, clientId, clientSecret } = body;

if (!tenantId || !clientId || !clientSecret || !apiUrl) {
      return NextResponse.json(
        { error: "Missing required credential fields", details: "Please provide tenantId, clientId, clientSecret, and apiUrl" },
        { status: 400 }
      );
    }

if (!message) {
      return NextResponse.json(
        { error: "Missing message" },
        { status: 400 }
      );
    }

// Get Azure AD token
    let token: string;
    try {
      token = await getAzureToken(tenantId, clientId, clientSecret);
    } catch (tokenError) {
      console.error("Token error:", tokenError);
      return NextResponse.json(
        { 
          error: "Authentication failed", 
          details: tokenError instanceof Error ? tokenError.message : "Failed to get Azure AD token. Check your tenant ID, client ID, and client secret."
        },
        { status: 401 }
      );
    }

// Call the AI Foundry agent endpoint
    const agentResponse = await fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        messages: [
          { role: "user", content: message }
        ],
      }),
    });

if (!agentResponse.ok) {
      const errorText = await agentResponse.text();
      console.error("Agent API error:", errorText);
      return NextResponse.json(
        { 
          error: `Agent API error: ${agentResponse.status}`, 
          details: errorText.substring(0, 200)
        },
        { status: agentResponse.status }
      );
    }

const agentData = await agentResponse.json();

// Handle different response formats from AI Foundry
    let assistantMessage = "";

if (agentData.choices && agentData.choices[0]?.message?.content) {
      // OpenAI-compatible format
      assistantMessage = agentData.choices[0].message.content;
    } else if (agentData.output) {
      // Direct output format
      assistantMessage = agentData.output;
    } else if (agentData.result) {
      // Result format
      assistantMessage = agentData.result;
    } else if (agentData.content) {
      // Content format
      assistantMessage = agentData.content;
    } else if (typeof agentData === "string") {
      assistantMessage = agentData;
    } else {
      // Fallback: return the raw response
      assistantMessage = JSON.stringify(agentData);
    }

return NextResponse.json({
      response: assistantMessage,
    });
  } catch (error) {
    console.error("Chat API error:", error);
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Internal server error" },
      { status: 500 }
    );
  }
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { StepGuide } from "@/components/step-guide"
import { ChatbotRenderer } from "@/components/chatbot-renderer"
import { Footer } from "@/components/footer"
import { AboutDemo } from "@/components/about-demo"
import { HeroSection } from "@/components/hero-section"

export default function Home() {
  const [embedCode, setEmbedCode] = useState("")
  const [showSteps, setShowSteps] = useState(true)
  const [connectionVerified, setConnectionVerified] = useState(false)
  const [credentials, setCredentials] = useState<{
    tenantId: string
    clientId: string
    clientSecret: string
    apiUrl: string
  }>()

return (
    <div className="min-h-screen flex flex-col bg-background relative">
      <div className="relative z-10">
        <main className="flex-1 w-full flex flex-col">
          {/* Hero Section */}
          <HeroSection />

<section className="flex-1 flex">
            {/* Left Column: Steps & Instructions */}
            <div className="w-full md:w-[500px] border-r border-border/40 overflow-y-auto bg-muted/20">
              <div className="p-4 md:p-5 space-y-5">
                <StepGuide
                  onStepsComplete={setShowSteps}
                  onEmbedCodeChange={setEmbedCode}
                  onCredentialsChange={setCredentials}
                  onConnectionVerified={setConnectionVerified}
                />
              </div>
            </div>

{/* Right Column: Full-size Chatbot Preview */}
            <div className="flex-1 flex flex-col h-screen md:h-[calc(100vh-200px)]">
              {embedCode && connectionVerified ? (
                <div className="flex-1 flex flex-col overflow-hidden">
                  <div className="border-b border-border/40 px-6 md:px-8 py-4">
                    <h2 className="text-sm font-semibold text-foreground">Live Chatbot Preview</h2>
                    <p className="text-xs text-muted-foreground mt-1">Your embedded AI Foundry Agent</p>
                  </div>
                  <div className="flex-1 overflow-auto bg-gradient-to-br from-primary/5 via-background to-accent/5">
                    <div className="w-full h-full p-4 md:p-6">
                      <ChatbotRenderer embedCode={embedCode} credentials={credentials} />
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex-1 flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
                  <div className="text-center space-y-6 px-6 max-w-md">
                    <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-[#7C3AED]/20 to-[#5B21B6]/10 mx-auto flex items-center justify-center">
                      <svg className="w-10 h-10 text-[#7C3AED]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
                        />
                      </svg>
                    </div>
                    <div className="space-y-2">
                      <h3 className="text-xl font-semibold text-foreground">Ready to Preview Your Agent</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Follow the steps on the left to get your AI Foundry Agent embed code, then paste it to see your
                        agent in action right here.
                      </p>
                    </div>
                    <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
                      <div className="w-1.5 h-1.5 rounded-full bg-[#7C3AED]/60 animate-pulse" />
                      <span>Waiting for embed code...</span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </section>
        </main>

<Footer />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx"
"use client"

export function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-background">
      {/* Header */}
      <header className="max-w-7xl mx-auto w-full px-6 py-4 flex justify-end">
        <a
          href="https://dalysystems.ai"
          target="_blank"
          rel="noopener noreferrer"
          className="text-foreground hover:opacity-70 transition-opacity"
        >
          <span className="font-normal">dalysystems</span>
          <span className="text-muted-foreground/60">.ai</span>
        </a>
      </header>

<div className="max-w-7xl mx-auto w-full px-6 py-12 md:py-20">
        <div className="max-w-4xl mx-auto text-center space-y-6">
          <div className="relative">
            <h1 className="text-5xl md:text-7xl font-semibold tracking-tight leading-tight">
              Embed{" "}
              <span className="bg-gradient-to-r from-[#7C3AED] to-[#5B21B6] bg-clip-text text-transparent [-webkit-background-clip:text] pr-1">
                AI Foundry
              </span>
              .
            </h1>
            <p className="text-5xl md:text-7xl font-semibold tracking-tight leading-tight text-muted-foreground mt-2">
              In minutes.
            </p>
          </div>

<p className="text-xl md:text-2xl text-muted-foreground font-light leading-relaxed max-w-3xl mx-auto text-balance">
            Learn how to take your AI Foundry Agents beyond the workspace. Paste your embed code, preview it live, and
            see exactly how to integrate conversational AI into your own websites and applications.
          </p>

<div className="pt-4 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-muted-foreground/80">
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 rounded-full bg-accent" />
              <span>Conversational AI</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 rounded-full bg-accent" />
              <span>Live preview</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 rounded-full bg-accent" />
              <span>Get publish link</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This