From e5b4dfbecf098fb14d6b85244eefc7826537eb4e Mon Sep 17 00:00:00 2001 From: Anayatkhan1 Date: Sun, 12 Jul 2026 14:20:15 +0530 Subject: [PATCH 1/3] refactor: update demo app and documentation for agent integration - Removed references to NEXT_PUBLIC_AGENT_DEMO_URL from environment files and CI workflows. - Updated README and other documentation to clarify the use of simulated examples in the docs and the optional local demo app. - Enhanced the AgentDemoPreview component to utilize the new AgentDemoPlayer for improved user experience. - Adjusted component preview tabs to support dynamic height and code labeling. - Revised marketing text to reflect the interactive nature of agent examples. --- .env.example | 3 +- .github/workflows/ci.yml | 1 - README.md | 9 +- apps/web/.env.example | 1 - apps/web/components/agent-demo-preview.tsx | 23 +- .../agent-demo/agent-demo-formatted-text.tsx | 126 +++++++++ .../agent-demo/agent-demo-input.tsx | 89 +++++++ .../agent-demo/agent-demo-message.tsx | 96 +++++++ .../agent-demo/agent-demo-player.tsx | 244 ++++++++++++++++++ .../agent-demo/agent-demo-thinking.tsx | 33 +++ .../agent-demo/agent-demo-tool-steps.tsx | 66 +++++ .../web/components/component-preview-tabs.tsx | 29 ++- apps/web/components/marketing/benefits.tsx | 2 +- apps/web/content/docs/(root)/changelog.mdx | 8 + apps/web/content/docs/(root)/index.mdx | 4 +- apps/web/content/docs/(root)/scope.mdx | 4 +- apps/web/lib/agent-demos/index.ts | 29 +++ apps/web/lib/agent-demos/tool-labels.ts | 39 +++ apps/web/lib/agent-demos/types.ts | 33 +++ apps/web/lib/agent-demos/web-agent.ts | 49 ++++ examples/agent-ui-template/README.md | 23 +- 21 files changed, 862 insertions(+), 49 deletions(-) create mode 100644 apps/web/components/agent-demo/agent-demo-formatted-text.tsx create mode 100644 apps/web/components/agent-demo/agent-demo-input.tsx create mode 100644 apps/web/components/agent-demo/agent-demo-message.tsx create mode 100644 apps/web/components/agent-demo/agent-demo-player.tsx create mode 100644 apps/web/components/agent-demo/agent-demo-thinking.tsx create mode 100644 apps/web/components/agent-demo/agent-demo-tool-steps.tsx create mode 100644 apps/web/lib/agent-demos/index.ts create mode 100644 apps/web/lib/agent-demos/tool-labels.ts create mode 100644 apps/web/lib/agent-demos/types.ts create mode 100644 apps/web/lib/agent-demos/web-agent.ts diff --git a/.env.example b/.env.example index f8e47eb..a504fa6 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,3 @@ # Required for agent ANTHROPIC_API_KEY= -AGENTCN_REGISTRY_URL=https://agentcn.dev/r -NEXT_PUBLIC_AGENT_DEMO_URL= \ No newline at end of file +AGENTCN_REGISTRY_URL=https://agentcn.dev/r \ No newline at end of file diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 81b4c45..e57189e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -45,7 +45,6 @@ jobs: timeout-minutes: 15 env: NEXT_PUBLIC_APP_URL: https://agentcn.dev - NEXT_PUBLIC_AGENT_DEMO_URL: https://kit-demo-agentcn-ui.vercel.app steps: - name: Checkout repository uses: actions/checkout@v4 diff --git a/README.md b/README.md index d0ed136..c42372f 100644 --- a/README.md +++ b/README.md @@ -78,16 +78,18 @@ pnpm web Open [http://localhost:3000](http://localhost:3000) for the marketing site and docs. -### Run the agent demo embed +### Run the agent demo app (optional) -The docs live preview expects a demo app on port **3001**: +For live agent testing with your API keys, run the demo app on port **3001**: ```bash cd examples/agent-ui-template pnpm install -pnpm dev:embed # port 3001 — matches NEXT_PUBLIC_AGENT_DEMO_URL +pnpm dev:embed # port 3001 ``` +Docs agent pages use simulated examples and do not require this app. + ### Build for production ```bash @@ -112,7 +114,6 @@ For the docs site (`apps/web/.env`): ```env NEXT_PUBLIC_APP_URL=http://localhost:3000 -NEXT_PUBLIC_AGENT_DEMO_URL=http://localhost:3001 ``` ### Getting API keys diff --git a/apps/web/.env.example b/apps/web/.env.example index 408d605..0090f17 100644 --- a/apps/web/.env.example +++ b/apps/web/.env.example @@ -1,2 +1 @@ NEXT_PUBLIC_APP_URL=https://agentcn.dev -NEXT_PUBLIC_AGENT_DEMO_URL=http://localhost:3001 diff --git a/apps/web/components/agent-demo-preview.tsx b/apps/web/components/agent-demo-preview.tsx index e3f31e5..ba8463c 100644 --- a/apps/web/components/agent-demo-preview.tsx +++ b/apps/web/components/agent-demo-preview.tsx @@ -3,33 +3,28 @@ import Link from "next/link" import { CodeBlockCommand } from "@/components/code-block-command" +import { AgentDemoPlayer } from "@/components/agent-demo/agent-demo-player" import { ComponentPreviewTabs } from "@/components/component-preview-tabs" -const demoBaseUrl = - process.env.NEXT_PUBLIC_AGENT_DEMO_URL ?? "http://localhost:3001" - export function AgentDemoPreview({ agentId = "web-agent", - align = "center", + align = "start", replayable = true, }: { agentId?: string align?: "center" | "start" | "end" replayable?: boolean }) { - const embedUrl = `${demoBaseUrl.replace(/\/$/, "")}/embed/${agentId}` - return ( +
+ +
} source={
@@ -48,11 +43,11 @@ export function AgentDemoPreview({ __bun__="bunx agentcn@latest add web-agent" />

- Run the demo app locally (requires API keys in{" "} + Run the demo app locally for a live agent with your API keys in{" "} .env.local - ): + : 

diff --git a/apps/web/components/agent-demo/agent-demo-formatted-text.tsx b/apps/web/components/agent-demo/agent-demo-formatted-text.tsx
new file mode 100644
index 0000000..08c2ed3
--- /dev/null
+++ b/apps/web/components/agent-demo/agent-demo-formatted-text.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import Link from "next/link"
+import type { ReactNode } from "react"
+
+type InlineNode =
+  | { type: "text"; value: string }
+  | { type: "bold"; value: string }
+  | { type: "link"; label: string; href: string }
+
+function parseInline(text: string): InlineNode[] {
+  const nodes: InlineNode[] = []
+  const pattern = /(\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\))/g
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push({ type: "text", value: text.slice(lastIndex, match.index) })
+    }
+
+    const token = match[0]
+    if (token.startsWith("**")) {
+      nodes.push({ type: "bold", value: token.slice(2, -2) })
+    } else {
+      const linkMatch = token.match(/^\[([^\]]+)\]\(([^)]+)\)$/)
+      if (linkMatch) {
+        nodes.push({
+          type: "link",
+          label: linkMatch[1],
+          href: linkMatch[2],
+        })
+      } else {
+        nodes.push({ type: "text", value: token })
+      }
+    }
+
+    lastIndex = match.index + token.length
+  }
+
+  if (lastIndex < text.length) {
+    nodes.push({ type: "text", value: text.slice(lastIndex) })
+  }
+
+  return nodes.length > 0 ? nodes : [{ type: "text", value: text }]
+}
+
+function InlineContent({ text }: { text: string }) {
+  return (
+    <>
+      {parseInline(text).map((node, index) => {
+        if (node.type === "bold") {
+          return (
+            
+              {node.value}
+            
+          )
+        }
+
+        if (node.type === "link") {
+          return (
+            
+              {node.label}
+            
+          )
+        }
+
+        return {node.value}
+      })}
+    
+  )
+}
+
+export function AgentDemoFormattedText({ text }: { text: string }) {
+  const lines = text.split("\n")
+  const blocks: ReactNode[] = []
+  let listItems: string[] = []
+
+  const flushList = () => {
+    if (listItems.length === 0) return
+    blocks.push(
+      
    
+        {listItems.map((item, index) => (
+          
  • 
+            •
+            
+              
+            
+          
    • 
+        ))}
+      

+    )
+    listItems = []
+  }
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+
+    if (!trimmed) {
+      flushList()
+      continue
+    }
+
+    if (trimmed.startsWith("•")) {
+      listItems.push(trimmed.replace(/^•\s*/, ""))
+      continue
+    }
+
+    flushList()
+    blocks.push(
+      

+        
+      

+    )
+  }
+
+  flushList()
+
+  return 
{blocks}

+}
diff --git a/apps/web/components/agent-demo/agent-demo-input.tsx b/apps/web/components/agent-demo/agent-demo-input.tsx
new file mode 100644
index 0000000..eaf3650
--- /dev/null
+++ b/apps/web/components/agent-demo/agent-demo-input.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { ArrowUp, Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+
+export function AgentDemoInput({
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+  hint,
+  isLoading,
+}: {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  disabled?: boolean
+  hint?: string
+  isLoading?: boolean
+}) {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit()
+  }
+
+  return (
+    

+      {hint ? (
+        

+          {hint}
+        

+      ) : (
+        

+          Press send to replay the example with tool steps.
+        

+      )}
+      

+        

+