[pull] main from chakra-ui:main

website/src/components/marketing/annoucement.tsx

@@ -0,0 +1,18 @@
+import { ArrowRightIcon, SparklesIcon } from 'lucide-react'
+import NextLink from 'next/link'
+import { Badge } from '~/components/ui/badge'
+import { Icon } from '../ui/icon'
+
+export const Announcement = () => {
+  return (
+    <NextLink href="/docs/ai/mcp-server">
+      <Badge size="lg" variant="outline">
+        <Icon color="colorPalette.default">
+          <SparklesIcon />
+        </Icon>
+        [New] MCP Server for AI agents
+        <ArrowRightIcon />
+      </Badge>
+    </NextLink>
+  )
+}

website/src/components/marketing/hero.tsx

@@ -1,27 +1,11 @@
-import { ArrowRightIcon, SparklesIcon } from 'lucide-react'
 import NextLink from 'next/link'
 import { Box, Container, HStack, Stack, styled } from 'styled-system/jsx'
-import { Badge } from '~/components/ui/badge'
 import { Button } from '~/components/ui/button'
 import { Heading } from '~/components/ui/heading'
 import { Text } from '~/components/ui/text'
-import { Icon } from '../ui/icon'
+import { Announcement } from './annoucement'
 import { ReactIcon, SolidIcon, SvelteIcon, VueIcon } from './icons'
 
