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., "@Hono MCP Sample Serverwhat's the weather in Tokyo?"
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.
Hono MCP Sample Server
Honoフレームワークとhono/mcpを使用したModel Context Protocol (MCP)
サーバーのサンプル実装です。
機能
このサンプルサーバーは以下のMCP機能を提供します：
リソース
weather://tokyo: 東京の天気情報を取得
news://latest: 最新ニュースヘッドラインを取得
ツール
calculator: 2つの数値を加算
パラメータ:
a(number),b(number)
reverse-string: 文字列を反転
パラメータ:
text(string)
プロンプト
code-review: コードレビューを依頼するプロンプトテンプレート
引数:
code(string)
セットアップ
依存関係のインストール
npm install使用方法
開発モード
npm run devビルド
npm run build本番環境で実行
npm startエンドポイント
サーバーが起動すると、以下のエンドポイントが利用可能になります：
http://localhost:3000/- サーバー情報http://localhost:3000/mcp- MCPエンドポイント
技術スタック
Hono: 高速で軽量なWebフレームワーク
hono/mcp: HonoのMCPサポートパッケージ
@modelcontextprotocol/sdk: MCP公式SDK
zod: スキーマ定義（v3系を使用）
TypeScript: 型安全な開発
tsx: TypeScriptの実行環境
構成
mcp-sample/
├── src/
│ └── index.ts # メインサーバーファイル
├── package.json # プロジェクト設定
├── tsconfig.json # TypeScript設定
└── README.md # このファイルカスタマイズ
新しいリソースを追加
mcpServer.registerResource(
"custom resource",
new ResourceTemplate("custom://resource", { list: undefined }),
{
description: "リソースの説明",
mimeType: "text/plain",
},
async (uri) => ({
contents: [
{
url: uri.href,
mimeType: "text/plain",
text: "リソースの内容",
},
],
}),
);新しいツールを追加
mcpServer.registerTool(
"custom-tool",
{
description: "ツールの説明",
inputSchema: {
param1: z.string().describe("パラメータの説明"),
},
},
async ({ param1 }) => {
const result = a + b;
return {
content: [
{
type: "text",
text: `処理結果: ${param1}`,
},
],
};
},
);ライセンス
MIT
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.