import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,img:`img`,li:`li`,p:`p`,pre:`pre`,strong:`strong`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/AI Integration`}),`
`,(0,c.jsx)(t.h1,{id:`ai-integration`,children:`AI Integration`}),`
`,(0,c.jsx)(t.p,{children:`The Design System provides tools that expose Preply Design System knowledge to AI coding assistants — components, documentation, design tokens, and icons. There are two integration options:`}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.strong,{children:`Agent Skill`}),` — works with any AI agent (Cursor, Claude Code, Codex, Copilot, etc.). Recommended.`]}),`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.strong,{children:`MCP Server`}),` — for MCP-compatible clients (Cursor, Claude Code). Requires MCP client support.`]}),`
`]}),`
`,(0,c.jsx)(t.p,{children:`Both methods expose the same underlying tools and return identical results.`}),`
`,(0,c.jsx)(t.h2,{id:`agent-skill-recommended`,children:`Agent Skill (recommended)`}),`
`,(0,c.jsx)(t.p,{children:`The agent skill teaches your AI assistant how to use the Design System correctly — component usage rules, styling constraints, design tokens, and tools to query components, tokens, and icons — without any server configuration.`}),`
`,(0,c.jsxs)(t.p,{children:[`Install via `,(0,c.jsxs)(t.a,{href:`https://github.com/vercel-labs/skills`,rel:`nofollow`,children:[(0,c.jsx)(t.code,{children:`skills`}),` CLI`]}),`:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-bash`,children:`npx skills add https://github.com/preply/design-system/blob/main/skills/design-system
`})}),`
`,(0,c.jsx)(t.p,{children:`This auto-detects your coding agents and installs the skill to the appropriate directories.`}),`
`,(0,c.jsxs)(t.p,{children:[`Alternatively, copy the `,(0,c.jsx)(t.a,{href:`https://github.com/preply/design-system/blob/main/skills/design-system`,rel:`nofollow`,children:`skill folder`}),` manually into your skills directory:`]}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`.agents/skills/`}),` — for Cursor, VSCode Copilot, and Codex`]}),`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`.claude/skills/`}),` — for Claude Code`]}),`
`]}),`
`,(0,c.jsx)(t.h2,{id:`mcp-server`,children:`MCP Server`}),`
`,(0,c.jsxs)(t.p,{children:[`The MCP Server (`,(0,c.jsx)(t.code,{children:`@preply/ds-ai-mcp`}),`) exposes Design System tools through the `,(0,c.jsx)(t.a,{href:`https://modelcontextprotocol.io/`,rel:`nofollow`,children:`Model Context Protocol`}),`.`]}),`
`,(0,c.jsx)(t.h3,{id:`cursor`,children:`Cursor`}),`
`,(0,c.jsx)(t.p,{children:`Click the button below to install the MCP server in Cursor:`}),`
`,(0,c.jsx)(t.p,{children:(0,c.jsx)(t.a,{href:`https://cursor.com/en-US/install-mcp?name=ds-mcp&config=eyJjb21tYW5kIjoibnB4IC15IEBwcmVwbHkvZHMtbWNwQGxhdGVzdCBzdGFydCJ9`,rel:`nofollow`,children:(0,c.jsx)(t.img,{src:`https://cursor.com/deeplink/mcp-install-dark.svg`,alt:`Install MCP Server`})})}),`
`,(0,c.jsx)(t.h3,{id:`claude-code`,children:`Claude Code`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-bash`,children:`claude mcp add ds-mcp -- npx -y @preply/ds-mcp@latest start
`})}),`
`,(0,c.jsx)(t.h3,{id:`other-mcp-clients`,children:`Other MCP Clients`}),`
`,(0,c.jsx)(t.p,{children:`Add an MCP server entry to your IDE or client configuration:`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-json`,children:`{
    "mcpServers": {
        "ds-mcp": {
            "command": "npx",
            "args": ["-y", "@preply/ds-mcp@latest", "start"]
        }
    }
}
`})}),`
`,(0,c.jsx)(t.h2,{id:`available-tools`,children:`Available Tools`}),`
`,(0,c.jsx)(t.p,{children:`Both integration methods provide access to the same five tools:`}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.strong,{children:`list_components`}),` — list all available components with metadata.`]}),`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.strong,{children:`get_component_docs`}),` — full documentation for a specific component.`]}),`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.strong,{children:`search_token_by_name`}),` — search design tokens by name.`]}),`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.strong,{children:`search_token_by_value`}),` — search design tokens by value.`]}),`
`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.strong,{children:`search_icon`}),` — search icons by name.`]}),`
`]}),`
`,(0,c.jsxs)(t.p,{children:[`All tools require a `,(0,c.jsx)(t.code,{children:`platform`}),` parameter: `,(0,c.jsx)(t.code,{children:`web`}),` (for `,(0,c.jsx)(t.code,{children:`@preply/ds-web-lib`}),` / `,(0,c.jsx)(t.code,{children:`@preply/ds-web-root`}),`) or `,(0,c.jsx)(t.code,{children:`react-native`}),` (for `,(0,c.jsx)(t.code,{children:`@preply/ds-rn-lib`}),`).`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};