Lint

Author: cmsparks

.eslintrc.cjs

@@ -1,9 +1,6 @@
 // This configuration only applies to the package manager root.
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-	ignorePatterns: [
-		'apps/**',
-		'packages/**',
-	],
-	extends: ['@repo/eslint-config/default.cjs']
+	ignorePatterns: ['apps/**', 'packages/**'],
+	extends: ['@repo/eslint-config/default.cjs'],
 }

.vscode/extensions.json

@@ -3,10 +3,7 @@
 	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
 	// List of extensions which should be recommended for users of this workspace.
-	"recommendations": [
-		"esbenp.prettier-vscode",
-		"dbaeumer.vscode-eslint",
-	],
+	"recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": []
 }

.vscode/settings.json

@@ -13,11 +13,11 @@
 		"**/packages/tools/bin/*": "shellscript",
 		"**/*.css": "tailwindcss",
 		"turbo.json": "jsonc",
-		"**/packages/typescript-config/*.json": "jsonc",
+		"**/packages/typescript-config/*.json": "jsonc"
 	},
 	"eslint.workingDirectories": [
 		{
 			"mode": "auto"
 		}
-	],
+	]
 }

README.md

@@ -4,14 +4,14 @@ Model Context Protocol (MCP) is a [new, standardized protocol](https://modelcont
 
 This lets you use Claude Desktop, or any MCP Client, to use natural language to accomplish things on your Cloudflare account, e.g.:
 
-* `List all the Cloudflare workers on my <some-email>@gmail.com account.`
-* `Can you tell me about any potential issues on this particular worker '...'?`
+- `List all the Cloudflare workers on my <some-email>@gmail.com account.`
+- `Can you tell me about any potential issues on this particular worker '...'?`
 
 ## Access the remote MCP server from Claude Desktop
 
 Open Claude Desktop and navigate to Settings -> Developer -> Edit Config. This opens the configuration file that controls which MCP servers Claude can access.
 
-Replace the content with the following configuration. Once you restart Claude Desktop, a browser window will open showing your OAuth login page. Complete the authentication flow to grant Claude access to your MCP server. After you grant access, the tools will become available for you to use. 
+Replace the content with the following configuration. Once you restart Claude Desktop, a browser window will open showing your OAuth login page. Complete the authentication flow to grant Claude access to your MCP server. After you grant access, the tools will become available for you to use.
 
 ```
 {
@@ -44,17 +44,20 @@ Ensure your Cloudflare account has the necessary subscription level for the feat
 ## Features
 
 ### Workers Management
+
 - `worker_list`: List all Workers in your account
 - `worker_get_worker`: Get a Worker's script content
 
 ### Workers Logs
+
 - `worker_logs_by_worker_name`: Analyze recent logs for a Cloudflare Worker by worker name
 - `worker_logs_by_ray_id`: Analyze recent logs across all workers for a specific request by Cloudflare Ray ID
 - `worker_logs_keys`: Get available telemetry keys for a Cloudflare Worker
 
 ## Developing
 
 ### Apps
+
 - [workers-observability](apps/workers-observability/): The Workers Observability MCP server
 
 ### Packages

apps/sandbox-container/README.md

@@ -12,7 +12,7 @@ TODO: replace locally running server with the real docker container.
 
 1. Make sure the docker daemon is running
 
-2. Disable WARP and run 
+2. Disable WARP and run
 
 ```
 npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/14387504770/npm-package-wrangler-8740 deploy

apps/sandbox-container/server/containerHelpers.ts

@@ -1,14 +1,14 @@
 export const MAX_CONTAINERS = 8
 export async function startAndWaitForPort(
-  environment: "dev" | "prod",
+	environment: 'dev' | 'prod',
 	container: Container | undefined,
 	portToAwait: number,
 	maxTries = 10
 ): Promise<boolean> {
-  if (environment === "dev") {
-    console.log("Running in dev, assuming locally running container")
-    return true
-  }
+	if (environment === 'dev') {
+		console.log('Running in dev, assuming locally running container')
+		return true
+	}
 
 	if (!container) {
 		throw new Error('Error: ctx.container is undefined. Does this DO support containers?')
@@ -62,15 +62,17 @@ export async function startAndWaitForPort(
 }
 
 export async function proxyFetch(
-  environment: "dev" | "prod",
+	environment: 'dev' | 'prod',
 	container: Container | undefined,
 	request: Request,
 	portNumber: number
 ): Promise<Response> {
-  if (environment === "dev") {
-    const url = request.url.replace('https://', 'http://').replace("http://host", "http://localhost")
-    return fetch(url, request.clone() as Request)
-  }
+	if (environment === 'dev') {
+		const url = request.url
+			.replace('https://', 'http://')
+			.replace('http://host', 'http://localhost')
+		return fetch(url, request.clone() as Request)
+	}
 
 	if (!container) {
 		throw new Error('Error: ctx.container is undefined. Does this DO support containers?')

apps/sandbox-container/server/containerMcp.ts

@@ -166,7 +166,11 @@ export class ContainerMcpAgent extends McpAgent<Env, Props> {
 		// start container
 		let startedContainer = false
 		await this.ctx.blockConcurrencyWhile(async () => {
-			startedContainer = await startAndWaitForPort(this.env.ENVIRONMENT, this.ctx.container, OPEN_CONTAINER_PORT)
+			startedContainer = await startAndWaitForPort(
+				this.env.ENVIRONMENT,
+				this.ctx.container,
+				OPEN_CONTAINER_PORT
+			)
 		})
 		if (!startedContainer) {
 			throw new Error('Failed to start container')

apps/sandbox-container/server/index.ts

@@ -13,12 +13,12 @@ export { ContainerManager, ContainerMcpAgent }
 export type Env = {
 	CONTAINER_MCP_AGENT: DurableObjectNamespace<ContainerMcpAgent>
 	CONTAINER_MANAGER: DurableObjectNamespace<ContainerManager>
-	ENVIRONMENT: "dev" | "prod"
+	ENVIRONMENT: 'dev' | 'prod'
 }
 
 // TODO: add user specific props
 export type Props = {}
 
 const app = new Hono<{ Bindings: Env }>()
 
-export default ContainerMcpAgent.mount('/sse', { binding: 'CONTAINER_MCP_AGENT' })
+export default ContainerMcpAgent.mount('/sse', { binding: 'CONTAINER_MCP_AGENT' })

apps/workers-observability/README.md

@@ -6,44 +6,50 @@ You can deploy it to your own Cloudflare account, and after you create your own
 
 You can use this as a reference example for how to integrate other OAuth providers with an MCP server deployed to Cloudflare, using the [`workers-oauth-provider` library](https://github.com/cloudflare/workers-oauth-provider).
 
-The MCP server (powered by [Cloudflare Workers](https://developers.cloudflare.com/workers/)): 
+The MCP server (powered by [Cloudflare Workers](https://developers.cloudflare.com/workers/)):
 
-* Acts as OAuth _Server_ to your MCP clients
-* Acts as OAuth _Client_ to your _real_ OAuth server (in this case, Cloudflare)
+- Acts as OAuth _Server_ to your MCP clients
+- Acts as OAuth _Client_ to your _real_ OAuth server (in this case, Cloudflare)
 
 ## Getting Started
 
 ### For Production
+
 - Set secrets via Wrangler
+
 ```bash
 wrangler secret put CLOUDFLARE_CLIENT_ID
 wrangler secret put CLOUDFLARE_CLIENT_SECRET
 ```
+
 #### Set up a KV namespace
-- Create the KV namespace: 
-`wrangler kv:namespace create "OAUTH_KV"`
+
+- Create the KV namespace:
+  `wrangler kv:namespace create "OAUTH_KV"`
 - Update the Wrangler file with the KV ID
 
 #### Deploy & Test
-Deploy the MCP server to make it available on your workers.dev domain 
+
+Deploy the MCP server to make it available on your workers.dev domain
 ` wrangler deploy`
 
-Test the remote server using [Inspector](https://modelcontextprotocol.io/docs/tools/inspector): 
+Test the remote server using [Inspector](https://modelcontextprotocol.io/docs/tools/inspector):
 
 ```
 npx @modelcontextprotocol/inspector@latest
 ```
-Enter `https://mcp-cloudflare-staging.<your-subdomain>.workers.dev/sse` and hit connect. Once you go through the authentication flow, you'll see the Tools working: 
+
+Enter `https://mcp-cloudflare-staging.<your-subdomain>.workers.dev/sse` and hit connect. Once you go through the authentication flow, you'll see the Tools working:
 
 <img width="640" alt="image" src="https://github.com/user-attachments/assets/7973f392-0a9d-4712-b679-6dd23f824287" />
 
-You now have a remote MCP server deployed! 
+You now have a remote MCP server deployed!
 
 #### Access the remote MCP server from Claude Desktop
 
 Open Claude Desktop and navigate to Settings -> Developer -> Edit Config. This opens the configuration file that controls which MCP servers Claude can access.
 
-Replace the content with the following configuration. Once you restart Claude Desktop, a browser window will open showing your OAuth login page. Complete the authentication flow to grant Claude access to your MCP server. After you grant access, the tools will become available for you to use. 
+Replace the content with the following configuration. Once you restart Claude Desktop, a browser window will open showing your OAuth login page. Complete the authentication flow to grant Claude access to your MCP server. After you grant access, the tools will become available for you to use.
 
 ```
 {
@@ -62,21 +68,25 @@ Replace the content with the following configuration. Once you restart Claude De
 Once the Tools (under 🔨) show up in the interface, you can ask Claude to use them. For example: "Could you use the math tool to add 23 and 19?". Claude should invoke the tool and show the result generated by the MCP server.
 
 ### For Local Development
-If you'd like to iterate and test your MCP server, you can do so in local development. This will require you to create another OAuth App on GitHub: 
+
+If you'd like to iterate and test your MCP server, you can do so in local development. This will require you to create another OAuth App on GitHub:
+
 - For the Homepage URL, specify `http://localhost:8788`
 - For the Authorization callback URL, specify `http://localhost:8788/callback`
-- Note your Client ID and generate a Client secret. 
-- Create a `.dev.vars` file in your project root with: 
+- Note your Client ID and generate a Client secret.
+- Create a `.dev.vars` file in your project root with:
+
 ```
 CLOUDFLARE_CLIENT_ID=your_development_cloudflare_client_id
 CLOUDFLARE_CLIENT_SECRET=your_development_cloudflare_client_secret
 ```
 
 #### Develop & Test
+
 Run the server locally to make it available at `http://localhost:8788`
 `wrangler dev`
 
-To test the local server, enter `http://localhost:8788/sse` into Inspector and hit connect. Once you follow the prompts, you'll be able to "List Tools". 
+To test the local server, enter `http://localhost:8788/sse` into Inspector and hit connect. Once you follow the prompts, you'll be able to "List Tools".
 
 #### Using Claude and other MCP Clients
 
@@ -90,25 +100,30 @@ Note that while Cursor supports HTTP+SSE servers, it doesn't support authenticat
 
 You can connect your MCP server to other MCP clients like Windsurf by opening the client's configuration file, adding the same JSON that was used for the Claude setup, and restarting the MCP client.
 
-## How does it work? 
+## How does it work?
 
 #### OAuth Provider
+
 The OAuth Provider library serves as a complete OAuth 2.1 server implementation for Cloudflare Workers. It handles the complexities of the OAuth flow, including token issuance, validation, and management. In this project, it plays the dual role of:
 
 - Authenticating MCP clients that connect to your server
 - Managing the connection to GitHub's OAuth services
 - Securely storing tokens and authentication state in KV storage
 
 #### Durable MCP
+
 Durable MCP extends the base MCP functionality with Cloudflare's Durable Objects, providing:
+
 - Persistent state management for your MCP server
 - Secure storage of authentication context between requests
 - Access to authenticated user information via `this.props`
 - Support for conditional tool availability based on user identity
 
 #### MCP Remote
+
 The MCP Remote library enables your server to expose tools that can be invoked by MCP clients like the Inspector. It:
+
 - Defines the protocol for communication between clients and your server
 - Provides a structured way to define tools
 - Handles serialization and deserialization of requests and responses
-- Maintains the Server-Sent Events (SSE) connection between clients and your server
+- Maintains the Server-Sent Events (SSE) connection between clients and your server

apps/workers-observability/src/index.ts

@@ -1,56 +1,58 @@
-import OAuthProvider from "@cloudflare/workers-oauth-provider";
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { McpAgent } from "agents/mcp";
-import type { Env } from "../worker-configuration";
-import { registerAccountTools } from "./tools/account";
-import { registerLogsTools } from "./tools/logs";
-import { registerWorkersTools } from "./tools/workers";
+import OAuthProvider from '@cloudflare/workers-oauth-provider'
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { McpAgent } from 'agents/mcp'
+
 import {
-	type AccountSchema,
 	CloudflareAuthHandler,
-	type UserSchema,
 	handleTokenExchangeCallback,
-} from "@repo/mcp-common/src/cloudflare-oauth-handler";
+} from '@repo/mcp-common/src/cloudflare-oauth-handler'
+
+import { registerAccountTools } from './tools/account'
+import { registerLogsTools } from './tools/logs'
+import { registerWorkersTools } from './tools/workers'
+
+import type { AccountSchema, UserSchema } from '@repo/mcp-common/src/cloudflare-oauth-handler'
+import type { Env } from '../worker-configuration'
 
 // Context from the auth process, encrypted & stored in the auth token
 // and provided to the DurableMCP as this.props
 export type Props = {
-	accessToken: string;
-	user: UserSchema["result"];
-	accounts: AccountSchema["result"];
-};
+	accessToken: string
+	user: UserSchema['result']
+	accounts: AccountSchema['result']
+}
 
-export type State = { activeAccountId: string | null };
+export type State = { activeAccountId: string | null }
 
 export class MyMCP extends McpAgent<Env, State, Props> {
 	server = new McpServer({
-		name: "Remote MCP Server with Workers Observability",
-		version: "1.0.0",
-	});
+		name: 'Remote MCP Server with Workers Observability',
+		version: '1.0.0',
+	})
 	// TOOO: Why does this type need to be declared again on MyMCP?
 	// @ts-ignore
-	env!: Env;
+	env!: Env
 
 	initialState: State = {
 		activeAccountId: null,
-	};
+	}
 
 	async init() {
-		registerAccountTools(this);
+		registerAccountTools(this)
 
 		// Register Cloudflare Workers tools
-		registerWorkersTools(this);
+		registerWorkersTools(this)
 
 		// Register Cloudflare Workers logs tools
-		registerLogsTools(this);
+		registerLogsTools(this)
 	}
 
 	getActiveAccountId() {
 		// TODO: Figure out why this fail sometimes, and why we need to wrap this in a try catch
 		try {
-			return this.state.activeAccountId ?? null;
+			return this.state.activeAccountId ?? null
 		} catch (e) {
-			return null;
+			return null
 		}
 	}
 
@@ -60,23 +62,23 @@ export class MyMCP extends McpAgent<Env, State, Props> {
 			this.setState({
 				...this.state,
 				activeAccountId: accountId,
-			});
+			})
 		} catch (e) {
-			return null;
+			return null
 		}
 	}
 }
 
 export default new OAuthProvider({
-	apiRoute: "/workers/observability/sse",
+	apiRoute: '/workers/observability/sse',
 	// @ts-ignore
-	apiHandler: MyMCP.mount("/workers/observability/sse"),
+	apiHandler: MyMCP.mount('/workers/observability/sse'),
 	// @ts-ignore
 	defaultHandler: CloudflareAuthHandler,
-	authorizeEndpoint: "/oauth/authorize",
-	tokenEndpoint: "/token",
+	authorizeEndpoint: '/oauth/authorize',
+	tokenEndpoint: '/token',
 	tokenExchangeCallback: handleTokenExchangeCallback,
 	// Cloudflare access token TTL
 	accessTokenTTL: 3600,
-	clientRegistrationEndpoint: "/register",
-});
+	clientRegistrationEndpoint: '/register',
+})