diff --git a/apps/preskok/content/docs/installation/index.mdx b/apps/preskok/content/docs/installation/index.mdx index f67ab0a2e..8d4b02452 100644 --- a/apps/preskok/content/docs/installation/index.mdx +++ b/apps/preskok/content/docs/installation/index.mdx @@ -109,3 +109,14 @@ Start by selecting your framework of choice. Then follow the instructions to ins

Manual

+ +## MCP + +Use the official shadcn MCP server with the `@preskok` registry namespace when you want an AI client to search and install Preskok components. + + +

shadcn MCP

+

+ Configure MCP access to the Preskok registry. +

+
diff --git a/apps/preskok/content/docs/installation/manual.mdx b/apps/preskok/content/docs/installation/manual.mdx index 5b00d871a..31d5c9eff 100644 --- a/apps/preskok/content/docs/installation/manual.mdx +++ b/apps/preskok/content/docs/installation/manual.mdx @@ -50,10 +50,15 @@ Create a `components.json` file in the root of your project. "lib": "@/lib", "hooks": "@/hooks" }, + "registries": { + "@preskok": "https://ui-three-mu.vercel.app/r/{name}.json" + }, "iconLibrary": "lucide" } ``` +The `@preskok` registry namespace is required when using `shadcn` directly or the shadcn MCP server. + ### Add components You can now add Preskok components to your project. @@ -62,6 +67,12 @@ You can now add Preskok components to your project. npx preskok-ui@latest add button ``` +Or use `shadcn` directly: + +```bash +npx shadcn@latest add @preskok/button +``` + The command above will add the `Button` component to `src/components/ui/preskok-ui/button.tsx`. You can then import it like this: ```tsx showLineNumbers title="src/App.tsx" diff --git a/apps/preskok/content/docs/installation/mcp.mdx b/apps/preskok/content/docs/installation/mcp.mdx new file mode 100644 index 000000000..98e9ae5e8 --- /dev/null +++ b/apps/preskok/content/docs/installation/mcp.mdx @@ -0,0 +1,64 @@ +--- +title: MCP +description: Use Preskok UI with the shadcn MCP server. +--- + +Preskok UI works with the official shadcn MCP server through the `@preskok` registry namespace. There is no separate Preskok MCP server. + + + +### Initialize your project + +Start with a project initialized by Preskok UI. For MCP registry discovery, `components.json` must contain the Preskok registry namespace: + +```json title="components.json" showLineNumbers +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "preskok", + "registries": { + "@preskok": "https://ui-three-mu.vercel.app/r/{name}.json" + } +} +``` + +For a new project, the Preskok init command writes this configuration for you: + +```bash +npx preskok-ui@latest init +``` + +The equivalent shadcn command is: + +```bash +npx shadcn@latest init https://ui-three-mu.vercel.app/r/default.json +``` + +### Configure your MCP client + +Configure your MCP client to run the shadcn MCP server: + +```toml title="config.toml" +[mcp_servers.shadcn] +command = "npx" +args = ["shadcn@latest", "mcp"] +``` + +The MCP process must start in the project directory that contains `components.json`. In a monorepo, use the app package directory, not the monorepo root. + +### What the MCP can do + +The shadcn MCP server can list configured registries, search `@preskok` items, view item metadata, return example source code, and produce install commands. + +For example, an MCP client can resolve this install command: + +```bash +npx shadcn@latest add @preskok/button +``` + +### Current shadcn MCP limitations + +The shadcn MCP `view_items_in_registries` tool returns component metadata, file counts, and dependencies, but not component file source. The registry JSON and `shadcn view @preskok/button` do include component source. + +The `get_item_examples_from_registries` tool does return full example source code. + + diff --git a/apps/preskok/content/docs/installation/meta.json b/apps/preskok/content/docs/installation/meta.json index 8d6158b89..efd041ff8 100644 --- a/apps/preskok/content/docs/installation/meta.json +++ b/apps/preskok/content/docs/installation/meta.json @@ -8,6 +8,7 @@ "astro", "tanstack", "tanstack-router", - "manual" + "manual", + "mcp" ] } diff --git a/apps/preskok/content/docs/installation/next.mdx b/apps/preskok/content/docs/installation/next.mdx index 7f60ddfd9..52e0ccab6 100644 --- a/apps/preskok/content/docs/installation/next.mdx +++ b/apps/preskok/content/docs/installation/next.mdx @@ -5,12 +5,43 @@ description: Install and configure Preskok UI for Next.js. -### Create project +### Create a Next.js app -Run the Preskok UI init command to create a new Next.js project or set up an existing one: +Create a Next.js app with Tailwind CSS and the `@/*` import alias: ```bash -npx preskok-ui@latest init button +npx create-next-app@latest my-app --ts --tailwind --eslint --app --src-dir --import-alias "@/*" +cd my-app +``` + +### Initialize Preskok UI + +Run the Preskok UI init command from the project root: + +```bash +npx preskok-ui@latest init +``` + +This installs the Preskok base registry item, writes `components.json`, configures the `@preskok` registry namespace, and adds the shared utilities used by Preskok components. + +If you want to use `shadcn` directly, the equivalent command is: + +```bash +npx shadcn@latest init https://ui-three-mu.vercel.app/r/default.json +``` + +### Add a component + +Add components with the Preskok CLI: + +```bash +npx preskok-ui@latest add button +``` + +Or use `shadcn` directly with the registry namespace: + +```bash +npx shadcn@latest add @preskok/button ``` The command above will add the `Button` component to your project. You can then import it like this: