Vue Lynx
  • English

      • AI Chat

      A full-featured AI chatbot ported feature-by-feature from the official Nuxt AI Chatbot template (Nuxt UI + Vercel AI SDK) — probably the most demanding "real-world" validation of Vue Lynx so far: streaming responses with thinking/reasoning, markdown with highlighted code blocks and tables, tool-call cards (weather, charts, web-search sources), chat history with date grouping, votes, message editing, share/rename/delete flows, a model picker, persisted runtime theming with light/dark mode, attachments, fuzzy command-palette search, and a responsive mobile layout with a slide-over sidebar.

      Try the quick prompts below — "What is the weather in Bordeaux?" streams a reasoning section and a weather card; "Show me a chart of sales data" renders an SVG line chart; "Help me create a Vue composable" shows markdown with highlighted code. Scan the QR code in the native tab to run the same bundle in LynxExplorer.

      ai-chatsrc/App.vue

      The playground above runs fully self-contained: the app probes for its API server and, when unreachable, falls back to an in-app demo backend with the same seeded history and deterministic mock AI streams. When you run the example locally with pnpm dev:server, the same UI talks to a standalone Node server that reimplements the Nuxt template's API routes — and streams real models through the Vercel AI Gateway if you set AI_GATEWAY_API_KEY.

      Porting notes

      The port keeps the original's data model (AI SDK v5 UIMessage parts over the UI-message-stream protocol) and nearly all of its composable/page logic, while re-implementing the DOM-coupled layers with Lynx elements:

      AspectNuxt originalVue Lynx
      UI kit@nuxt/ui v4 (UChat*, UDashboard*, Reka UI portals)Hand-built Lynx components (view/text/image/scroll-view/input) with Nuxt UI's semantic design tokens
      Chat state@ai-sdk/vue useChatCustom useChat speaking the same protocol (SSE on web; incremental polling + cancellation on native)
      MarkdownComark + Shiki (HTML)Markdown, including tables, → native-node renderer + lightweight code tokenizer
      Chartsnuxt-charts / Unovis (SVG DOM)Chart generated as an inline SVG string for the native <svg> element
      Dropdowns / modalsAnchored popovers, portalsAction sheets + centered modals at app root
      ThemingTailwind v4 + app.configRuntime --ui-* CSS variables via inline vars (17 primary × 5 neutral picker included)
      ResponsiveTailwind lg: breakpointSystemInfo.pixelWidth / pixelRatio branch (no media queries on Lynx)

      The example directory contains a complete PRD with per-feature parity status (65 features ported/adapted, 10 skipped with reasons), a PORTING.md documenting what was reused vs rewritten plus the platform quirks discovered along the way, and side-by-side screenshot comparisons against the live original captured on Lynx for Web.