-const Announcement = () => {
-  return (
-    <NextLink href="/docs/components/scroll-area">
-      <Badge size="lg" variant="outline">
-        <Icon color="colorPalette.default">
-          <SparklesIcon />
-        </Icon>
-        [New] Scroll Area component
-        <ArrowRightIcon />
-      </Badge>
-    </NextLink>
-  )
-}
-
 export const Hero = () => {
   return (
     <Box

website/src/components/navigation/docs/docs-sidebar.tsx

@@ -14,6 +14,9 @@ interface Props {
   groups: Pages[][]
 }
 
+const labelMap = new Map<string, string>([['ai', 'AI for agents']])
+const getLabel = (category: string) => labelMap.get(category) || category
+
 export const DocsSidebar = (props: Props) => {
   const { groups } = props
   const pathname = usePathname()
@@ -27,7 +30,7 @@ export const DocsSidebar = (props: Props) => {
             <li key={id} className={styles.group}>
               <Collapsible.Root defaultOpen>
                 <Collapsible.Trigger className={styles.trigger}>
-                  <span> {group[0].category}</span>
+                  <span> {getLabel(group[0].category)}</span>
                   <Icon size="sm" className={styles.indicator}>
                     <ChevronRightIcon />
                   </Icon>

website/src/components/navigation/navbar.tsx

@@ -1,11 +1,12 @@
 import NextLink from 'next/link'
-import { Divider, HStack, Stack } from 'styled-system/jsx'
+import { Box, Divider, HStack, Stack } from 'styled-system/jsx'
 import { ColorModeButton } from '~/components/color-mode-button'
 import { Logo } from '~/components/logo'
 import { getFramework } from '~/lib/frameworks'
 import { data } from '~/lib/search'
 import { UserButton } from '../auth/user-button'
 import { CommandMenu } from '../command-menu'
+import { Announcement } from '../marketing/annoucement'
 import { FrameworkSelect } from './framework-select'
 import { GitHubLink } from './github-link'
 import { MobileNavbar } from './mobile-navbar'
@@ -24,6 +25,9 @@ export const Navbar = async () => {
             <Logo />
           </NextLink>
           <HStack gap="3" py="1" display={{ base: 'none', md: 'flex' }}>
+            <Box position="absolute" left="300px" hideBelow="xl">
+              <Announcement />
+            </Box>
             <NavbarLinks />
             <Divider orientation="vertical" h="6" />
             <div id="framework-select">

website/src/content/blog/announcing-ark-ui-mcp-server.mdx

@@ -0,0 +1,71 @@
+---
+title: Announcing Ark UI MCP Server
+description: Bridging the gap between AI agents and Ark UI
+date: '2025-09-04'
+author: 'Sage'
+tags: ['ai', 'mcp-server', 'ai-agent']
+---
+
+Today, we're excited to introduce the **Ark UI MCP Server** - a server that provides knowledge of Ark UI (React, Vue,
+Solid, Svelte) to AI agents.
+
+This server is built on the [Model Context Protocol](https://modelcontextprotocol.io/introduction) , and gives AI
+assistants structured access to the Ark UI component system, exposing component examples, styling guidelines, and more.
+
+## Available Tools
+
+The MCP Server exposes these tools to AI agents:
+
+- **`list_components`**: Returns a full list of all available components
+- **`list_examples`**: Lists various component examples
+- **`get_example`**: Retrieves code examples and usage patterns
+- **`styling_guide`**: Provides styling guidelines for components (data attributes and CSS variables)
+
+## Framework Demos
+
+Let's take a look at how different AI tools build Ark UI components using the MCP Server.
+
+### React: Building a Checkbox w/ Copilot
+
+**Using VSCode Copilot** to generate a closed checkbox component in React.
+
+<video src="/videos/mcp-react-demo.mp4" autoPlay loop muted playsInline />
+
+### Vue: Building an OTP Verification w/ Cursor
+
+**Using Cursor** to build an OTP verification component in Vue.
+
+<video src="/videos/mcp-vue-demo.mp4" autoPlay loop muted playsInline />
+
+## Using the MCP Server
+
+Connect the MCP Server to your IDE or AI assistant of choice via the following steps:
+
+### Configure the MCP Server
+
+To get started with the MCP server, add this to your AI tool's configuration file:
+
+```json
+{
+  "mcpServers": {
+    "chakra-ui": {
+      "command": "npx",
+      "args": ["-y", "@chakra-ui/react-mcp"]
+    }
+  }
+}
+```
+
+### Start the MCP Server
+
+In some IDEs (like VSCode), you might need to start the MCP server manually. Click the "Start" button.
+
+## Conclusion
+
+The Ark UI MCP Server helps you build design systems in any framework. Check out the **[MCP docs](/docs/ai/mcp-server)**
+to setup the server in your favorite IDE.
+
+---
+
+Got ideas for making the MCP Server even better? We'd love to hear from you! Share your thoughts on
+[GitHub Discussions](https://github.com/chakra-ui/ark/discussions)

website/src/content/pages/ai/mcp-server.mdx

@@ -0,0 +1,135 @@
+---
+id: mcp-server
+title: MCP Server
+description: Bridging the gap between AI agents and Ark UI.
+status: new
+---
+
+The Ark UI MCP Server is a specialized [Model Context Protocol](https://modelcontextprotocol.io/introduction) server
+that empowers AI agents to build design system components with full knowledge of Ark UI.
+
+<img src="/images/ark-mcp.png" alt="Ark UI MCP Server" width="100%" height="420px" style={{ borderRadius: '10px' }} />
+
+It works with tools like Claude Code, Cursor, and Copilot to generate code and apply design system logic consistently
+across React, Vue, Solid, and Svelte.
+
+## Tools
+
+The Ark UI MCP exposes the following tools to AI agents:
+
+- **`list_components`**: Returns a full list of all available components
+- **`list_examples`**: Lists various component examples
+- **`get_example`**: Retrieves code examples and usage patterns
+- **`styling_guide`**: Provides styling guidelines for components (data attributes and CSS variables)
+
+## Setup
+
+The MCP server currently supports only
+[stdio transport](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) and is published at
+`@ark-ui/mcp`.
+
+### Visual Studio Code
+
+> Make sure you have the [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) and
+> [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) extensions installed.
+
+In the `.vscode/mcp.json` file at the root of your project, add the MCP server block:
+
+```json title=".vscode/mcp.json"
+{
+  "servers": {
+    "ark-ui": {
+      "command": "npx",
+      "args": ["-y", "@ark-ui/mcp"]
+    }
+  }
+}
+```
+
+The MCP server is now ready to use. Click on Start on the MCP server.
+
+### Cursor
+
+In the `.cursor/mcp.json` file at the root of your project, add the following configuration:
+
+```json
+{
+  "mcpServers": {
+    "ark-ui": {
+      "command": "npx",
+      "args": ["-y", "@ark-ui/mcp"]
+    }
+  }
+}
+```
+
+> If Cursor doesn't automatically detect the changes, restart the editor or manually enable the Ark UI server via "MCP
+> Tools."
+
+### Claude Code
+
+> Make sure you have Claude Code installed. Visit [Anthropic docs](https://docs.anthropic.com/en/docs/claude-code/mcp)
+> for installation instructions.
+
+Run the following command in your terminal to add the Ark UI MCP server:
+
+```bash
+claude mcp add ark-ui -- npx -y @ark-ui/mcp
+```
+
+The MCP server is now ready to use. Start a Claude Code session by running `claude`.
+
+### Windsurf
+
+- Navigate to "Settings" > "Windsurf Settings" > "Cascade"
+
+- Click the "Manage MCPs" button, then click the "View raw config" button.
+
+- Add the following to the MCP configuration file:
+
+```json title=".codeium/windsurf/mcp_config.json"
+{
+  "mcpServers": {
+    "ark-ui": {
+      "command": "npx",
+      "args": ["-y", "@ark-ui/mcp"]
+    }
+  }
+}
+```
+
+> You might need to click the "Refresh" button to see the MCP server in the list.
+
+### Zed
+
+- Go to Settings > Open Settings
+
+- In the `settings.json` file, add MCP server as a new **context server**
+
+```json title=".config/zed/settings.json"
+{
+  "context_servers": {
+    "ark-ui": {
+      "source": "custom",
+      "command": "npx",
+      "args": ["-y", "@ark-ui/mcp"]
+    }
+  }
+}
+```
+
+### Custom MCP Client
+
+To run the MCP server in a local or development environment using a custom MCP client, you need to add the MCP server to
+the client's configuration file.
+
+```json
+{
+  "mcpServers": {
+    "ark-ui": {
+      "command": "npx",
+      "args": ["-y", "@ark-ui/mcp"]
+    }
+  }
+}
+```

website/src/content/pages/collections/async-list.mdx

@@ -4,7 +4,6 @@ title: Async List
 description:
   A hook for managing asynchronous data operations in list collections including loading, filtering, sorting, and
   pagination.
-status: new
 ---
 
 The `useAsyncList` hook manages asynchronous data operations for list collections. It provides a comprehensive solution

website/src/content/pages/components/scroll-area.mdx

@@ -2,7 +2,6 @@
 id: scroll-area
 title: Scroll Area
 description: A custom scrollable area component with styled scrollbars.
-status: new
 ---
 
 <ComponentPreview id="ScrollArea" />

website/src/lib/sidebar.ts

@@ -1,15 +1,14 @@
 import { type Pages, pages } from '.velite'
 
-export const categories = ['overview', 'guides', 'collections', 'components', 'utilities']
+export const categories = ['overview', 'guides', 'ai', 'collections', 'components', 'utilities']
+
 export const getSidebarGroups = (): Pages[][] => {
-  const overviewPriority = ['introduction', 'getting-started', 'changelog', 'about', 'llms.txt']
+  const overviewPriority = ['introduction', 'getting-started', 'changelog', 'about']
 
   const sortedCategories = pages.reduce<Record<string, Pages[]>>((acc, page) => {
-    const category = page.category
+    let category = page.category
     if (categories.includes(category)) {
-      if (!acc[category]) {
-        acc[category] = []
-      }
+      acc[category] ||= []
       acc[category].push(page)
     }
     return acc