@seed-ship/mcp-ui-solid 2.0.0 → 2.1.0

package/src/plugins/duckdb.ts

@@ -0,0 +1,269 @@
+/**
+ * DuckDB WASM Autocomplete Plugin
+ * Provides SQL-based suggestions using DuckDB WASM
+ *
+ * Sprint Autocomplete Feature
+ *
+ * Note: DuckDB WASM is ~2MB and is lazy-loaded on first use.
+ * This plugin requires @duckdb/duckdb-wasm as an optional peer dependency.
+ */
+
+import type {
+  AutocompletePlugin,
+  AutocompleteResult,
+  AutocompleteContext,
+  AutocompleteOption,
+  DuckDBPluginConfig
+} from '../types'
+
+// Type for DuckDB connection (lazy loaded)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DuckDBConnection = any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DuckDBInstance = any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DuckDBModule = any
+
+// Module state for DuckDB (singleton)
+let duckdbPromise: Promise<{ db: DuckDBInstance; conn: DuckDBConnection }> | null = null
+
+/**
+ * Check if we're in a test environment
+ */
+function isTestEnvironment(): boolean {
+  return typeof process !== 'undefined' && (
+    process.env.NODE_ENV === 'test' ||
+    process.env.VITEST === 'true' ||
+    typeof (globalThis as any).vitest !== 'undefined'
+  )
+}
+
+/**
+ * Lazy load DuckDB WASM
+ */
+async function loadDuckDB(): Promise<{ db: DuckDBInstance; conn: DuckDBConnection }> {
+  // In test environment, throw early to avoid import issues
+  if (isTestEnvironment()) {
+    throw new Error('[DuckDB Plugin] DuckDB WASM is not available in test environment')
+  }
+
+  if (duckdbPromise) {
+    return duckdbPromise
+  }
+
+  duckdbPromise = (async () => {
+    try {
+      // Dynamic import to avoid bundling if not used
+      // The import is wrapped to handle missing module gracefully
+      let duckdb: DuckDBModule
+      try {
+        duckdb = await import(/* @vite-ignore */ '@duckdb/duckdb-wasm')
+      } catch (importError) {
+        throw new Error(
+          '[DuckDB Plugin] @duckdb/duckdb-wasm is not installed. ' +
+          'Install it with: npm install @duckdb/duckdb-wasm'
+        )
+      }
+
+      // Get WASM bundles
+      const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles()
+
+      // Select best bundle for the browser
+      const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES)
+
+      // Instantiate worker and database
+      const worker = new Worker(bundle.mainWorker!)
+      const logger = new duckdb.ConsoleLogger()
+      const db = new duckdb.AsyncDuckDB(logger, worker)
+
+      await db.instantiate(bundle.mainModule, bundle.pthreadWorker)
+
+      // Create connection
+      const conn = await db.connect()
+
+      return { db, conn }
+    } catch (error) {
+      console.error('[DuckDB Plugin] Failed to load DuckDB WASM:', error)
+      duckdbPromise = null
+      throw error
+    }
+  })()
+
+  return duckdbPromise
+}
+
+/**
+ * Create a DuckDB WASM autocomplete plugin
+ */
+export function createDuckDBPlugin(config: DuckDBPluginConfig): AutocompletePlugin {
+  const { query, data } = config
+
+  let isReady = false
+  let initPromise: Promise<void> | null = null
+  let connection: DuckDBConnection | null = null
+
+  /**
+   * Initialize DuckDB and load data if provided
+   */
+  const initialize = async (): Promise<void> => {
+    if (initPromise) return initPromise
+
+    initPromise = (async () => {
+      try {
+        const { conn } = await loadDuckDB()
+        connection = conn
+
+        // Load data if provided
+        if (data) {
+          await loadData(conn, data)
+        }
+
+        isReady = true
+      } catch (error) {
+        console.error('[DuckDB Plugin] Initialization error:', error)
+        throw error
+      }
+    })()
+
+    return initPromise
+  }
+
+  /**
+   * Load data into DuckDB
+   */
+  const loadData = async (
+    conn: DuckDBConnection,
+    dataConfig: NonNullable<DuckDBPluginConfig['data']>
+  ): Promise<void> => {
+    const { tableName, source, format = 'csv' } = dataConfig
+
+    try {
+      if (typeof source === 'string') {
+        // URL - fetch and load
+        if (source.startsWith('http://') || source.startsWith('https://')) {
+          if (format === 'csv') {
+            await conn.query(`
+              CREATE TABLE IF NOT EXISTS ${tableName} AS
+              SELECT * FROM read_csv_auto('${source}')
+            `)
+          } else if (format === 'json') {
+            await conn.query(`
+              CREATE TABLE IF NOT EXISTS ${tableName} AS
+              SELECT * FROM read_json_auto('${source}')
+            `)
+          } else if (format === 'parquet') {
+            await conn.query(`
+              CREATE TABLE IF NOT EXISTS ${tableName} AS
+              SELECT * FROM read_parquet('${source}')
+            `)
+          }
+        } else {
+          // Inline data (CSV/JSON string)
+          // For inline data, we'd need to use DuckDB's data registration
+          console.warn('[DuckDB Plugin] Inline data not yet supported, use URL instead')
+        }
+      }
+    } catch (error) {
+      console.error('[DuckDB Plugin] Error loading data:', error)
+      throw error
+    }
+  }
+
+  return {
+    id: 'duckdb',
+    name: 'DuckDB WASM',
+
+    configure(newConfig: Record<string, any>) {
+      // Allow runtime reconfiguration
+      Object.assign(config, newConfig)
+    },
+
+    isReady() {
+      return isReady
+    },
+
+    async getSuggestions(
+      input: string,
+      _context?: AutocompleteContext
+    ): Promise<AutocompleteResult> {
+      // Ensure DuckDB is initialized
+      if (!isReady) {
+        try {
+          await initialize()
+        } catch (error) {
+          console.error('[DuckDB Plugin] Failed to initialize:', error)
+          return { type: 'options', options: [] }
+        }
+      }
+
+      if (!connection) {
+        return { type: 'options', options: [] }
+      }
+
+      if (!input.trim()) {
+        return { type: 'options', options: [] }
+      }
+
+      try {
+        // Replace :search placeholder with actual value
+        const preparedQuery = query.replace(/:search/g, input.replace(/'/g, "''"))
+
+        const result = await connection.query(preparedQuery)
+        const rows = result.toArray()
+
+        // Get column names
+        const columns = result.schema.fields.map((f: any) => f.name)
+        const valueColumn = columns[0]
+        const labelColumn = columns.length > 1 ? columns[1] : columns[0]
+
+        const options: AutocompleteOption[] = rows.map((row: any) => {
+          // Convert row to object
+          const rowObj: Record<string, any> = {}
+          columns.forEach((col: string, idx: number) => {
+            rowObj[col] = row[idx] ?? row[col]
+          })
+
+          return {
+            value: String(rowObj[valueColumn]),
+            label: String(rowObj[labelColumn]),
+            metadata: rowObj
+          }
+        })
+
+        return {
+          type: 'options',
+          options
+        }
+      } catch (error) {
+        console.error('[DuckDB Plugin] Query error:', error)
+        return { type: 'options', options: [] }
+      }
+    },
+
+    async dispose() {
+      if (connection) {
+        try {
+          await connection.close()
+        } catch (e) {
+          console.error('[DuckDB Plugin] Error closing connection:', e)
+        }
+        connection = null
+      }
+      isReady = false
+      initPromise = null
+    }
+  }
+}
+
+/**
+ * Preload DuckDB WASM (call early to warm cache)
+ */
+export async function preloadDuckDB(): Promise<void> {
+  try {
+    await loadDuckDB()
+  } catch (error) {
+    console.error('[DuckDB Plugin] Preload error:', error)
+  }
+}
+
+export default createDuckDBPlugin

package/src/plugins/groq.ts

@@ -0,0 +1,137 @@
+/**
+ * Groq LLM Autocomplete Plugin
+ * Provides LLM-powered text completion suggestions using Groq API
+ *
+ * Sprint Autocomplete Feature
+ */
+
+import type {
+  AutocompletePlugin,
+  AutocompleteResult,
+  AutocompleteContext,
+  GroqPluginConfig
+} from '../types'
+
+/**
+ * Default system prompt for completion
+ */
+const DEFAULT_SYSTEM_PROMPT = `You are an autocomplete assistant. Given the user's partial input, provide a natural completion.
+Rules:
+- Complete the text naturally and concisely
+- Return ONLY the completed text (including the original input)
+- Do not add quotes, explanations, or additional text
+- If unsure, return the original input unchanged`
+
+/**
+ * Create a Groq LLM autocomplete plugin
+ */
+export function createGroqPlugin(config: GroqPluginConfig): AutocompletePlugin {
+  const {
+    apiKey,
+    model = 'mixtral-8x7b-32768',
+    systemPrompt = DEFAULT_SYSTEM_PROMPT,
+    maxTokens = 50,
+    temperature = 0.3
+  } = config
+
+  let isConfigured = !!apiKey
+
+  return {
+    id: 'groq',
+    name: 'Groq LLM',
+
+    configure(newConfig: Record<string, any>) {
+      if (newConfig.apiKey) {
+        isConfigured = true
+      }
+    },
+
+    isReady() {
+      return isConfigured
+    },
+
+    async getSuggestions(
+      input: string,
+      context?: AutocompleteContext
+    ): Promise<AutocompleteResult> {
+      if (!isConfigured) {
+        console.warn('[Groq Plugin] API key not configured')
+        return { type: 'completion', completion: input }
+      }
+
+      if (!input.trim()) {
+        return { type: 'completion', completion: '' }
+      }
+
+      try {
+        // Build context-aware prompt
+        let userPrompt = `Complete this text: "${input}"`
+
+        if (context?.fieldName) {
+          userPrompt = `Field: ${context.fieldName}\nComplete this text: "${input}"`
+        }
+
+        if (context?.formData && Object.keys(context.formData).length > 0) {
+          const formContext = Object.entries(context.formData)
+            .filter(([key, value]) => value && key !== context.fieldName)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join(', ')
+
+          if (formContext) {
+            userPrompt = `Form context: ${formContext}\n${userPrompt}`
+          }
+        }
+
+        const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+          },
+          body: JSON.stringify({
+            model,
+            messages: [
+              { role: 'system', content: systemPrompt },
+              { role: 'user', content: userPrompt }
+            ],
+            max_tokens: maxTokens,
+            temperature,
+            stream: false
+          })
+        })
+
+        if (!response.ok) {
+          const errorText = await response.text()
+          console.error('[Groq Plugin] API error:', response.status, errorText)
+          return { type: 'completion', completion: input }
+        }
+
+        const data = await response.json()
+        const completion = data.choices?.[0]?.message?.content?.trim() || input
+
+        // Clean up the completion (remove quotes if present)
+        let cleanCompletion = completion
+        if (cleanCompletion.startsWith('"') && cleanCompletion.endsWith('"')) {
+          cleanCompletion = cleanCompletion.slice(1, -1)
+        }
+        if (cleanCompletion.startsWith("'") && cleanCompletion.endsWith("'")) {
+          cleanCompletion = cleanCompletion.slice(1, -1)
+        }
+
+        return {
+          type: 'completion',
+          completion: cleanCompletion
+        }
+      } catch (error) {
+        console.error('[Groq Plugin] Error:', error)
+        return { type: 'completion', completion: input }
+      }
+    },
+
+    dispose() {
+      // No cleanup needed
+    }
+  }
+}
+
+export default createGroqPlugin

