DOCINFRA-2341_merged_using_automation

ej2-javascript-toc.html

@@ -185,6 +185,9 @@
             <li>
                 <a href="/ej2-javascript/ai-assistview/ai-integrations/es5-ollama-llm-integration">Ollama LLM</a>
             </li>
+            <li>
+                <a href="/ej2-javascript/ai-assistview/ai-integrations/es5-mcp-integration">MCP Server</a>
+            </li>
         </ul>
     </li>
     <li><a href="/ej2-javascript/ai-assistview/toolbar-items">Toolbar items</a></li>

ej2-javascript/ai-assistview/ai-integrations/es5-mcp-integration.md

@@ -0,0 +1,106 @@
+---
+layout: post
+title: MCP with ##Platform_Name## AI AssistView control | Syncfusion
+description: Checkout and learn about Integration of MCP with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: AI AssistView 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Integrate MCP With JavaScript AI AssistView control
+
+The AI AssistView control can be integrated with an [MCP](https://modelcontextprotocol.io/docs/getting-started/intro) backend to enable conversational AI features powered by OpenAI, along with [local tool](https://modelcontextprotocol.io/docs/develop/connect-local-servers) capabilities such as file-aware analysis via `@mentions`. This integration allows the control to reference files in prompts using `@filename`, inject their contents into the model context, and enables analysis of those files alongside the user’s prompt.
+
+## Prerequisites
+
+Before integrating `MCP Server`, ensure the following:
+
+1. `Node.js`: Version 16 or higher, along with npm installed.
+
+2. `OpenAI Account`: Access to OpenAI services and a generated API key.
+
+3. `Syncfusion AI AssistView`: Install the package `@syncfusion/ej2-interactive-chat`.
+
+4. `Marked Library`: For parsing Markdown responses.
+
+## Install server dependencies
+
+Create a folder for the MCP server (e.g., `mcp-demo`) and install the required packages:
+
+```bash
+
+npm install express cors @modelcontextprotocol/sdk
+
+```
+
+## Configure the MCP Server
+
+Create a file named `mcp-server.mjs` in your server folder. This server will:
+
+* Expose `MCP-style SSE endpoints`:
+    * `GET /events` – Server-Sent Events stream for clients to subscribe to.
+    * `POST /messages` – Accepts client messages and broadcasts them to the corresponding SSE stream.
+* Register `tools`:
+    * `text.generate` → Calls OpenAI Chat Completions to generate responses.
+    * `fs.read` → Reads a file under a configured base directory only.
+* Provide a `REST endpoint`:
+    * `POST /assist/chat` – A simple REST interface that your Angular app can call.
+* Detect `@filename` tokens in prompts, read the file contents, and attach them to the conversation for contextual analysis.
+* Maintain session history in memory using a `sessionId` sent from the client.
+
+>Note: This implementation uses `Node.js ESM`, `express`, `cors`, and `@modelcontextprotocol/sdk`. It also expects an OpenAI API key via OPENAI_API_KEY.
+
+{% tabs %}
+{% highlight js tabtitle="mcp-server.mjs" %}
+{% include code-snippet/ai-assistview/ai-integrations/mcp-server/mcp-demo/mcp-server.mjs %}
+{% endhighlight %}
+{% endtabs %}
+
+## Configure AI AssistView with MCP Server
+
+To integrate the MCP server with the AI AssistView component, update the `index.js` file in your Angular application.
+
+You can type `@` in the prompt box to select and mention files. The contents of these mentioned files will be included in the AI context, enabling more accurate and code-aware responses.
+
+In the following example, the `promptRequest` event sends the user’s prompt (including any `@mentions`) to the MCP server endpoint `/assist/chat`. The server:
+    * Extracts unique file mentions from the prompt.
+    * Safely reads those files from the configured FS_BASE_DIR.
+    * Injects their contents into the conversation as contextual messages.
+
+OpenAI then receives both the original prompt and the attached file contents, allowing it to provide `code-aware analysis and responses`.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/ai-assistview/ai-integrations/mcp-server/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/ai-integrations/mcp-server/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/mcp-server" %}
+
+## Run and Test
+
+### Start the MCP server:
+
+Navigate to your MCP server folder and run the following command to start the Node.js server:
+
+```bash
+
+node mcp-server.mjs
+
+```
+
+### Start the frontend:
+
+Run the `index.html` in web browser, it will render the **Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript AI AssistView** control to interact with the integrated MCP.
+
+## Troubleshooting
+
+* `401/403 from OpenAI`: Verify your `OPENAI_API_KEY` and model deployment name.
+* `File path errors`: Ensure FS_BASE_DIR is correctly set and paths are relative to it.
+* `CORS issues`: Confirm the server allows requests from `http://localhost:4200`.
+* `SSE stream testing`: Run `curl -N http://localhost:3000/events` to verify the stream is active.

ej2-javascript/ai-assistview/ai-integrations/mcp-integration.md

@@ -0,0 +1,115 @@
+---
+layout: post
+title: MCP with ##Platform_Name## AI AssistView control | Syncfusion
+description: Checkout and learn about Integration of MCP with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: AI AssistView 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Integrate MCP With TypeScript AI AssistView control
+
+The AI AssistView control can be integrated with an [MCP](https://modelcontextprotocol.io/docs/getting-started/intro) backend to enable conversational AI features powered by OpenAI, along with [local tool](https://modelcontextprotocol.io/docs/develop/connect-local-servers) capabilities such as file-aware analysis via `@mentions`. This integration allows the control to reference files in prompts using `@filename`, inject their contents into the model context, and enables analysis of those files alongside the user’s prompt.
+
+## Prerequisites
+
+Before integrating `MCP Server`, ensure the following:
+
+1. `Node.js`: Version 16 or higher, along with npm installed.
+
+2. `OpenAI Account`: Access to OpenAI services and a generated API key.
+
+3. `Syncfusion AI AssistView`: Install the package `@syncfusion/ej2-interactive-chat`.
+
+4. `Marked Library`: For parsing Markdown responses.
+
+## Install server dependencies
+
+Create a folder for the MCP server (e.g., `mcp-demo`) and install the required packages:
+
+```bash
+
+npm install express cors @modelcontextprotocol/sdk
+
+```
+
+## Configure the MCP Server
+
+Create a file named `mcp-server.mjs` in your server folder. This server will:
+
+* Expose `MCP-style SSE endpoints`:
+    * `GET /events` – Server-Sent Events stream for clients to subscribe to.
+    * `POST /messages` – Accepts client messages and broadcasts them to the corresponding SSE stream.
+* Register `tools`:
+    * `text.generate` → Calls OpenAI Chat Completions to generate responses.
+    * `fs.read` → Reads a file under a configured base directory only.
+* Provide a `REST endpoint`:
+    * `POST /assist/chat` – A simple REST interface that your Angular app can call.
+* Detect `@filename` tokens in prompts, read the file contents, and attach them to the conversation for contextual analysis.
+* Maintain session history in memory using a `sessionId` sent from the client.
+
+>Note: This implementation uses `Node.js ESM`, `express`, `cors`, and `@modelcontextprotocol/sdk`. It also expects an OpenAI API key via OPENAI_API_KEY.
+
+{% tabs %}
+{% highlight js tabtitle="mcp-server.mjs" %}
+{% include code-snippet/ai-assistview/ai-integrations/mcp-server/mcp-demo/mcp-server.mjs %}
+{% endhighlight %}
+{% endtabs %}
+
+## Configure AI AssistView with MCP Server
+
+To integrate the MCP server with the AI AssistView component, update the `index.ts` file in your Angular application.
+
+You can type `@` in the prompt box to select and mention files. The contents of these mentioned files will be included in the AI context, enabling more accurate and code-aware responses.
+
+In the following example, the `promptRequest` event sends the user’s prompt (including any `@mentions`) to the MCP server endpoint `/assist/chat`. The server:
+    * Extracts unique file mentions from the prompt.
+    * Safely reads those files from the configured FS_BASE_DIR.
+    * Injects their contents into the conversation as contextual messages.
+
+OpenAI then receives both the original prompt and the attached file contents, allowing it to provide `code-aware analysis and responses`.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/ai-assistview/ai-integrations/mcp-server/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/ai-integrations/mcp-server/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/mcp-server" %}
+
+
+## Run and Test
+
+### Start the MCP server:
+
+Navigate to your MCP server folder and run the following command to start the Node.js server:
+
+```bash
+
+node mcp-server.mjs
+
+```
+
+### Start the frontend:
+
+In a separate terminal window, navigate to your project folder and start the development server:
+
+```bash
+
+npm start
+
+```
+
+Open your app to interact with the AI AssistView control integrated with MCP.
+
+## Troubleshooting
+
+* `401/403 from OpenAI`: Verify your `OPENAI_API_KEY` and model deployment name.
+* `File path errors`: Ensure FS_BASE_DIR is correctly set and paths are relative to it.
+* `CORS issues`: Confirm the server allows requests from `http://localhost:4200`.
+* `SSE stream testing`: Run `curl -N http://localhost:3000/events` to verify the stream is active.

ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/index.css

@@ -0,0 +1,14 @@
+#container {
+    visibility: hidden;
+    margin: 20px auto;
+    width: 350px;
+}
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+}