Merge pull request #2 from marimo-team/ms/generalize

feat: generalize extension to allow for other resources outside an MCP

Author: mscolnick

.github/workflows/demo.yml

@@ -36,13 +36,13 @@ jobs:
         run: pnpm demo
 
       - name: 📄 Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
 
       - name: 📤 Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: './demo/dist'
 
       - name: 🚀 Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

demo/index.html

@@ -36,6 +36,15 @@ <h2 class="text-2xl font-bold mb-4">Demo prompts</h2>
         <div id="prompts" class="min-h-[50px]"></div>
         <p class="text-gray-500 text-sm">Type <code>/</code> to show prompts</p>
       </div>
+
+      <h2 class="text-2xl font-bold mb-4">Demo without MCP extension (using primitives)</h2>
+      <div class="border rounded-lg p-4 bg-white shadow-sm">
+        <div id="primitives-editor" class="min-h-[200px]"></div>
+        <p class="text-gray-500 text-sm">
+          This editor uses lower-level primitives: resource completion, hover tooltips, and markdown syntax highlighting
+          without the full MCP extension. Type <code>@</code> to see resource completions.
+        </p>
+      </div>
     </main>
     <script type="module" src="./index.ts"></script>
   </body>

demo/index.ts

@@ -1,3 +1,4 @@
+import { autocompletion } from "@codemirror/autocomplete";
 import { markdown } from "@codemirror/lang-markdown";
 import { tooltips } from "@codemirror/view";
 import type { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
@@ -9,7 +10,17 @@ import type {
 	PromptMessage,
 } from "@modelcontextprotocol/sdk/types.js";
 import { EditorView, basicSetup } from "codemirror";
-import { extractResources, mcpExtension } from "../src/mcp";
+import {
+	extractResources,
+	hoverResource,
+	resourceCompletion,
+	resourceInputFilter,
+	resourceTheme,
+	resourcesField,
+} from "../src";
+import type { Resource } from "../src";
+import { mcpExtension } from "../src/mcp";
+import { resourceDecorations } from "../src/resources/decoration";
 
 class DemoTransport implements Transport {
 	mockPrompts = [
@@ -196,15 +207,17 @@ Try typing @ to see MCP completions!
 		const formattedResources = resources
 			.map(
 				({ resource }) =>
-					`${resource.uri} (${resource.type}): ${resource.description || resource.name}`,
+					`<resource>${resource.uri} (${resource.type}): ${resource.description || resource.name}</resource>`,
 			)
 			.join("\n");
 
 		if (formattedResources.length === 0) {
 			prompt.textContent = "No resources found";
 		} else {
 			prompt.textContent = `
+<doc>
 ${editor.state.doc.toString()}
+</doc>
 
 Resources:
 ${formattedResources}
@@ -214,5 +227,125 @@ ${formattedResources}
 	document.querySelector("#editor")?.parentElement?.appendChild(button);
 	document.querySelector("#editor")?.parentElement?.appendChild(prompt);
 
-	return { editor, promptEditor };
+	// Create a demo using lower-level primitives without MCP extension
+	const mockResources: Resource[] = [
+		{
+			name: "userGuide",
+			uri: "file://docs/user-guide.md",
+			mimeType: "text/markdown",
+			description: "Complete user guide with examples and best practices",
+			type: "file",
+			data: {},
+		},
+		{
+			name: "apiDocs",
+			uri: "file://docs/api.md",
+			mimeType: "text/markdown",
+			description: "API reference documentation",
+			type: "file",
+			data: {},
+		},
+		{
+			name: "config",
+			uri: "var://app/config",
+			mimeType: "application/json",
+			description: "Application configuration object",
+			type: "variable",
+			data: {},
+		},
+		{
+			name: "processData",
+			uri: "function://utils/processData",
+			mimeType: "application/javascript",
+			description: "Processes user input data and returns formatted results",
+			type: "function",
+			data: {},
+		},
+	];
+
+	const markdownLanguage = markdown();
+
+	// Create extensions using primitives
+	const primitivesExtensions = [
+		basicSetup,
+		markdownLanguage,
+		resourcesField,
+		resourceDecorations,
+		resourceInputFilter,
+		autocompletion({
+			override: [
+				resourceCompletion(
+					async () => mockResources,
+					// Custom formatter for completions
+					(resource) => ({
+						detail: `${resource.mimeType || "unknown"} - ${resource.uri}`,
+						boost: resource.description ? 90 : 50,
+					}),
+				),
+			],
+		}),
+		hoverResource({
+			createTooltip: (resource) => {
+				const dom = document.createElement("div");
+				dom.className = "cm-tooltip-cursor cm-tooltip-below";
+				dom.style.padding = "8px";
+				dom.style.backgroundColor = "#f8f9fa";
+				dom.style.border = "1px solid #dee2e6";
+				dom.style.borderRadius = "4px";
+				dom.style.maxWidth = "300px";
+
+				const title = document.createElement("strong");
+				title.textContent = resource.name;
+				title.style.color = "#495057";
+				dom.appendChild(title);
+
+				const uri = document.createElement("div");
+				uri.style.fontSize = "0.85em";
+				uri.style.color = "#6c757d";
+				uri.style.fontFamily = "monospace";
+				uri.textContent = resource.uri;
+				dom.appendChild(uri);
+
+				if (resource.description) {
+					const desc = document.createElement("div");
+					desc.style.marginTop = "6px";
+					desc.style.fontSize = "0.9em";
+					desc.textContent = resource.description;
+					dom.appendChild(desc);
+				}
+
+				if (resource.mimeType) {
+					const mime = document.createElement("div");
+					mime.style.marginTop = "4px";
+					mime.style.fontSize = "0.8em";
+					mime.style.color = "#868e96";
+					mime.textContent = `Type: ${resource.mimeType}`;
+					dom.appendChild(mime);
+				}
+
+				return { dom };
+			},
+		}),
+		resourceTheme,
+		tooltips(),
+	];
+
+	const primitivesEditor = new EditorView({
+		doc: `# Primitives Demo
+
+This editor demonstrates using the lower-level exported primitives:
+- \`resourceCompletion\` for autocomplete functionality
+- \`hoverResource\` for hover tooltips
+- \`resourcesField\` for state management
+- \`resourceTheme\` for styling
+- Standard CodeMirror markdown support
+
+Try typing @ to see resource completions, then hover over the inserted resources:
+
+@`,
+		extensions: primitivesExtensions,
+		parent: document.querySelector("#primitives-editor") ?? undefined,
+	});
+
+	return { editor, promptEditor, primitivesEditor };
 })();