Hello Widget Example
Click on "Deploy 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
npm run buildCreates 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
Learn More
Related MCP Connectors
MCP server for AI dialogue using various LLM models via AceDataCloud
Hosted MCP server connecting claude.ai, ChatGPT and other AI apps to your own computer
MCP server for GLM chat completions using Zhipu AI models via AceDataCloud
- ZapierOAuthcom.zapier
Hosted MCP server connecting AI assistants to 9,000+ apps and 40,000+ actions via Zapier.