Custom Tool Configuration Error in Embedded Sanity Studio Setup

I can see the issue in your code! You're trying to add a custom tool through studio.components.toolMenu, but that's not the correct approach. The toolMenu component is for customizing how the tool menu renders, not for adding new tools themselves.

The correct way is to add your custom tool directly to the tools array at the root level of your config, not through studio.components.

Here's how to fix it:

First, define your custom tool (as an object, not a function):

import { Card, Text } from '@sanity/ui'

const MyCustomComponent = () => {
  return (
    <Card padding={4}>
      <Text>My custom tool content</Text>
    </Card>
  )
}

export const myCustomTool = {
  name: 'my-custom-tool',
  title: 'My Custom Tool',
  component: MyCustomComponent,
  icon: () => '🔧', // optional icon
}

Then add it to your config's tools array:

import { defineConfig } from 'sanity'
import { myCustomTool } from './myCustomTool'

export default defineConfig({
  // ... other config like projectId, dataset, etc.
  
  tools: [
    myCustomTool,
    // other default tools will still be included
  ],
  
  // ... rest of your config
})

Or if you want to preserve all existing tools and add yours:

export default defineConfig({
  tools: (prev) => [...prev, myCustomTool],
  // ... other config
})

Key points:

• Remove the studio.components.toolMenu customization entirely
• myCustomTool should be an object with name, title, and component properties (not a function call like myCustomTool())
• Add it to the tools array at the root of defineConfig(), not inside studio.components

This approach works regardless of whether your Studio runs on port 3333 or at /studio on localhost:3000 - the routing configuration doesn't affect how you define tools.

For more details, check out the official Studio tools documentation and the Tool API reference.