@netpad/mcp-server 2.4.2 → 2.4.4

package/README.md

@@ -1,6 +1,40 @@
 # @netpad/mcp-server
 
-An MCP (Model Context Protocol) server for AI-assisted NetPad application development. This comprehensive toolkit provides **75 tools** for building forms, workflows, applications, and data-driven experiences with the NetPad platform.
+An MCP (Model Context Protocol) server for AI-assisted NetPad application development. This comprehensive toolkit provides **80+ tools** for building forms, workflows, applications, and data-driven experiences with the NetPad platform.
+
+> **Build forms in minutes, not hours.** Describe what you need to Claude, get a working form with one click.
+>
+> Learn more at [netpad.io/mcp](https://netpad.io/mcp)
+
+## Build from Claude
+
+The most powerful way to use NetPad is through conversational building with Claude:
+
+```
+You: "I need a customer feedback form with rating, comments, and contact info"
+
+Claude: I've generated your feedback form with:
+- Star rating field (1-5)
+- Comments textarea with 500 character limit
+- Email and phone fields with validation
+
+Click to import: https://netpad.io/import/imp_abc123
+```
+
+**That's it.** One conversation, one click, working form.
+
+### How It Works
+
+1. **Describe** - Tell Claude what form you need in plain English
+2. **Generate** - Claude uses `generate_form` to create the configuration
+3. **Import** - Click the link or use `create_import_link` for a shareable URL
+4. **Customize** - Fine-tune in NetPad's visual builder if needed
+
+## What's New in v2.4.0
+
+- **One-Click Import Links**: `create_import_link` tool generates shareable URLs for instant form import
+- **Import URLs in Output**: `generate_form` now includes a direct import link in the response
+- **Deep Link Integration**: Forms created in Claude can be imported to NetPad Cloud with one click
 
 ## What's New in v2.0.0
 
@@ -97,7 +131,13 @@ Add to `~/.cursor/mcp.json`:
 }
 ```
 
-## Available Tools (75 total)
+## Available Tools (80+ total)
+
+### Import & Sharing Tools (1) - NEW
+
+| Tool | Description |
+|------|-------------|
+| `create_import_link` | Generate a shareable one-click import URL for any form configuration |
 
 ### Form Building Tools (6)
 
@@ -298,6 +338,44 @@ The server exposes documentation as MCP resources:
 
 ## Example Interactions
 
+### Build a Form with One Click
+
+```
+User: I need a job application form with resume upload, experience level,
+      and availability
+
+Claude: [Uses generate_form tool]
+I've generated your job application form with:
+- Resume file upload (PDF, DOC, DOCX - max 10MB)
+- Experience level dropdown (Entry, Mid, Senior, Executive)
+- Availability date picker
+- Cover letter textarea
+- Contact information section
+
+Click to import: https://netpad.io/import/imp_xyz789
+
+The form is ready to use - just click the link to add it to your NetPad workspace.
+```
+
+### Generate and Share an Import Link
+
+```
+User: Can you create a patient intake form and give me a link I can share
+      with my team?
+
+Claude: [Uses generate_form, then create_import_link]
+Here's your patient intake form with:
+- Personal information section
+- Medical history fields
+- Insurance details
+- Emergency contact
+
+Shareable import link: https://netpad.io/import/imp_abc123
+
+This link expires in 7 days. Anyone with a NetPad account can click it
+to import this form into their workspace.
+```
+
 ### Create an Application
 
 ```
@@ -386,9 +464,11 @@ echo '{"jsonrpc":"2.0","id":2,"method":"tools/call","params":{"name":"list_form_
 
 ## Related Packages
 
