feat: add new exercises for middle section without and with React Router, including worker setup, MCP integration, and various utility functions

Author: kentcdodds

exercises/01.start/01.problem/worker/client.ts renamed to exercises/01.start/01.problem/worker/db.ts

@@ -1,69 +1,17 @@
-import { type DBClient } from '@epic-web/epicme-db-client'
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import {
-	SetLevelRequestSchema,
-	type LoggingLevel,
-} from '@modelcontextprotocol/sdk/types.js'
-import { McpAgent } from 'agents/mcp'
-import { db } from './client.ts'
-import { initializePrompts } from './prompts.ts'
-import { initializeResources } from './resources.ts'
-import { initializeTools } from './tools.ts'
-
-type State = { loggingLevel: LoggingLevel }
-export class EpicMeMCP extends McpAgent<Env, State> {
-	db!: DBClient
-	initialState: State = { loggingLevel: 'info' }
-	server = new McpServer(
-		{
-			name: 'epicme',
-			title: 'EpicMe Journal',
-			version: '1.0.0',
-		},
-		{
-			capabilities: {
-				tools: { listChanged: true },
-				resources: { listChanged: true, subscribe: true },
-				completions: {},
-				logging: {},
-				prompts: { listChanged: true },
-			},
-			instructions: `
-EpicMe is a journaling app that allows users to write about and review their experiences, thoughts, and reflections.
-
-These tools are the user's window into their journal. With these tools and your help, they can create, read, and manage their journal entries and associated tags.
-
-You can also help users add tags to their entries and get all tags for an entry.
-			`.trim(),
-		},
-	)
-
-	async init() {
-		this.db = db
-		this.server.server.setRequestHandler(
-			SetLevelRequestSchema,
-			async (request) => {
-				this.setState({ ...this.state, loggingLevel: request.params.level })
-				return {}
-			},
-		)
-		await initializeTools(this)
-		await initializeResources(this)
-		await initializePrompts(this)
-	}
-}
+import { EpicMeMCP } from './mcp/index.ts'
 
 export default {
 	fetch: async (request, env, ctx) => {
 		const url = new URL(request.url)
 
 		if (url.pathname === '/mcp') {
-			const mcp = EpicMeMCP.serve('/mcp', {
+			return EpicMeMCP.serve('/mcp', {
 				binding: 'EPIC_ME_MCP_OBJECT',
-			})
-			return mcp.fetch(request, env, ctx)
+			}).fetch(request, env, ctx)
 		}
 
 		return new Response('Not found', { status: 404 })
 	},
 } satisfies ExportedHandler<Env>
+
+export { EpicMeMCP }

exercises/01.start/01.problem/worker/index.ts

@@ -0,0 +1,74 @@
+import { type DBClient } from '@epic-web/epicme-db-client'
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import {
+	SetLevelRequestSchema,
+	type LoggingLevel,
+} from '@modelcontextprotocol/sdk/types.js'
+import { McpAgent } from 'agents/mcp'
+import { db } from '../db.ts'
+import { initializePrompts } from './prompts.ts'
+import { initializeResources } from './resources.ts'
+import { initializeTools } from './tools.ts'
+
+type Props = { baseUrl: string }
+type State = { loggingLevel: LoggingLevel }
+
+export class EpicMeMCP extends McpAgent<Env, State, Props> {
+	db!: DBClient
+	initialState: State = { loggingLevel: 'info' }
+	server = new McpServer(
+		{
+			name: 'epicme',
+			title: 'EpicMe Journal',
+			version: '1.0.0',
+		},
+		{
+			capabilities: {
+				tools: { listChanged: true },
+				resources: { listChanged: true, subscribe: true },
+				completions: {},
+				logging: {},
+				prompts: { listChanged: true },
+			},
+			instructions: `
+EpicMe is a journaling app that allows users to write about and review their experiences, thoughts, and reflections.
+
+These tools are the user's window into their journal. With these tools and your help, they can create, read, and manage their journal entries and associated tags.
+
+You can also help users add tags to their entries and get all tags for an entry.
+			`.trim(),
+		},
+	)
+
+	async init() {
+		this.db = db
+		this.server.server.setRequestHandler(
+			SetLevelRequestSchema,
+			async (request) => {
+				this.setState({ ...this.state, loggingLevel: request.params.level })
+				return {}
+			},
+		)
+		await initializeTools(this)
+		await initializeResources(this)
+		await initializePrompts(this)
+	}
+}
+
+export default {
+	fetch: async (request, env, ctx) => {
+		const url = new URL(request.url)
+
+		if (url.pathname === '/mcp') {
+			// can add this as request headers once https://github.com/cloudflare/agents/pull/426
+			ctx.props.baseUrl = url.origin
+
+			const mcp = EpicMeMCP.serve('/mcp', {
+				binding: 'EPIC_ME_MCP_OBJECT',
+			})
+			return mcp.fetch(request, env, ctx)
+		}
+
+		return new Response('Not found', { status: 404 })
+	},
+} satisfies ExportedHandler<Env>

exercises/01.start/01.problem/worker/mcp/index.ts

@@ -0,0 +1 @@
+# Without React Router