package/src/plugins/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Autocomplete Plugins Index
+ * Re-exports all available autocomplete plugins
+ *
+ * Sprint Autocomplete Feature
+ */
+
+export { createGroqPlugin } from './groq'
+export { createSupabasePlugin } from './supabase'
+export { createRestPlugin } from './rest'
+
+// DuckDB plugin is exported separately due to WASM dependencies
+// Import directly from './duckdb' when needed:
+// import { createDuckDBPlugin, preloadDuckDB } from '@seed-ship/mcp-ui-solid/plugins/duckdb'

package/src/plugins/rest.ts

@@ -0,0 +1,147 @@
+/**
+ * REST API Autocomplete Plugin
+ * Provides suggestions from any REST API endpoint
+ *
+ * Sprint Autocomplete Feature
+ */
+
+import type {
+  AutocompletePlugin,
+  AutocompleteResult,
+  AutocompleteContext,
+  AutocompleteOption,
+  RestPluginConfig
+} from '../types'
+
+/**
+ * Get value at path (e.g., "data.results" -> obj.data.results)
+ */
+function getByPath(obj: any, path: string): any {
+  return path.split('.').reduce((current, key) => current?.[key], obj)
+}
+
+/**
+ * Default transform function
+ */
+function defaultTransform(
+  data: any[],
+  valueField: string,
+  labelField: string
+): AutocompleteOption[] {
+  return data.map(item => ({
+    value: String(item[valueField] ?? item.value ?? item.id ?? ''),
+    label: String(item[labelField] ?? item.label ?? item.name ?? item[valueField] ?? ''),
+    metadata: item
+  }))
+}
+
+/**
+ * Create a REST API autocomplete plugin
+ */
+export function createRestPlugin(config: RestPluginConfig): AutocompletePlugin {
+  const {
+    endpoint,
+    method = 'GET',
+    headers = {},
+    bodyTemplate,
+    transform,
+    resultPath,
+    valueField = 'value',
+    labelField = 'label'
+  } = config
+
+  return {
+    id: 'rest',
+    name: 'REST API',
+
+    configure(newConfig: Record<string, any>) {
+      Object.assign(config, newConfig)
+    },
+
+    isReady() {
+      return !!endpoint
+    },
+
+    async getSuggestions(
+      input: string,
+      _context?: AutocompleteContext
+    ): Promise<AutocompleteResult> {
+      if (!endpoint) {
+        console.warn('[REST Plugin] Endpoint not configured')
+        return { type: 'options', options: [] }
+      }
+
+      if (!input.trim()) {
+        return { type: 'options', options: [] }
+      }
+
+      try {
+        // Build URL with search placeholder
+        const url = endpoint.replace(/\{search\}/g, encodeURIComponent(input))
+
+        // Build request options
+        const requestOptions: RequestInit = {
+          method,
+          headers: {
+            'Content-Type': 'application/json',
+            ...headers
+          }
+        }
+
+        // Add body for POST requests
+        if (method === 'POST' && bodyTemplate) {
+          const body = bodyTemplate.replace(/\{search\}/g, input)
+          requestOptions.body = body
+        } else if (method === 'POST') {
+          requestOptions.body = JSON.stringify({ search: input })
+        }
+
+        const response = await fetch(url, requestOptions)
+
+        if (!response.ok) {
+          const errorText = await response.text()
+          console.error('[REST Plugin] API error:', response.status, errorText)
+          return { type: 'options', options: [] }
+        }
+
+        const data = await response.json()
+
+        // Extract results from path if specified
+        let results = resultPath ? getByPath(data, resultPath) : data
+
+        // Ensure results is an array
+        if (!Array.isArray(results)) {
+          if (results && typeof results === 'object') {
+            // Try common result structures
+            results = results.data || results.results || results.items || [results]
+          } else {
+            results = []
+          }
+        }
+
+        // Transform results to options
+        let options: AutocompleteOption[]
+
+        if (transform) {
+          options = transform(results)
+        } else {
+          options = defaultTransform(results, valueField, labelField)
+        }
+
+        return {
+          type: 'options',
+          options
+        }
+      } catch (error) {
+        console.error('[REST Plugin] Error:', error)
+        return { type: 'options', options: [] }
+      }
+    },
+
+    dispose() {
+      // No cleanup needed
+    }
+  }
+}
+
+export default createRestPlugin

