Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Hello Widget ExampleSay hello to Bob with confetti"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Hello Widget Example
A minimal ChatGPT app with interactive greeting widget, confetti animation, and theme support.
Built with Smithery CLI
Prerequisites
Smithery API key: Get yours at smithery.ai/account/api-keys
Getting Started
Install dependencies:
npm installStart smithery playground:
npm run dev
Try asking: "Say hello to Alice"
Development
Your code is organized as:
app/server/- MCP server with widget resourceapp/shared/- Shared TypeScript typesapp/web/src/- React widget component
Edit app/web/src/greeter.tsx to customize the widget UI.
Build
Creates bundled server and widget JS in .smithery/
Deploy
Ready to deploy? Push your code to GitHub and deploy to Smithery:
Create a new repository at github.com/new
Initialize git and push to GitHub:
git add . git commit -m "Hello widget" git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git git push -u origin mainDeploy your app to Smithery at smithery.ai/new