feat(mcp-resources): Enable @-resource and /-command inline completion (#1464)

Co-authored-by: Claude <noreply@anthropic.com>

Author: alecf

apps/web/app/subscribe/tambo-subscribe-integration.tsx

@@ -12,9 +12,9 @@ import {
   MessageInput,
   MessageInputError,
   MessageInputSubmitButton,
-  MessageInputTextarea,
   MessageInputToolbar,
 } from "@/components/ui/tambo/message-input";
+import { MessageInputTextareaWithInteractables } from "@/components/ui/tambo/message-input-with-interactables";
 import {
   ThreadContent,
   ThreadContentMessages,
@@ -113,7 +113,7 @@ export function TamboSubscribeIntegration() {
           </div>
           <div className="p-3 sm:p-4 border-t border-gray-200">
             <MessageInput contextKey={contextKey}>
-              <MessageInputTextarea />
+              <MessageInputTextareaWithInteractables />
               <MessageInputToolbar>
                 <MessageInputSubmitButton />
               </MessageInputToolbar>

apps/web/components/ui/tambo/message-input-with-interactables.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  MessageInputTextarea,
+  type MessageInputTextareaProps,
+  type ResourceProvider,
+} from "@/components/ui/tambo/message-input";
+import { useInteractablesResourceProvider } from "@/hooks/use-interactables-resource-provider";
+import * as React from "react";
+
+/**
+ * MessageInputTextarea wrapper that automatically integrates with Tambo interactables.
+ *
+ * This is the apps/web-specific version that combines the generic MessageInputTextarea
+ * with the interactables system. It's a drop-in replacement for MessageInputTextarea
+ * that adds automatic @ mention support for registered components.
+ *
+ * **For apps/web developers:** Use this component instead of MessageInputTextarea
+ * when you want automatic interactables integration.
+ *
+ * @example
+ * ```tsx
+ * import { MessageInput } from "@/components/ui/tambo/message-input";
+ * import { MessageInputTextareaWithInteractables } from "@/components/ui/tambo/message-input-with-interactables";
+ *
+ * <MessageInput>
+ *   <MessageInputTextareaWithInteractables />
+ *   <MessageInput.Toolbar>
+ *     <MessageInput.SubmitButton />
+ *   </MessageInput.Toolbar>
+ * </MessageInput>
+ * ```
+ *
+ * @example With external resource provider
+ * ```tsx
+ * const mcpResourceProvider: ResourceProvider = {
+ *   search: async (query) => {
+ *     // Fetch MCP resources...
+ *     return mcpResources;
+ *   }
+ * };
+ *
+ * <MessageInput>
+ *   <MessageInputTextareaWithInteractables
+ *     resourceProvider={mcpResourceProvider}
+ *   />
+ * </MessageInput>
+ * ```
+ */
+export const MessageInputTextareaWithInteractables = ({
+  resourceProvider: externalResourceProvider,
+  ...props
+}: Omit<MessageInputTextareaProps, "onResourceSelect"> & {
+  /** Optional external resource provider to merge with interactables */
+  resourceProvider?: ResourceProvider;
+}) => {
+  const { resourceProvider, onResourceSelect } =
+    useInteractablesResourceProvider(externalResourceProvider);
+
+  return (
+    <MessageInputTextarea
+      resourceProvider={resourceProvider}
+      onResourceSelect={onResourceSelect}
+      {...props}
+    />
+  );
+};
+
+MessageInputTextareaWithInteractables.displayName =
+  "MessageInputTextareaWithInteractables";