Hello Widget Example
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
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
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/arjunkmrm/tic-tac-toe'
If you have feedback or need assistance with the MCP directory API, please join our Discord server