You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can try VitePress directly in your browser on [StackBlitz](https://vitepress.new).
10
-
11
7
## Installation
12
8
13
9
### Prerequisites
14
10
15
11
-[Node.js](https://nodejs.org/) version 18 or higher.
16
-
- Terminal for accessing VitePress via its command line interface (CLI).
17
-
- Text Editor with [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax support.
18
-
-[VSCode](https://code.visualstudio.com/) is recommended, along with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
12
+
- Terminal for accessing MCP Kit via its command line interface (CLI).
19
13
20
-
VitePress can be used on its own, or be installed into an existing project. In both cases, you can install it with:
14
+
MCP Kit can be used to create new MCP (Model Context Protocol) applications. You can install and use it with any of the following package managers:
21
15
22
16
::: code-group
23
-
24
17
```sh [npm]
25
-
$ npm add -D vitepress@next
18
+
$ npm create mcp-kit@latest
26
19
```
27
20
28
21
```sh [pnpm]
29
-
$ pnpm add -D vitepress@next
22
+
$ pnpm create mcp-kit@latest
30
23
```
31
24
32
25
```sh [yarn]
33
-
$ yarn add -D vitepress@next vue
34
-
```
35
-
36
-
```sh [bun]
37
-
$ bun add -D vitepress@next
26
+
$ yarn create mcp-kit@latest
38
27
```
39
-
40
28
:::
41
29
42
30
::: tip NOTE
43
-
44
-
VitePress is an ESM-only package. Don't use `require()` to import it, and make sure your nearest `package.json` contains `"type": "module"`, or change the file extension of your relevant files like `.vitepress/config.js` to `.mjs`/`.mts`. Refer to [Vite's troubleshooting guide](http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only) for more details. Also, inside async CJS contexts, you can use `await import('vitepress')` instead.
45
-
31
+
MCP Kit is an ESM-only package. It requires Node.js version 18 or higher and uses modern JavaScript features.
46
32
:::
47
33
48
-
###Setup Wizard
34
+
## Setup Wizard
49
35
50
-
VitePress ships with a command line setup wizard that will help you scaffold a basic project. After installation, start the wizard by running:
36
+
When you run the create command, MCP Kit will launch an interactive setup wizard that guides you through creating a new project:
51
37
52
-
::: code-group
38
+
<<< @/snippets/init.ansi
53
39
54
-
```sh [npm]
55
-
$ npx vitepress init
56
-
```
40
+
1. First, you'll be prompted to select a **Project type**:
41
+
-**MCP Server**: Creates a server that provides tools, resources, and prompts for MCP clients
42
+
-**MCP Client**: Creates a client that connects to MCP servers
57
43
58
-
```sh [pnpm]
59
-
$ pnpm vitepress init
60
-
```
44
+
2. Next, you'll be asked to provide a **Project name** (defaults to `mcp-[type]-starter`)
61
45
62
-
```sh [yarn]
63
-
$ yarn vitepress init
64
-
```
46
+
3. Choose your preferred **Project language**:
47
+
-**TypeScript** (recommended)
48
+
-**JavaScript**
65
49
66
-
```sh [bun]
67
-
$ bun vitepress init
68
-
```
50
+
4. Select **Project Transport Type** (multiple options can be selected):
51
+
-**STDIO**: Communication through standard input/output streams
52
+
-**Streamable HTTP**: RESTful API with streaming capabilities
53
+
-**SSE**: Server-Sent Events for real-time communication
69
54
70
-
[//]: #(:::)
55
+
5. Choose a **Project template**:
56
+
-**Standard**: Includes recommended plugins and configurations
57
+
-**Custom**: Allows you to select specific plugins
71
58
72
-
[//]: #()
73
-
[//]: #(You will be greeted with a few simple questions:)
59
+
6. If you selected **Custom** template, you'll be prompted to select **Project plugins**:
7. Finally, you'll be asked if you want to **install dependencies** automatically
77
68
78
-
[//]: #()
79
-
[//]: #(::: tip Vue as Peer Dependency)
80
-
81
-
[//]: #(If you intend to perform customization that uses Vue components or APIs, you should also explicitly install `vue` as a dependency.)
82
-
83
-
[//]: #(:::)
69
+
After completing these steps, MCP Kit will create your project with the selected configuration.
84
70
85
71
## File Structure
86
72
87
-
If you are building a standalone VitePress site, you can scaffold the site in your current directory (`./`). However, if you are installing VitePress in an existing project alongside other source code, it is recommended to scaffold the site in a nested directory (e.g. `./docs`) so that it is separate from the rest of the project.
73
+
The generated file structure depends on the project type you selected.
88
74
89
-
Assuming you chose to scaffold the VitePress project in `./docs`, the generated file structure should look like this:
The `docs` directory is considered the **project root** of the VitePress site. The `.vitepress` directory is a reserved location for VitePress' config file, dev server cache, build output, and optional theme customization code.
103
-
104
-
::: tip
105
-
By default, VitePress stores its dev server cache in `.vitepress/cache`, and the production build output in `.vitepress/dist`. If using Git, you should add them to your `.gitignore` file. These locations can also be [configured](../reference/site-config#outdir).
106
-
:::
107
-
108
-
### The Config File
109
-
110
-
The config file (`.vitepress/config.js`) allows you to customize various aspects of your VitePress site, with the most basic options being the title and description of the site:
111
-
112
-
```js [.vitepress/config.js]
113
-
exportdefault {
114
-
// site-level options
115
-
title:'VitePress',
116
-
description:'Just playing around.',
97
+
### MCP Client Project Structure
117
98
118
-
themeConfig: {
119
-
// theme-level options
120
-
}
121
-
}
99
+
```
100
+
├── src/
101
+
│ └── index.ts # Entry point with transport implementations
You can also configure the behavior of the theme via the `themeConfig` option. Consult the [Config Reference](../reference/site-config) for full details on all config options.
125
-
126
-
### Source Files
127
-
128
-
Markdown files outside the `.vitepress` directory are considered **source files**.
129
-
130
-
VitePress uses **file-based routing**: each `.md` file is compiled into a corresponding `.html` file with the same path. For example, `index.md` will be compiled into `index.html`, and can be visited at the root path `/` of the resulting VitePress site.
131
-
132
-
VitePress also provides the ability to generate clean URLs, rewrite paths, and dynamically generate pages. These will be covered in the [Routing Guide](./routing).
109
+
::: tip
110
+
The project structure is designed to be modular and extensible. You can customize it according to your needs.
111
+
:::
133
112
134
113
## Up and Running
135
114
136
-
The tool should have also injected the following npm scripts to your `package.json` if you allowed it to do so during the setup process:
115
+
After creating your project, you can use the following npm scripts to develop, test, and build your application:
116
+
117
+
### MCP Server Development Scripts
137
118
138
119
```json [package.json]
139
120
{
140
-
...
141
121
"scripts": {
142
-
"docs:dev": "vitepress dev docs",
143
-
"docs:build": "vitepress build docs",
144
-
"docs:preview": "vitepress preview docs"
145
-
},
146
-
...
122
+
"dev": "Start the development server in stdio mode",
123
+
"dev:web": "Start the development server in web mode",
124
+
"build": "Build the project",
125
+
"test": "Run tests (if vitest plugin is selected)",
126
+
"coverage": "Generate test coverage report (if vitest plugin is selected)",
127
+
"lint": "Run linting (if style plugin is selected)"
128
+
}
147
129
}
148
130
```
149
131
150
-
The `docs:dev` script will start a local dev server with instant hot updates. Run it with the following command:
132
+
To start the development server, run:
151
133
152
134
::: code-group
153
135
154
136
```sh [npm]
155
-
$ npm run docs:dev
137
+
$ npm run dev
156
138
```
157
139
158
140
```sh [pnpm]
159
-
$ pnpm run docs:dev
141
+
$ pnpm run dev
160
142
```
161
143
162
144
```sh [yarn]
163
-
$ yarn docs:dev
164
-
```
165
-
166
-
```sh [bun]
167
-
$ bun run docs:dev
145
+
$ yarn dev
168
146
```
169
147
170
148
:::
171
149
172
-
Instead of npm scripts, you can also invoke VitePress directly with:
173
-
174
-
::: code-group
175
-
176
-
```sh [npm]
177
-
$ npx vitepress dev docs
178
-
```
179
-
180
-
```sh [pnpm]
181
-
$ pnpm vitepress dev docs
182
-
```
150
+
### MCP Client Development Scripts
183
151
184
-
```sh [yarn]
185
-
$ yarn vitepress dev docs
186
-
```
152
+
The client project includes similar scripts for development, testing, and building:
187
153
188
-
```sh [bun]
189
-
$ bun vitepress dev docs
154
+
```json [package.json]
155
+
{
156
+
"scripts": {
157
+
"dev": "Start the client in development mode",
158
+
"build": "Build the project",
159
+
"test": "Run tests (if vitest plugin is selected)",
160
+
"coverage": "Generate test coverage report (if vitest plugin is selected)",
161
+
"lint": "Run linting (if style plugin is selected)"
162
+
}
163
+
}
190
164
```
191
-
192
-
:::
193
-
194
-
More command line usage is documented in the [CLI Reference](../reference/cli).
195
-
196
-
The dev server should be running at `http://localhost:5173`. Visit the URL in your browser to see your new site in action!
197
-
198
-
## What's Next?
199
-
200
-
- To better understand how markdown files are mapped to generated HTML, proceed to the [Routing Guide](./routing).
201
-
202
-
- To discover more about what you can do on the page, such as writing markdown content or using Vue Components, refer to the "Writing" section of the guide. A great place to start would be to learn about [Markdown Extensions](./markdown).
203
-
204
-
- To explore the features provided by the default documentation theme, check out the [Default Theme Config Reference](../reference/default-theme-config).
205
-
206
-
- If you want to further customize the appearance of your site, explore how to either [Extend the Default Theme](./extending-default-theme) or [Build a Custom Theme](./custom-theme).
207
-
208
-
- Once your documentation site takes shape, make sure to read the [Deployment Guide](./deploy).
0 commit comments