+- [@netpad/mcp-server-remote](https://www.npmjs.com/package/@netpad/mcp-server-remote) - Remote HTTP MCP server for Claude custom connectors
 - [@netpad/forms](https://www.npmjs.com/package/@netpad/forms) - React form renderer library
 - [@netpad/workflows](https://www.npmjs.com/package/@netpad/workflows) - Workflow automation client
 - [NetPad Platform](https://netpad.io) - Full form builder platform with database integration
+- [NetPad MCP Guide](https://netpad.io/mcp) - Learn more about building with Claude
 
 ## License
 

package/dist/index.js

@@ -21826,6 +21826,21 @@ function formatToolOutput(output) {
 }
 
 // src/index.ts
+import {
+  UI_RESOURCES
+} from "@netpad/mcp-apps";
+function withUIResource(textContent, resourceId, data) {
+  const resource = UI_RESOURCES[resourceId];
+  return {
+    content: [{ type: "text", text: textContent }],
+    _meta: {
+      ui: {
+        resourceUri: resource.uri,
+        data
+      }
+    }
+  };
+}
 function createNetPadMcpServer(options) {
   const server = new McpServer({
     name: options?.name ?? "@netpad/mcp-server",
@@ -22204,14 +22219,26 @@ This will open NetPad where you can:
 If you prefer to work with code, here's the complete TypeScript implementation:
 
 ${formatToolOutput(output)}`;
-      return {
-        content: [
-          {
-            type: "text",
-            text: outputWithImport
-          }
-        ]
+      const formPreviewData = {
+        form: {
+          name: schema.name,
+          description: schema.description,
+          fields: (schema.fieldConfigs || []).map((f) => ({
+            id: f.path,
+            type: f.type,
+            label: f.label,
+            placeholder: f.placeholder,
+            required: f.required,
+            options: f.options
+          })),
+          theme: schema.theme,
+          multiPage: schema.multiPage
+        },
+        theme: "dark",
+        mode: "traditional",
+        readonly: true
       };
+      return withUIResource(outputWithImport, "form-preview", formPreviewData);
     }
   );
   server.tool(
@@ -22650,17 +22677,27 @@ Available topics: ${Object.keys(docs).join(", ")}`
             fieldCount: t.fields.length,
             hasMultiPage: !!t.multiPage?.enabled
           }));
-          return {
-            content: [{
-              type: "text",
-              text: JSON.stringify({
-                templateType: "form",
-                templates: summary,
-                total: summary.length,
-                categories: [...new Set(templates.map((t) => t.category))]
-              }, null, 2)
-            }]
+          const textResponse = JSON.stringify({
+            templateType: "form",
+            templates: summary,
+            total: summary.length,
+            categories: [...new Set(templates.map((t) => t.category))]
+          }, null, 2);
+          const galleryItems = templates.map((t) => ({
+            id: t.id,
+            name: t.name,
+            description: t.description,
+            category: t.category,
+            tags: t.tags,
+            icon: t.icon || "\u{1F4DD}"
+          }));
+          const galleryData = {
+            templates: galleryItems,
+            templateType: "form",
+            theme: "dark",
+            showCategories: true
           };
+          return withUIResource(textResponse, "template-gallery", galleryData);
         }
         case "application": {
           if (action === "categories") {
@@ -22748,7 +22785,33 @@ Available topics: ${Object.keys(docs).join(", ")}`
                 edges: template.edges
               }
             };
-            return { content: [{ type: "text", text: JSON.stringify(workflowForUI, null, 2) }] };
+            const uiData = {
+              workflow: {
+                nodes: template.nodes.map((n) => ({
+                  id: n.id,
+                  type: n.type,
+                  position: n.position,
+                  data: { label: n.label || n.type, ...n.config }
+                })),
+                edges: template.edges.map((e) => ({
+                  id: e.id,
+                  source: e.source,
+                  target: e.target,
+                  sourceHandle: e.sourceHandle,
+                  targetHandle: e.targetHandle,
+                  label: e.condition?.label
+                }))
+              },
+              theme: "dark",
+              fitView: true,
+              showMinimap: true,
+              autoLayout: true
+            };
+            return withUIResource(
+              JSON.stringify(workflowForUI, null, 2),
+              "workflow-viewer",
+              uiData
+            );
           }
           let templates = Object.values(WORKFLOW_TEMPLATES);
           if (category) {
@@ -22759,17 +22822,27 @@ Available topics: ${Object.keys(docs).join(", ")}`
             nodesCount: t.nodes.length,
             edgesCount: t.edges.length
           }));
-          return {
-            content: [{
-              type: "text",
-              text: JSON.stringify({
-                templateType: "workflow",
-                templates: summary,
-                total: summary.length,
-                categories: [...new Set(Object.values(WORKFLOW_TEMPLATES).map((t) => t.category))]
-              }, null, 2)
-            }]
+          const textResponse = JSON.stringify({
+            templateType: "workflow",
+            templates: summary,
+            total: summary.length,
+            categories: [...new Set(Object.values(WORKFLOW_TEMPLATES).map((t) => t.category))]
+          }, null, 2);
+          const galleryItems = templates.map((t) => ({
+            id: t.id,
+            name: t.name,
+            description: t.description,
+            category: t.category,
+            tags: t.tags,
+            icon: "\u26A1"
+          }));
+          const galleryData = {
+            templates: galleryItems,
+            templateType: "workflow",
+            theme: "dark",
+            showCategories: true
           };
+          return withUIResource(textResponse, "template-gallery", galleryData);
         }
         case "conversational": {
           if (action === "categories") {
@@ -26290,6 +26363,249 @@ You can use any valid hex color.`
       };
     }
   );
+  server.tool(
+    "import_google_form",
+    `Import a Google Form into NetPad. This tool generates the API call and mapping preview for importing a Google Form.
+
+IMPORTANT: Before using this tool, the user must have:
+1. Connected their Google account via the NetPad UI (Settings > Integrations > Google Forms)
+2. Obtained a credentialId for their Google Forms connection
+
+The tool returns:
+- Instructions for completing the import via the NetPad API
+- A preview of how the Google Form fields will be mapped to NetPad field types
+- Any warnings about fields that may need manual adjustment`,
+    {
+      formId: external_exports.string().describe("The Google Form ID to import. Can be found in the form URL: https://docs.google.com/forms/d/{FORM_ID}/edit"),
+      organizationId: external_exports.string().describe("The NetPad organization ID"),
+      projectId: external_exports.string().describe("The NetPad project ID where the form will be created"),
+      credentialId: external_exports.string().optional().describe("The credential ID for the Google Forms connection. If not provided, the user must set it up via the UI first."),
+      preview: external_exports.boolean().optional().describe("If true, only return the mapping preview without creating the form (default: true)")
+    },
+    async ({ formId, organizationId, projectId, credentialId, preview = true }) => {
+      const baseUrl = "https://netpad.io";
+      const fieldTypeMapping = `
+## Google Forms to NetPad Field Type Mapping
+
+| Google Forms Type | NetPad Type | Confidence |
+|-------------------|-------------|------------|
+| SHORT_ANSWER | short_text | Exact |
+| PARAGRAPH_TEXT | long_text | Exact |
+| MULTIPLE_CHOICE | radio | Exact |
+| CHECKBOXES | checkbox_group | Exact |
+| DROPDOWN | dropdown | Exact |
+| LINEAR_SCALE | rating | Exact |
+| MULTIPLE_CHOICE_GRID | matrix | Approximate |
+| CHECKBOX_GRID | matrix | Approximate |
+| DATE | date | Exact |
+| TIME | time | Exact |
+| FILE_UPLOAD | file | Exact |
+`;
+      if (!credentialId) {
+        return {
+          content: [{
+            type: "text",
+            text: `# Google Forms Import
+
+## Setup Required
+
+Before importing Google Forms, you need to connect your Google account:
+
+1. Go to **Settings > Integrations** in NetPad
+2. Click **Connect Google Account** under Google Forms
+3. Authorize NetPad to read your forms
+4. Copy the credential ID from the connection details
+
+Or use this URL to start the OAuth flow:
+\`\`\`
+${baseUrl}/api/auth/google?provider=google_forms&orgId=${organizationId}
+\`\`\`
+
+## Once Connected
+
+Call this tool again with the \`credentialId\` parameter to preview or import the form.
+
+${fieldTypeMapping}`
+          }]
+        };
+      }
+      const previewApiCall = `
+## Preview Import
+
+To see how the Google Form will be mapped to NetPad fields:
+
+\`\`\`bash
+curl "${baseUrl}/api/integrations/google-forms/preview?\\
+orgId=${organizationId}&\\
+credentialId=${credentialId}&\\
+formId=${formId}"
+\`\`\`
+
+Or using fetch:
+
+\`\`\`typescript
+const response = await fetch(
+  '${baseUrl}/api/integrations/google-forms/preview?' + new URLSearchParams({
+    orgId: '${organizationId}',
+    credentialId: '${credentialId}',
+    formId: '${formId}',
+  })
+);
+const preview = await response.json();
+console.log('Fields:', preview.previewConfig.fieldConfigs);
+console.log('Warnings:', preview.mappingResult.warnings);
+\`\`\`
+`;
+      const importApiCall = `
+## Execute Import
+
+To create the NetPad form from the Google Form:
+
+\`\`\`bash
+curl -X POST "${baseUrl}/api/integrations/google-forms/import" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "orgId": "${organizationId}",
+    "credentialId": "${credentialId}",
+    "formId": "${formId}",
+    "projectId": "${projectId}"
+  }'
+\`\`\`
+
+Or using fetch:
+
+\`\`\`typescript
+const response = await fetch('${baseUrl}/api/integrations/google-forms/import', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({
+    orgId: '${organizationId}',
+    credentialId: '${credentialId}',
+    formId: '${formId}',
+    projectId: '${projectId}',
+    // Optional customizations:
+    customizations: {
+      name: 'Custom Form Name',  // Override the form name
+      fieldOverrides: {          // Modify specific field mappings
+        'field_path': { type: 'dropdown' }
+      },
+      excludeFields: ['unwanted_field']  // Skip certain fields
+    }
+  })
+});
+
+const result = await response.json();
+if (result.success) {
+  console.log('Form created:', result.form.id);
+  console.log('Edit URL:', result.importReport.viewUrl);
+}
+\`\`\`
+`;
+      return {
+        content: [{
+          type: "text",
+          text: `# Google Forms Import
+
+**Form ID:** ${formId}
+**Organization:** ${organizationId}
+**Project:** ${projectId}
+**Credential:** ${credentialId}
+
+${previewApiCall}
+
+${preview ? "" : importApiCall}
+
+${fieldTypeMapping}
+
+## Using the Import Wizard UI
+
+Alternatively, users can import Google Forms through the NetPad UI:
+
+1. Go to **Forms** in your project
+2. Click **Import** > **Import from Google Forms**
+3. Select the Google account and form
+4. Review the field mappings
+5. Click **Import**
+
+## Notes
+
+- Only form structure is imported, not responses/submissions
+- Some field types may be approximated (see mapping table)
+- Validation rules are preserved where possible
+- Section/page breaks become multi-page form pages
+- Images and videos in the form are not imported`
+        }]
+      };
+    }
+  );
+  server.tool(
+    "list_google_forms",
+    "List Google Forms available for import. Requires a connected Google account.",
+    {
+      organizationId: external_exports.string().describe("The NetPad organization ID"),
+      credentialId: external_exports.string().describe("The credential ID for the Google Forms connection"),
+      searchQuery: external_exports.string().optional().describe("Search query to filter forms by name")
+    },
+    async ({ organizationId, credentialId, searchQuery }) => {
+      const baseUrl = "https://netpad.io";
+      const params = new URLSearchParams({
+        orgId: organizationId,
+        credentialId
+      });
+      if (searchQuery) {
+        params.set("q", searchQuery);
+      }
+      return {
+        content: [{
+          type: "text",
+          text: `# List Google Forms
+
+To list forms available for import, make this API call:
+
+\`\`\`bash
+curl "${baseUrl}/api/integrations/google-forms?${params.toString()}"
+\`\`\`
+
+Or using fetch:
+
+\`\`\`typescript
+const response = await fetch(
+  '${baseUrl}/api/integrations/google-forms?${params.toString()}'
+);
+const data = await response.json();
+
+// data.forms contains:
+// - id: Form ID for importing
+// - name: Form title
+// - modifiedTime: Last modified date
+// - webViewLink: Link to edit form in Google
+
+for (const form of data.forms) {
+  console.log(\`\${form.name} (ID: \${form.id})\`);
+}
+\`\`\`
+
+## Response Format
+
+\`\`\`json
+{
+  "forms": [
+    {
+      "id": "1BxiMVs0XRA5nFMdkkxYYfYpHm5PZ-abc123",
+      "name": "Customer Feedback Survey",
+      "modifiedTime": "2024-01-15T10:30:00Z",
+      "webViewLink": "https://docs.google.com/forms/d/.../edit"
+    }
+  ],
+  "nextPageToken": "..." // For pagination
+}
+\`\`\`
+
+Use the \`import_google_form\` tool with the form ID to import a specific form.`
+        }]
+      };
+    }
+  );
   server.resource(
     "netpad-extension-reference",
     "netpad://reference/extensions",