v0.2 (#4)

Author: MathurAditya724

docs/content/docs/concepts/architecture.md

@@ -1,10 +1,10 @@
 {
     "title": "Concepts",
     "pages": [
-        "architecture",
-        "resources",
-        "prompts",
-        "tools",
-        "transports"
+        "./resources/index",
+        "./prompts/index",
+        "./tools/index",
+        "./muppet/index",
+        "./transports/index"
     ]
 }

docs/content/docs/concepts/example-prompt.ts

@@ -1,13 +1,13 @@
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { Hono } from "hono";
-import { bridge, muppet } from "muppet";
+import { muppet, bridge } from "muppet";
 
 const app = new Hono();
 
 // Define your tools, prompts, and resources here
 // ...
 
-muppet(app, {
+const instance = muppet(app, {
   name: "My Muppet",
   version: "1.0.0",
 }).then((mcp) => {

docs/content/docs/concepts/example-resource.ts

@@ -0,0 +1,12 @@
+import { Hono } from "hono";
+import { muppet } from "muppet";
+
+const app = new Hono();
+
+// Define your tools, prompts, and resources here
+// ...
+
+const instance = muppet(app, {
+  name: "My Muppet",
+  version: "1.0.0",
+});

docs/content/docs/concepts/example-tool.ts

@@ -0,0 +1,51 @@
+---
+title: MCP & Bridge
+description: Creating the MCP instance of your app
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+import fs from 'fs';
+
+## Muppet
+
+Now that you have defined your tools and prompts, you can create the MCP instance of your app. This is done using the `muppet` function. This function takes the `app` instance and an configurtions object as arguments.
+
+<DynamicCodeBlock lang="ts" code={fs.readFileSync("./content/docs/concepts/muppet/example-muppet.ts", "utf-8")} />
+
+The `muppet` function takes the following configurations
+
+<TypeTable
+  type={{
+    name: {
+      description: 'The name of the MCP server. This is used to identify the server by the MCP Client.',
+      type: 'string',
+      required: true,
+    },
+    version: {
+      description: 'The version of the MCP server. This is used to identify the server by the MCP Client.',
+      type: 'string',
+      required: true,
+    },
+    logger: {
+      description: 'A logger instance to use for logging. It uses pino under the hood, so you can use any pino compatible logger.',
+      type: 'number',
+    },
+    resources: {
+      type: "Record<string, ResourceFetcherFn>",
+    },
+    events: {
+      type: "Emitter<ClientToServerNotifications>"
+    }
+  }}
+/>
+
+## Bridge
+
+Now let's create a bridge between the LLM and your server. This is done using the `bridge` function. Think of this like [Bifröst](https://en.wikipedia.org/wiki/Bifr%C3%B6st), it connects the LLM using the [transport layer](/docs/concepts/transports) to your server.
+
+This takes in your muppet instance and the transport layer you wanna use.
+
+<DynamicCodeBlock lang="ts" code={fs.readFileSync("./content/docs/concepts/muppet/example-bridge.ts", "utf-8")} />
+
+You can check out other transport layers [here](/docs/concepts/transports).

docs/content/docs/concepts/meta.json

@@ -0,0 +1,37 @@
+import { Hono } from "hono";
+import { describePrompt, mValidator, type PromptResponseType } from "muppet";
+import z from "zod";
+
+const app = new Hono();
+
+app.post(
+  "/explain-like-im-5",
+  describePrompt({
+    name: "Explain like I'm 5",
+    description: "A prompt to explain an advance topic to a 5 year old",
+    completion: ({ name, value }) => [
+      "quantum physics",
+      "machine learning",
+      "natural language processing",
+      "artificial intelligence",
+    ],
+  }),
+  mValidator(
+    "json",
+    z.object({
+      topic: z.string(),
+    }),
+  ),
+  (c) => {
+    const { topic } = c.req.valid("json");
+    return c.json<PromptResponseType>([
+      {
+        role: "user",
+        content: {
+          type: "text",
+          text: `Explain ${topic} to me like I'm five`,
+        },
+      },
+    ]);
+  },
+);