issue #89 developer tab: LLM chat to test MCP tools (#129)

Author: ibek

ui/package.json

@@ -16,9 +16,13 @@
     "@carbon/icons-react": "^11.55.0",
     "@carbon/layout": "^11.30.0",
     "@carbon/react": "^1.76.0",
+    "@modelcontextprotocol/sdk": "^1.6.1",
+    "axios": "^1.8.1",
+    "highlight.js": "^11.11.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-is": "^19.0.0",
+    "react-markdown": "^10.0.1",
     "react-router-dom": "^6.14.1",
     "sass": "^1.85.1"
   },

ui/src/App.scss

@@ -1,11 +1,25 @@
-@use "@carbon/layout" as *;
-
 .title {
-    padding-top: $spacing-05;
-    padding-bottom: $spacing-07;
+  padding: 2rem 4rem;
 }
 
 .description {
-    padding-bottom: $spacing-07;
-    max-width: 600px;
+  padding: 1rem 4rem;
+  padding-bottom: 2rem;
+  max-width: 600px;
+}
+
+ul {
+  margin: 1rem 0;
+  list-style-type: disc;
+  padding-left: 2rem;
+}
+
+ol {
+  margin: 1rem 0;
+  list-style: decimal;
+  padding-left: 2rem;
+}
+
+li {
+  margin-bottom: 5px;
 }

ui/src/App.tsx

@@ -1,8 +1,6 @@
 import { LogoGithub, Notification, Search } from "@carbon/icons-react";
 import {
-  Column,
   Content,
-  Grid,
   Header,
   HeaderContainer,
   HeaderGlobalAction,
@@ -54,6 +52,9 @@ function App() {
               <HeaderMenuItem as={Link} to={Links.Resources}>
                 Resources
               </HeaderMenuItem>
+              <HeaderMenuItem as={Link} to={Links.LLMChat}>
+                LLMChat
+              </HeaderMenuItem>
             </HeaderNavigation>
             <HeaderGlobalBar>
               <HeaderGlobalAction
@@ -80,12 +81,8 @@ function App() {
             </HeaderGlobalBar>
           </Header>
 
-          <Content id="main-content">
-            <Grid fullWidth>
-              <Column lg={16} md={8} sm={4}>
-                <Outlet />
-              </Column>
-            </Grid>
+          <Content id="main-content" style={{ background: "#262626", padding: 0 }}>
+            <Outlet />
           </Content>
         </>
       )}