package/src/plugins/supabase.ts

@@ -0,0 +1,120 @@
+/**
+ * Supabase Autocomplete Plugin
+ * Provides data-driven suggestions from a Supabase table
+ *
+ * Sprint Autocomplete Feature
+ */
+
+import type {
+  AutocompletePlugin,
+  AutocompleteResult,
+  AutocompleteContext,
+  AutocompleteOption,
+  SupabasePluginConfig
+} from '../types'
+
+/**
+ * Create a Supabase autocomplete plugin
+ */
+export function createSupabasePlugin(config: SupabasePluginConfig): AutocompletePlugin {
+  const {
+    url,
+    anonKey,
+    table,
+    column,
+    searchColumn,
+    labelColumn,
+    limit = 10,
+    filter
+  } = config
+
+  const isConfigured = !!(url && anonKey && table && column)
+  const effectiveSearchColumn = searchColumn || column
+  const effectiveLabelColumn = labelColumn || column
+
+  return {
+    id: 'supabase',
+    name: 'Supabase',
+
+    configure(newConfig: Record<string, any>) {
+      // Allow runtime reconfiguration
+      Object.assign(config, newConfig)
+    },
+
+    isReady() {
+      return isConfigured
+    },
+
+    async getSuggestions(
+      input: string,
+      _context?: AutocompleteContext
+    ): Promise<AutocompleteResult> {
+      if (!isConfigured) {
+        console.warn('[Supabase Plugin] Not properly configured')
+        return { type: 'options', options: [] }
+      }
+
+      if (!input.trim()) {
+        return { type: 'options', options: [] }
+      }
+
+      try {
+        // Build query URL
+        let queryUrl = `${url}/rest/v1/${table}?select=${column}`
+
+        if (column !== effectiveLabelColumn) {
+          queryUrl += `,${effectiveLabelColumn}`
+        }
+
+        // Add ILIKE filter for search
+        queryUrl += `&${effectiveSearchColumn}=ilike.${encodeURIComponent(input)}%`
+
+        // Add limit
+        queryUrl += `&limit=${limit}`
+
+        // Add custom filters
+        if (filter) {
+          Object.entries(filter).forEach(([key, value]) => {
+            queryUrl += `&${key}=eq.${encodeURIComponent(String(value))}`
+          })
+        }
+
+        const response = await fetch(queryUrl, {
+          headers: {
+            'apikey': anonKey,
+            'Authorization': `Bearer ${anonKey}`,
+            'Content-Type': 'application/json'
+          }
+        })
+
+        if (!response.ok) {
+          const errorText = await response.text()
+          console.error('[Supabase Plugin] API error:', response.status, errorText)
+          return { type: 'options', options: [] }
+        }
+
+        const data = await response.json()
+
+        const options: AutocompleteOption[] = data.map((row: Record<string, any>) => ({
+          value: String(row[column]),
+          label: String(row[effectiveLabelColumn]),
+          metadata: row
+        }))
+
+        return {
+          type: 'options',
+          options
+        }
+      } catch (error) {
+        console.error('[Supabase Plugin] Error:', error)
+        return { type: 'options', options: [] }
+      }
+    },
+
+    dispose() {
+      // No cleanup needed
+    }
+  }
+}
+
+export default createSupabasePlugin