# Directory Structure
```
├── .gitignore
├── components.json
├── docker-build-push.sh
├── Dockerfile
├── eslint.config.js
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public
│ └── vite.svg
├── README.md
├── server.ts
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── ui
│ │ │ ├── alert.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── dropdown-menu.tsx
│ │ │ ├── input.tsx
│ │ │ └── select.tsx
│ │ └── WebcamCapture.tsx
│ ├── index.css
│ ├── lib
│ │ └── utils.ts
│ ├── main.tsx
│ ├── utils
│ │ └── screenCapture.ts
│ └── vite-env.d.ts
├── tailwind.config.js
├── transport
│ ├── base-transport.ts
│ ├── stdio-transport.ts
│ ├── streamable-http-transport.ts
│ └── transport-factory.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.server.json
├── vite.config.ts
└── webcam-server-factory.ts
```
# Files
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
```markdown
# ⭐⭐ mcp-webcam 0.2.0 - the 50 Star Update ⭐⭐
In celebration of getting 52 GitHub stars, `mcp-webcam 0.2.0` is here! Now supports streamable-http!! No installation required! - try it now at [`https://webcam.fast-agent.ai/`](https://webcam.fast-agent.ai/). You can specify your own UserID by adding `?user=<YOUR_USER_ID>` after the URL. Note this shared instance is for fun, not security - see below for instructions how to run your own copy locally.
In streamable-http mode multiple clients can connect simultaneously, and you can choose which is used for Sampling.
If we get to 100 stars I'll add another feature 😊.
## Multi-user Mode
When run in Streaming mode, if you set an MCP_HOST environment variable the host name is used as a prefix in URL construction, and 5 character UserIDs are automatically generated when the User lands on the webpage.
## mcp-webcam
MCP Server that provides access to your WebCam. Provides `capture` and `screenshot` tools to take an image from the Webcam, or take a screenshot. The current image is also available as a Resource.
### MCP Sampling
`mcp-webcam` supports "sampling"! Press the "Sample" button to send a sampling request to the Client along with your entered message.
> [!TIP]
> Claude Desktop does not currently support Sampling. If you want a Client that can handle multi-modal sampling request, try https://github.com/evalstate/fast-agent/ or VSCode (more details below).
## Installation and Running
### NPX
Install a recent version of [NodeJS](https://nodejs.org/en/download) for your platform. The NPM package is `@llmindset/mcp-webcam`.
To start in **STDIO** mode: `npx @llmindset/mcp-webcam`. This starts the `mcp-webcam` UI on port 3333. Point your browser at `http://localhost:3333` to get started.
To change the port: `npx @llmindset/mcp-webcam 9999`. This starts `mcp-webcam` the UI on port 9999.
For **Streaming HTTP** mode: `npx @llmindset/mcp-webcam --streaming`. This will make the UI available at `http://localhost:3333` and the MCP Server available at `http://localhost:3333/mcp`.
### Docker
You can run `mcp-webcam` using Docker. By default, it starts in **streaming mode**:
```bash
docker run -p 3333:3333 ghcr.io/evalstate/mcp-webcam:latest
```
#### Environment Variables
- `MCP_TRANSPORT_MODE` - Set to `stdio` for STDIO mode, defaults to `streaming`
- `PORT` - The port to run on (default: `3333`)
- `BIND_HOST` - Network interface to bind the server to (default: `localhost`)
- `MCP_HOST` - Public-facing URL for user instructions and MCP client connections (default: `http://localhost:3333`)
#### Examples
```bash
# STDIO mode
docker run -p 3333:3333 -e MCP_TRANSPORT_MODE=stdio ghcr.io/evalstate/mcp-webcam:latest
# Custom port
docker run -p 8080:8080 -e PORT=8080 ghcr.io/evalstate/mcp-webcam:latest
# For cloud deployments with custom domain (e.g., Hugging Face Spaces)
docker run -p 3333:3333 -e MCP_HOST=https://evalstate-mcp-webcam.hf.space ghcr.io/evalstate/mcp-webcam:latest
# Complete cloud deployment example
docker run -p 3333:3333 -e MCP_HOST=https://your-domain.com ghcr.io/evalstate/mcp-webcam:latest
```
## Clients
If you want a Client that supports sampling try:
### fast-agent
Start the `mcp-webcam` in streaming mode, install [`uv`](https://docs.astral.sh/uv/) and connect with:
`uvx fast-agent-mcp go --url http://localhost:3333/mcp`
`fast-agent` currently uses Haiku as its default model, so set an `ANTHROPIC_API_KEY`. If you want to use a different model, you can add `--model` on the command line. More instructions for installation and configuration are available here: https://fast-agent.ai/models/.
To start the server in STDIO mode, add the following to your `fastagent.config.yaml`
```yaml
webcam_local:
command: "npx"
args: ["@llmindset/mcp-webcam"]
```
### VSCode
VSCode versions 1.101.0 and above support MCP Sampling. Simply start `mcp-webcam` in streaming mode, and add `http://localhost:3333/mcp` as an MCP Server to get started.
### Claude Desktop
Claude Desktop does **NOT** support Sampling. To run `mcp-webcam` from Claude Desktop, add the following to the `mcpServers` section of your `claude_desktop_config.json` file:
```json
"webcam": {
"command": "npx",
"args": [
"-y",
"@llmindset/mcp-webcam"
]
}
```
Start Claude Desktop, and connect to `http://localhost:3333`. You can then ask Claude to `get the latest picture from my webcam`, or `Claude, take a look at what I'm holding` or `what colour top am i wearing?`. You can "freeze" the current image and that will be returned to Claude rather than a live capture.
You can ask for Screenshots - navigate to the browser so that you can guide the capture area when the request comes in. Screenshots are automatically resized to be manageable for Claude (useful if you have a 4K Screen). The button is there to allow testing of your platform specific Screenshot UX - it doesn't do anything other than prepare you for a Claude intiated request. NB this does not **not** work on Safari as it requires human initiation.
## Other notes
That's it really.
This MCP Server was built to demonstrate exposing a User Interface on an MCP Server, and serving live resources back to Claude Desktop.
This project might prove useful if you want to build a local, interactive MCP Server.
Thanks to https://github.com/tadasant for help with testing and setup.
Please read the article at [https://llmindset.co.uk/posts/2025/01/resouce-handling-mcp](https://llmindset.co.uk/posts/2025/01/mcp-files-resources-part1/) for more details about handling files and resources in LLM / MCP Chat Applications, and why you might want to do this.
```
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
```typescript
/// <reference types="vite/client" />
```
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
```javascript
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
```
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
```typescript
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
```
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
```typescript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
```
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" },
{ "path": "./tsconfig.server.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
```
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
```typescript
import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
```
--------------------------------------------------------------------------------
/tsconfig.server.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"esModuleInterop": true,
"outDir": "dist",
"skipLibCheck": true,
"strict": true,
"isolatedModules": true
},
"include": ["server.ts"]
}
```
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
```typescript
import "./App.css";
import { WebcamCapture } from "./components/WebcamCapture";
function App() {
return (
<div className="min-h-screen bg-background">
<main className="py-2 sm:py-4">
<div className="container mx-auto px-2 sm:px-4">
<WebcamCapture />
</div>
</main>
</div>
);
}
export default App;
```
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mcp-webcam</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
```json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/index.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
```
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
```css
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
```
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "NodeNext",
"moduleResolution": "NodeNext",
"skipLibCheck": true,
"composite": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
/* Bundler mode */
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
```
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"esModuleInterop": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
}
```
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import { cn } from "@/lib/utils"
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }
```
--------------------------------------------------------------------------------
/docker-build-push.sh:
--------------------------------------------------------------------------------
```bash
#!/bin/bash
# Bash script for building and pushing Docker image
GITHUB_USERNAME="evalstate"
IMAGE_NAME="mcp-webcam"
VERSION=$(date +"%Y%m%d-%H%M%S")
echo "Building mcp-webcam Docker image..."
# Build the Docker image
docker build -t ghcr.io/${GITHUB_USERNAME}/${IMAGE_NAME}:latest .
docker tag ghcr.io/${GITHUB_USERNAME}/${IMAGE_NAME}:latest ghcr.io/${GITHUB_USERNAME}/${IMAGE_NAME}:${VERSION}
echo "Pushing to GitHub Container Registry..."
# Push the image to GitHub Container Registry
docker push ghcr.io/${GITHUB_USERNAME}/${IMAGE_NAME}:latest
docker push ghcr.io/${GITHUB_USERNAME}/${IMAGE_NAME}:${VERSION}
echo "Build and push completed successfully"
echo "Image: ghcr.io/${GITHUB_USERNAME}/${IMAGE_NAME}:${VERSION}"
echo ""
echo "To run the container:"
echo "docker run -p 3333:3333 ghcr.io/${GITHUB_USERNAME}/${IMAGE_NAME}:latest"
```
--------------------------------------------------------------------------------
/transport/transport-factory.ts:
--------------------------------------------------------------------------------
```typescript
import { BaseTransport } from './base-transport.js';
import { StdioTransport } from './stdio-transport.js';
import { StreamableHttpTransport } from './streamable-http-transport.js';
import type { ServerFactory } from './base-transport.js';
import type { Express } from 'express';
export type TransportType = 'stdio' | 'streamable-http';
/**
* Factory for creating transport instances
*/
export class TransportFactory {
static create(
type: TransportType,
serverFactory: ServerFactory,
app?: Express
): BaseTransport {
switch (type) {
case 'stdio':
return new StdioTransport(serverFactory);
case 'streamable-http':
if (!app) {
throw new Error('Express app is required for StreamableHTTP transport');
}
return new StreamableHttpTransport(serverFactory, app);
default:
throw new Error(`Unknown transport type: ${type}`);
}
}
}
```
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
```javascript
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommendedTypeChecked],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
settings: { react: { version: '18.3' } },
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
react,
},
rules: {
...reactHooks.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
```
--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-input bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }
```
--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}
export { Badge, badgeVariants }
```
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
```dockerfile
FROM node:22-alpine
# Enable pnpm
RUN corepack enable pnpm
WORKDIR /app
# Copy package files
COPY package.json package-lock.json* pnpm-lock.yaml* ./
# Install dependencies
RUN npm ci --only=production
# Copy source code
COPY . .
# Clean any existing build artifacts
RUN rm -rf ./dist && \
echo "=== Cleaned build artifacts ==="
# Build the application
RUN echo "=== Starting build process ===" && \
npm run build && \
echo "=== Build completed ==="
# Debug: Verify build output
RUN echo "=== Verifying build output ===" && \
ls -la dist/ && \
echo "=== server.js permissions ===" && \
ls -la dist/server.js && \
echo "=== Testing executable ===" && \
node dist/server.js --help
# Set environment variables
ENV NODE_ENV=production
ENV PORT=3333
ENV MCP_TRANSPORT_MODE=streaming
ENV BIND_HOST=0.0.0.0
# Expose port
EXPOSE 3333
# Use a shell script to handle conditional startup
RUN echo '#!/bin/sh' > /app/start.sh && \
echo 'if [ "$MCP_TRANSPORT_MODE" = "stdio" ]; then' >> /app/start.sh && \
echo ' exec node dist/server.js --port $PORT' >> /app/start.sh && \
echo 'else' >> /app/start.sh && \
echo ' exec node dist/server.js --streaming --port $PORT' >> /app/start.sh && \
echo 'fi' >> /app/start.sh && \
chmod +x /app/start.sh
# Use the start script
CMD ["/app/start.sh"]
```
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
```
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
```javascript
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ["class"],
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
theme: {
extend: {
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
}
}
},
plugins: [require("tailwindcss-animate")],
}
```
--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
}
)
const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
Alert.displayName = "Alert"
const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
))
AlertTitle.displayName = "AlertTitle"
const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
))
AlertDescription.displayName = "AlertDescription"
export { Alert, AlertTitle, AlertDescription }
```
--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-xl border bg-card text-card-foreground shadow",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
```
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
```
--------------------------------------------------------------------------------
/src/utils/screenCapture.ts:
--------------------------------------------------------------------------------
```typescript
export async function captureScreen(): Promise<string> {
let stream: MediaStream | undefined;
try {
stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false,
});
const canvas = document.createElement("canvas");
const video = document.createElement("video");
await new Promise((resolve) => {
video.onloadedmetadata = () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
video.play();
resolve(null);
};
if (stream) {
video.srcObject = stream;
} else {
throw Error("No stream available");
}
});
const context = canvas.getContext("2d");
context?.drawImage(video, 0, 0, canvas.width, canvas.height);
// Check if resizing is needed
const MAX_DIMENSION = 1568;
if (canvas.width > MAX_DIMENSION || canvas.height > MAX_DIMENSION) {
const scaleFactor = MAX_DIMENSION / Math.max(canvas.width, canvas.height);
const newWidth = Math.round(canvas.width * scaleFactor);
const newHeight = Math.round(canvas.height * scaleFactor);
const resizeCanvas = document.createElement("canvas");
resizeCanvas.width = newWidth;
resizeCanvas.height = newHeight;
const resizeContext = resizeCanvas.getContext("2d");
resizeContext?.drawImage(canvas, 0, 0, newWidth, newHeight);
return resizeCanvas.toDataURL("image/png");
}
return canvas.toDataURL("image/png");
} catch (error) {
console.error("Error capturing screenshot:", error);
throw error;
} finally {
if (stream) {
stream.getTracks().forEach((track) => track.stop());
}
}
}
```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "@llmindset/mcp-webcam",
"version": "0.2.2",
"type": "module",
"publishConfig": {
"access": "public"
},
"bin": {
"mcp-webcam": "dist/server.js"
},
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git",
"url": "git+https://github.com/evalstate/mcp-webcam.git"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/evalstate/mcp-webcam/issues"
},
"homepage": "https://github.com/evalstate/mcp-webcam#readme",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build && tsc -p tsconfig.server.json",
"start": "node dist/server.js",
"start:streaming": "node dist/server.js --streaming",
"lint": "eslint .",
"preview": "vite preview",
"prepublishOnly": "npm run build",
"postbuild": "node -e \"process.platform !== 'win32' && require('child_process').execSync('chmod +x dist/server.js')\""
},
"dependencies": {
"@modelcontextprotocol/sdk": "^1.13.2",
"@radix-ui/react-checkbox": "^1.3.2",
"@radix-ui/react-dropdown-menu": "^2.1.15",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-slot": "^1.1.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"express": "^4.21.2",
"lucide-react": "^0.473.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-webcam": "^7.2.0",
"sonner": "^1.7.2",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
"zod-to-json-schema": "^3.24.1"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/express": "^5.0.3",
"@types/node": "^22.15.31",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.18.0",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5"
},
"packageManager": "[email protected]+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
}
```
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: flex-start;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
/* Fix checkbox styling to prevent button styles from affecting it */
button[role="checkbox"] {
padding: 0;
background-color: transparent;
border-radius: 0.125rem;
}
```
--------------------------------------------------------------------------------
/transport/stdio-transport.ts:
--------------------------------------------------------------------------------
```typescript
import { StatefulTransport, type TransportOptions, type BaseSession } from './base-transport.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { Logger } from '../utils/logger.js';
type StdioSession = BaseSession<StdioServerTransport>;
/**
* Implementation of STDIO transport
*/
export class StdioTransport extends StatefulTransport<StdioSession> {
private readonly SESSION_ID = 'STDIO';
async initialize(_options: TransportOptions): Promise<void> {
const transport = new StdioServerTransport();
// Create server instance using factory
const server = await this.serverFactory();
// Create session with metadata tracking
const session: StdioSession = {
transport,
server,
metadata: {
id: this.SESSION_ID,
connectedAt: new Date(),
lastActivity: new Date(),
capabilities: {},
},
};
// Store session in map
this.sessions.set(this.SESSION_ID, session);
try {
// Set up request/response interceptors for activity tracking
const originalSendMessage = transport.send.bind(transport);
transport.send = (message) => {
this.updateSessionActivity(this.SESSION_ID);
return originalSendMessage(message);
};
// Set up oninitialized callback to capture client info using base class helper
server.server.oninitialized = this.createClientInfoCapture(this.SESSION_ID);
// Set up error tracking
server.server.onerror = (error) => {
Logger.error('STDIO server error:', error);
};
// Handle transport closure
transport.onclose = () => {
Logger.info('STDIO transport closed');
void this.handleShutdown('transport closed');
};
await server.connect(transport);
Logger.info('STDIO transport initialized');
} catch (error) {
Logger.error('Error connecting STDIO transport:', error);
// Clean up on error
this.sessions.delete(this.SESSION_ID);
throw error;
}
}
/**
* STDIO doesn't need stale session removal since there's only one persistent session
*/
protected removeStaleSession(sessionId: string): Promise<void> {
// STDIO has only one session and it's not subject to staleness
Logger.debug(`STDIO session staleness check for ${sessionId} (no-op)`);
return Promise.resolve();
}
async cleanup(): Promise<void> {
const session = this.sessions.get(this.SESSION_ID);
if (session) {
try {
await session.transport.close();
} catch (error) {
Logger.error('Error closing STDIO transport:', error);
}
try {
await session.server.close();
} catch (error) {
Logger.error('Error closing STDIO server:', error);
}
}
this.sessions.clear();
Logger.info('STDIO transport cleaned up');
}
/**
* Get the STDIO session if it exists
*/
getSession(): StdioSession | undefined {
return this.sessions.get(this.SESSION_ID);
}
/**
* Handle shutdown for STDIO
*/
private async handleShutdown(reason: string): Promise<void> {
Logger.info(`Initiating shutdown (reason: ${reason}`);
try {
await this.cleanup();
process.exit(0);
} catch (error) {
Logger.error('Error during shutdown:', error);
process.exit(1);
}
}
/**
* Set up stdin/stdout event handlers
*/
setupStdioHandlers(): void {
// Handle stdin/stdout events
process.stdin.on('end', () => this.handleShutdown('stdin ended'));
process.stdin.on('close', () => this.handleShutdown('stdin closed'));
process.stdout.on('error', () => this.handleShutdown('stdout error'));
process.stdout.on('close', () => this.handleShutdown('stdout closed'));
}
}
```
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
```
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"
import { cn } from "@/lib/utils"
const Select = SelectPrimitive.Root
const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}
```
--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
```typescript
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "@/lib/utils"
const DropdownMenu = DropdownMenuPrimitive.Root
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
const DropdownMenuGroup = DropdownMenuPrimitive.Group
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
className
)}
{...props}
/>
))
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
{...props}
/>
)
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}
```
--------------------------------------------------------------------------------
/webcam-server-factory.ts:
--------------------------------------------------------------------------------
```typescript
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import {
ListResourcesRequestSchema,
ReadResourceRequestSchema,
InitializeRequestSchema,
} from "@modelcontextprotocol/sdk/types.js";
import type { ServerFactory } from "./transport/base-transport.js";
import { Logger } from "./utils/logger.js";
// Store clients with their resolve functions, grouped by user
export let clients = new Map<string, Map<string, any>>(); // user -> clientId -> response
export let captureCallbacks = new Map<
string,
Map<string, (response: string | { error: string }) => void>
>(); // user -> clientId -> callback
interface ParsedDataUrl {
mimeType: string;
base64Data: string;
}
function parseDataUrl(dataUrl: string): ParsedDataUrl {
const matches = dataUrl.match(/^data:([^;]+);base64,(.+)$/);
if (!matches) {
throw new Error("Invalid data URL format");
}
return {
mimeType: matches[1],
base64Data: matches[2],
};
}
function getPort(): number {
// Check command line argument first (from process.argv)
const args = process.argv.slice(2);
const portArgIndex = args.findIndex(arg => arg === '-p' || arg === '--port');
if (portArgIndex !== -1 && portArgIndex + 1 < args.length) {
const portValue = parseInt(args[portArgIndex + 1]);
if (!isNaN(portValue)) {
return portValue;
}
}
// Check positional argument for backward compatibility
const lastArg = args[args.length - 1];
if (lastArg && !lastArg.startsWith('-') && !isNaN(Number(lastArg))) {
return Number(lastArg);
}
// Check environment variable
if (process.env.PORT) {
return parseInt(process.env.PORT);
}
return 3333;
}
function getMcpHost(): string {
return process.env.MCP_HOST || `http://localhost:${getPort()}`;
}
// Helper functions for user-scoped client management
export function getUserClients(user: string): Map<string, any> {
if (!clients.has(user)) {
clients.set(user, new Map());
}
return clients.get(user)!;
}
export function getUserCallbacks(user: string): Map<string, (response: string | { error: string }) => void> {
if (!captureCallbacks.has(user)) {
captureCallbacks.set(user, new Map());
}
return captureCallbacks.get(user)!;
}
/**
* Factory function to create and configure an MCP server instance with webcam capabilities
*/
export const createWebcamServer: ServerFactory = async (user: string = 'default') => {
const mcpServer = new McpServer(
{
name: "mcp-webcam",
version: "0.1.0",
},
{
capabilities: {
tools: {},
resources: {},
sampling: {}, // Enable sampling capability
},
}
);
// Set up resource handlers
mcpServer.server.setRequestHandler(ListResourcesRequestSchema, async () => {
const userClients = getUserClients(user);
if (userClients.size === 0) return { resources: [] };
return {
resources: [
{
uri: "webcam://current",
name: "Current view from the Webcam",
mimeType: "image/jpeg", // probably :)
},
],
};
});
mcpServer.server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
// Check if we have any connected clients for this user
const userClients = getUserClients(user);
if (userClients.size === 0) {
throw new Error(
`No clients connected for user '${user}'. Please visit ${getMcpHost()}${user !== 'default' ? `?user=${user}` : ''} and enable your Webcam.`
);
}
// Validate URI
if (request.params.uri !== "webcam://current") {
throw new Error(
"Invalid resource URI. Only webcam://current is supported."
);
}
const clientId = Array.from(userClients.keys())[0];
const userCallbacks = getUserCallbacks(user);
// Capture image
const result = await new Promise<string | { error: string }>((resolve) => {
userCallbacks.set(clientId, resolve);
userClients
.get(clientId)
?.write(`data: ${JSON.stringify({ type: "capture" })}\n\n`);
});
// Handle error case
if (typeof result === "object" && "error" in result) {
throw new Error(`Failed to capture image: ${result.error}`);
}
// Parse the data URL
const { mimeType, base64Data } = parseDataUrl(result);
// Return in the blob format
return {
contents: [
{
uri: request.params.uri,
mimeType,
blob: base64Data,
},
],
};
});
// Define tools using the modern McpServer tool method
mcpServer.tool(
"capture",
"Gets the latest picture from the webcam. You can use this " +
" if the human asks questions about their immediate environment, " +
"if you want to see the human or to examine an object they may be " +
"referring to or showing you.",
{},
{
openWorldHint: true,
readOnlyHint: true,
title: "Take a Picture from the webcam",
},
async () => {
const userClients = getUserClients(user);
if (userClients.size === 0) {
return {
isError: true,
content: [
{
type: "text",
text: `Have you opened your web browser?. Direct the human to go to ${getMcpHost()}${user !== 'default' ? `?user=${user}` : ''}, switch on their webcam and try again.`,
},
],
};
}
const clientId = Array.from(userClients.keys())[0];
if (!clientId) {
throw new Error("No clients connected");
}
const userCallbacks = getUserCallbacks(user);
// Modified promise to handle both success and error cases
const result = await new Promise<string | { error: string }>(
(resolve) => {
Logger.info(`Capturing for ${clientId} (user: ${user}`);
userCallbacks.set(clientId, resolve);
userClients
.get(clientId)
?.write(`data: ${JSON.stringify({ type: "capture" })}\n\n`);
}
);
// Handle error case
if (typeof result === "object" && "error" in result) {
return {
isError: true,
content: [
{
type: "text",
text: `Failed to capture: ${result.error}`,
},
],
};
}
const { mimeType, base64Data } = parseDataUrl(result);
return {
content: [
{
type: "text",
text: "Here is the latest image from the Webcam",
},
{
type: "image",
data: base64Data,
mimeType: mimeType,
},
],
};
}
);
mcpServer.tool(
"screenshot",
"Gets a screenshot of the current screen or window",
{},
{
openWorldHint: true,
readOnlyHint: true,
title: "Take a Screenshot",
},
async () => {
const userClients = getUserClients(user);
if (userClients.size === 0) {
return {
isError: true,
content: [
{
type: "text",
text: `Have you opened your web browser?. Direct the human to go to ${getMcpHost()}?user=${user}, switch on their webcam and try again.`,
},
],
};
}
const clientId = Array.from(userClients.keys())[0];
if (!clientId) {
throw new Error("No clients connected");
}
const userCallbacks = getUserCallbacks(user);
// Modified promise to handle both success and error cases
const result = await new Promise<string | { error: string }>(
(resolve) => {
Logger.info(`Taking screenshot for ${clientId} (user: ${user}`);
userCallbacks.set(clientId, resolve);
userClients
.get(clientId)
?.write(`data: ${JSON.stringify({ type: "screenshot" })}\n\n`);
}
);
// Handle error case
if (typeof result === "object" && "error" in result) {
return {
isError: true,
content: [
{
type: "text",
text: `Failed to capture screenshot: ${result.error}`,
},
],
};
}
const { mimeType, base64Data } = parseDataUrl(result);
return {
content: [
{
type: "text",
text: "Here is the requested screenshot",
},
{
type: "image",
data: base64Data,
mimeType: mimeType,
},
],
};
}
);
return mcpServer;
};
```
--------------------------------------------------------------------------------
/transport/streamable-http-transport.ts:
--------------------------------------------------------------------------------
```typescript
import { StatefulTransport, type TransportOptions, type BaseSession } from './base-transport.js';
import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
import { randomUUID } from 'node:crypto';
import type { Request, Response } from 'express';
import { isInitializeRequest } from '@modelcontextprotocol/sdk/types.js';
import { Logger } from '../utils/logger.js';
interface StreamableHttpConnection extends BaseSession<StreamableHTTPServerTransport> {
activeResponse?: Response;
}
type Session = StreamableHttpConnection;
export class StreamableHttpTransport extends StatefulTransport<Session> {
initialize(_options: TransportOptions): Promise<void> {
this.setupRoutes();
this.startStaleConnectionCheck();
this.startPingKeepAlive();
Logger.info('StreamableHTTP transport initialized', {
heartbeatInterval: this.HEARTBEAT_INTERVAL,
staleCheckInterval: this.STALE_CHECK_INTERVAL,
staleTimeout: this.STALE_TIMEOUT,
pingEnabled: this.PING_ENABLED,
pingInterval: this.PING_INTERVAL,
});
return Promise.resolve();
}
private setupRoutes(): void {
if (!this.app) {
throw new Error('Express app is required for StreamableHTTP transport');
}
// Initialize new session or handle existing session request
this.app.post('/mcp', (req, res) => {
void (async () => {
await this.handleRequest(req, res, 'POST');
})();
});
// SSE stream endpoint
this.app.get('/mcp', (req, res) => {
void (async () => {
await this.handleRequest(req, res, 'GET');
})();
});
// Session termination
this.app.delete('/mcp', (req, res) => {
void (async () => {
await this.handleRequest(req, res, 'DELETE');
})();
});
}
private async handleRequest(req: Request, res: Response, method: string): Promise<void> {
try {
const sessionId = req.headers['mcp-session-id'] as string;
// Update activity timestamp for existing sessions
if (sessionId && this.sessions.has(sessionId)) {
this.updateSessionActivity(sessionId);
}
switch (method) {
case 'POST':
await this.handlePostRequest(req, res, sessionId);
break;
case 'GET':
await this.handleGetRequest(req, res, sessionId);
break;
case 'DELETE':
await this.handleDeleteRequest(req, res, sessionId);
break;
}
} catch (error) {
Logger.error(`Request handling error for ${method}:`, error);
if (!res.headersSent) {
res.status(500).json({
jsonrpc: "2.0",
error: {
code: -32603,
message: "Internal server error",
},
id: req?.body?.id,
});
}
}
}
private async handlePostRequest(req: Request, res: Response, sessionId?: string): Promise<void> {
try {
// Extract user parameter
const user = (req.query.user as string) || 'default';
// Reject new connections during shutdown
if (!sessionId && this.isShuttingDown) {
res.status(503).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: "Server is shutting down",
},
id: req?.body?.id,
});
return;
}
let transport: StreamableHTTPServerTransport;
if (sessionId && this.sessions.has(sessionId)) {
const existingSession = this.sessions.get(sessionId);
if (!existingSession) {
res.status(404).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: `Session not found: ${sessionId}`,
},
id: req?.body?.id,
});
return;
}
transport = existingSession.transport;
} else if (!sessionId && isInitializeRequest(req.body)) {
// Create new session only for initialization requests
transport = await this.createSession(user);
} else if (!sessionId) {
// No session ID and not an initialization request
res.status(400).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: 'Missing session ID for non-initialization request',
},
id: req?.body?.id,
});
return;
} else {
// Invalid session ID
res.status(404).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: `Session not found: ${sessionId}`,
},
id: req?.body?.id,
});
return;
}
await transport.handleRequest(req, res, req.body);
} catch (error) {
throw error; // Re-throw to be handled by outer error handler
}
}
private async handleGetRequest(req: Request, res: Response, sessionId?: string): Promise<void> {
if (!sessionId || !this.sessions.has(sessionId)) {
res.status(400).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: `Session not found: ${sessionId || 'missing'}`,
},
id: null,
});
return;
}
const session = this.sessions.get(sessionId);
if (!session) {
res.status(404).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: `Session not found: ${sessionId}`,
},
id: null,
});
return;
}
const lastEventId = req.headers['last-event-id'];
if (lastEventId) {
Logger.debug(`Client attempting to resume with Last-Event-ID for session ${sessionId}: ${lastEventId}`);
}
// Store the active response for heartbeat monitoring
session.activeResponse = res;
// Set up heartbeat to detect stale SSE connections
this.startHeartbeat(sessionId, res);
// Set up connection event handlers
this.setupSseEventHandlers(sessionId, res);
await session.transport.handleRequest(req, res);
}
private async handleDeleteRequest(req: Request, res: Response, sessionId?: string): Promise<void> {
if (!sessionId || !this.sessions.has(sessionId)) {
res.status(404).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: `Session not found: ${sessionId || 'missing'}`,
},
id: req?.body?.id,
});
return;
}
Logger.info(`Session termination requested for ${sessionId}`);
const session = this.sessions.get(sessionId);
if (!session) {
res.status(404).json({
jsonrpc: "2.0",
error: {
code: -32000,
message: `Session not found: ${sessionId}`,
},
id: req?.body?.id,
});
return;
}
await session.transport.handleRequest(req, res, req.body);
await this.removeSession(sessionId);
}
private async createSession(user: string = 'default'): Promise<StreamableHTTPServerTransport> {
// Create server instance using factory
const server = await this.serverFactory(user);
const transport = new StreamableHTTPServerTransport({
sessionIdGenerator: () => randomUUID(),
onsessioninitialized: (sessionId: string) => {
Logger.info(`Session initialized with ID: ${sessionId}`);
// Create session object and store it immediately
const session: Session = {
transport,
server,
metadata: {
id: sessionId,
connectedAt: new Date(),
lastActivity: new Date(),
user: user,
capabilities: {},
},
};
this.sessions.set(sessionId, session);
},
});
// Set up cleanup on transport close
transport.onclose = () => {
const sessionId = transport.sessionId;
if (sessionId && this.sessions.has(sessionId)) {
Logger.info(`Transport closed for session ${sessionId}, cleaning up`);
void this.removeSession(sessionId);
}
};
// Set up error tracking for server errors
server.server.onerror = (error) => {
Logger.error(`StreamableHTTP server error for session ${transport.sessionId}:`, error);
};
// Set up client info capture when initialized
server.server.oninitialized = () => {
const sessionId = transport.sessionId;
if (sessionId) {
this.createClientInfoCapture(sessionId)();
}
};
// Connect to session-specific server
await server.connect(transport);
return transport;
}
private async removeSession(sessionId: string): Promise<void> {
// Check if session exists to prevent duplicate cleanup
if (!this.sessions.has(sessionId)) {
return;
}
await this.cleanupSession(sessionId);
}
/**
* Remove a stale session - implementation for StatefulTransport
*/
protected async removeStaleSession(sessionId: string): Promise<void> {
Logger.warn(`Removing stale session ${sessionId}`);
await this.cleanupSession(sessionId);
}
async cleanup(): Promise<void> {
// Stop stale checker using base class helper
this.stopStaleConnectionCheck();
// Use base class cleanup method
await this.cleanupAllSessions();
Logger.info('StreamableHTTP transport cleanup complete');
}
}
```
--------------------------------------------------------------------------------
/server.ts:
--------------------------------------------------------------------------------
```typescript
#!/usr/bin/env node
import express from "express";
import path from "path";
import { fileURLToPath } from "url";
import { parseArgs } from "node:util";
import { TransportFactory, type TransportType } from "./transport/transport-factory.js";
import { StdioTransport } from "./transport/stdio-transport.js";
import { StreamableHttpTransport } from "./transport/streamable-http-transport.js";
import { createWebcamServer, clients, captureCallbacks, getUserClients, getUserCallbacks } from "./webcam-server-factory.js";
import type { BaseTransport } from "./transport/base-transport.js";
import type { CreateMessageResult } from "@modelcontextprotocol/sdk/types.js";
import { Logger } from "./utils/logger.js";
// Parse command line arguments
const { values, positionals } = parseArgs({
options: {
streaming: { type: "boolean", short: "s" },
port: { type: "string", short: "p" },
help: { type: "boolean", short: "h" },
},
args: process.argv.slice(2),
allowPositionals: true,
});
// Show help if requested
if (values.help) {
console.log(`
Usage: mcp-webcam [options] [port]
Options:
-s, --streaming Enable streaming HTTP mode (default: stdio mode)
-p, --port <port> Server port (default: 3333)
-h, --help Show this help message
Examples:
# Standard stdio mode (for Claude Desktop)
mcp-webcam
# Streaming HTTP mode on default port 3333
mcp-webcam --streaming
# Streaming with custom port
mcp-webcam --streaming --port 8080
# Legacy: port as positional argument (still supported)
mcp-webcam 8080
`);
process.exit(0);
}
const isStreamingMode = values.streaming || false;
/** EXPRESS SERVER SETUP */
let transport: BaseTransport;
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
// Add JSON parsing middleware for MCP requests with large payload support
app.use(express.json({ limit: "50mb" }));
function getPort(): number {
// Check command line argument first
if (values.port && !isNaN(Number(values.port))) {
return Number(values.port);
}
// Check positional argument for backward compatibility
if (positionals.length > 0 && !isNaN(Number(positionals[0]))) {
return Number(positionals[0]);
}
return 3333;
}
const PORT = process.env.PORT ? parseInt(process.env.PORT) : getPort();
const BIND_HOST = process.env.BIND_HOST || 'localhost';
const MCP_HOST = process.env.MCP_HOST || `http://localhost:${PORT}`;
// Important: Serve the dist directory directly
app.use(express.static(__dirname));
// Simple health check
app.get("/api/health", (_, res) => {
res.json({ status: "ok" });
});
// Configuration endpoint
app.get("/api/config", (_, res) => {
res.json({
mcpHostConfigured: !!process.env.MCP_HOST,
mcpHost: MCP_HOST
});
});
// Get active sessions
app.get("/api/sessions", (req, res) => {
const user = (req.query.user as string) || 'default';
const showAll = req.query.all === 'true';
if (!transport) {
res.json({ sessions: [] });
return;
}
const sessions = transport.getSessions()
.filter((session) => showAll || (session.user || 'default') === user)
.map((session) => {
const now = Date.now();
const lastActivityMs = session.lastActivity.getTime();
const timeSinceActivity = now - lastActivityMs;
// Consider stale after 50 seconds, but with 5 second grace period for ping responses
// This prevents the red->green flicker when stale checker is about to run
const isStale = timeSinceActivity > 50000;
// If we're in the "about to be pinged" window (45-50 seconds),
// preemptively mark as stale to avoid flicker
const isPotentiallyStale = timeSinceActivity > 45000;
return {
id: session.id,
connectedAt: session.connectedAt.toISOString(),
capabilities: session.capabilities,
clientInfo: session.clientInfo,
isStale: isStale || isPotentiallyStale,
lastActivity: session.lastActivity.toISOString(),
};
});
res.json({ sessions });
});
// Note: captureCallbacks is now imported from webcam-server-factory.ts
app.get("/api/events", (req, res) => {
const user = (req.query.user as string) || 'default';
Logger.info(`New SSE connection request for user: ${user}`);
// SSE setup
res.setHeader("Content-Type", "text/event-stream");
res.setHeader("Cache-Control", "no-cache");
res.setHeader("Connection", "keep-alive");
// Generate a unique client ID
const clientId = Math.random().toString(36).substring(7);
// Add this client to the user's connected clients
const userClients = getUserClients(user);
userClients.set(clientId, res);
Logger.debug(`Client connected: ${clientId} (user: ${user}`);
// Send initial connection message
const connectMessage = JSON.stringify({ type: "connected", clientId });
res.write(`data: ${connectMessage}\n\n`);
// Remove client when they disconnect
req.on("close", () => {
userClients.delete(clientId);
Logger.debug(`Client disconnected: ${clientId} (user: ${user}`);
});
});
app.post("/api/capture-result", (req, res) => {
const user = (req.query.user as string) || 'default';
const { clientId, image } = req.body;
const userCallbacks = getUserCallbacks(user);
const callback = userCallbacks.get(clientId);
if (callback) {
callback(image);
userCallbacks.delete(clientId);
}
res.json({ success: true });
});
// Add this near other endpoint definitions
app.post("/api/capture-error", (req, res) => {
const user = (req.query.user as string) || 'default';
const { clientId, error } = req.body;
const userCallbacks = getUserCallbacks(user);
const callback = userCallbacks.get(clientId);
if (callback) {
callback({ error: error.message || "Unknown error occurred" });
userCallbacks.delete(clientId);
}
res.json({ success: true });
});
// Process sampling request from the web UI
async function processSamplingRequest(
imageDataUrl: string,
prompt: string = "What is the user holding?",
sessionId?: string
): Promise<any> {
const { mimeType, base64Data } = parseDataUrl(imageDataUrl);
try {
let server: any;
// Get the appropriate server instance based on transport mode
if (isStreamingMode && sessionId) {
// In streaming mode, need to find the server for the specific session
const streamingTransport = transport as StreamableHttpTransport;
const sessions = streamingTransport.getSessions();
const targetSession = sessions.find(s => s.id === sessionId);
if (!targetSession) {
throw new Error("No active MCP session found for sampling");
}
// For now, use the main server - in production you'd access the session-specific server
server = (transport as any).sessions?.get(sessionId)?.server?.server;
if (!server) {
throw new Error("No server instance found for session");
}
} else if (!isStreamingMode) {
// In stdio mode, use the main server
const stdioTransport = transport as StdioTransport;
const session = stdioTransport.getSession();
if (!session) {
throw new Error("No STDIO session found");
}
server = session.server.server;
} else {
throw new Error("Invalid sampling request configuration");
}
// Check if server has sampling capability
if (!server.createMessage) {
throw new Error(
"Server does not support sampling - no MCP client with sampling capabilities connected"
);
}
// Create a sampling request to the client using the SDK's types
const result: CreateMessageResult = await server.createMessage({
messages: [
{
role: "user",
content: {
type: "text",
text: prompt,
},
},
{
role: "user",
content: {
type: "image",
data: base64Data,
mimeType: mimeType,
},
},
],
maxTokens: 1000, // Reasonable limit for the response
});
Logger.debug("Sampling response received:", JSON.stringify(result, null, 2));
return result;
} catch (error) {
Logger.error("Error during sampling:", error);
throw error;
}
}
// Handle SSE 'sample' event from WebcamCapture component
app.post(
"/api/process-sample",
async (req, res) => {
const user = (req.query.user as string) || 'default';
const { image, prompt, sessionId } = req.body;
if (!image) {
res.status(400).json({ error: "Missing image data" });
return;
}
try {
// In streaming mode, use provided sessionId or fall back to first available for this user
let selectedSessionId: string | undefined = sessionId;
if (isStreamingMode && transport) {
const sessions = transport.getSessions().filter(s => (s.user || 'default') === user);
if (!selectedSessionId || !sessions.find(s => s.id === selectedSessionId)) {
// Fall back to the most recently connected session for this user
const sortedSessions = sessions.sort(
(a, b) => b.connectedAt.getTime() - a.connectedAt.getTime()
);
selectedSessionId = sortedSessions[0]?.id;
}
Logger.info(`Using session ${selectedSessionId} for sampling (user: ${user}`);
}
const result = await processSamplingRequest(
image,
prompt,
selectedSessionId
);
res.json({ success: true, result });
} catch (error) {
Logger.error("Sampling processing error:", error);
res.status(500).json({
error: error instanceof Error ? error.message : String(error),
errorDetail: error instanceof Error ? error.stack : undefined,
});
}
}
);
interface ParsedDataUrl {
mimeType: string;
base64Data: string;
}
function parseDataUrl(dataUrl: string): ParsedDataUrl {
const matches = dataUrl.match(/^data:([^;]+);base64,(.+)$/);
if (!matches) {
throw new Error("Invalid data URL format");
}
return {
mimeType: matches[1],
base64Data: matches[2],
};
}
async function main() {
if (isStreamingMode) {
Logger.info("Starting in streaming HTTP mode");
// Create streaming transport
transport = TransportFactory.create('streamable-http', createWebcamServer, app);
// Initialize transport
await transport.initialize({ port: Number(PORT) });
// IMPORTANT: Define the wildcard route AFTER all other routes
// This catches any other route and sends the index.html file
app.get("*", (_, res) => {
// Important: Send the built index.html
res.sendFile(path.join(__dirname, "index.html"));
});
// Now start the Express server
app.listen(PORT, BIND_HOST, () => {
Logger.info(`Server running at ${MCP_HOST}`);
Logger.info(`MCP endpoint: POST/GET/DELETE ${MCP_HOST}/mcp`);
});
// Handle graceful shutdown
process.on("SIGINT", async () => {
Logger.info("Shutting down server...");
if (transport) {
transport.shutdown?.();
await transport.cleanup();
}
process.exit(0);
});
} else {
// Standard stdio mode
Logger.info("Starting in STDIO mode");
// Start the Express server for the web UI even in stdio mode
app.listen(PORT, BIND_HOST, () => {
Logger.info(`Web UI running at ${MCP_HOST}`);
});
// Create and initialize STDIO transport
transport = TransportFactory.create('stdio', createWebcamServer);
await transport.initialize({});
// Set up stdin/stdout event handlers for STDIO transport
if (transport instanceof StdioTransport) {
transport.setupStdioHandlers();
}
Logger.info("Server connected via stdio");
}
}
main().catch((error) => {
Logger.error("Fatal error in main():", error);
process.exit(1);
});
```
--------------------------------------------------------------------------------
/transport/base-transport.ts:
--------------------------------------------------------------------------------
```typescript
import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import type { Express } from 'express';
import { Logger } from '../utils/logger.js';
/**
* Factory function to create server instances
* This should be provided during transport construction to enable per-connection server instances
*/
export type ServerFactory = (user?: string) => Promise<McpServer>;
export interface TransportOptions {
port?: number;
}
/**
* Standardized session metadata structure for all transports
*/
export interface SessionMetadata {
id: string;
connectedAt: Date;
lastActivity: Date;
user?: string;
clientInfo?: {
name: string;
version: string;
};
capabilities: {
sampling?: boolean;
roots?: boolean;
};
pingFailures?: number;
lastPingAttempt?: Date;
}
/**
* Base session interface that all transport sessions should extend
* This provides common fields while allowing transport-specific extensions
*/
export interface BaseSession<T = unknown> {
transport: T;
server: McpServer;
metadata: SessionMetadata;
heartbeatInterval?: NodeJS.Timeout;
}
/**
* Base class for all transport implementations
*/
export abstract class BaseTransport {
protected serverFactory: ServerFactory;
protected app?: Express;
constructor(serverFactory: ServerFactory, app?: Express) {
this.serverFactory = serverFactory;
this.app = app;
}
/**
* Initialize the transport with the given options
*/
abstract initialize(options: TransportOptions): Promise<void>;
/**
* Clean up the transport resources
*/
abstract cleanup(): Promise<void>;
/**
* Mark transport as shutting down
* Optional method for transports that need to reject new connections
*/
shutdown?(): void;
/**
* Get the number of active connections
*/
abstract getActiveConnectionCount(): number;
/**
* Get all active sessions with their metadata
* Returns an array of session metadata for connection dashboard
*/
getSessions(): SessionMetadata[] {
return [];
}
}
/**
* Base class for stateful transport implementations that maintain session state
* Provides common functionality for session management, stale connection detection, and client info tracking
*/
export abstract class StatefulTransport<TSession extends BaseSession = BaseSession> extends BaseTransport {
protected sessions: Map<string, TSession> = new Map();
protected isShuttingDown = false;
protected staleCheckInterval?: NodeJS.Timeout;
protected pingInterval?: NodeJS.Timeout;
protected pingsInFlight = new Set<string>();
// Configuration from environment variables with defaults
protected readonly STALE_CHECK_INTERVAL = parseInt(process.env.MCP_CLIENT_CONNECTION_CHECK || '20000', 10);
protected readonly STALE_TIMEOUT = parseInt(process.env.MCP_CLIENT_CONNECTION_TIMEOUT || '50000', 10);
protected readonly HEARTBEAT_INTERVAL = parseInt(process.env.MCP_CLIENT_HEARTBEAT_INTERVAL || '30000', 10);
protected readonly PING_ENABLED = process.env.MCP_PING_ENABLED !== 'false';
protected readonly PING_INTERVAL = parseInt(process.env.MCP_PING_INTERVAL || '30000', 10);
protected readonly PING_FAILURE_THRESHOLD = parseInt(process.env.MCP_PING_FAILURE_THRESHOLD || '1', 10);
/**
* Update the last activity timestamp for a session
*/
protected updateSessionActivity(sessionId: string): void {
const session = this.sessions.get(sessionId);
if (session) {
session.metadata.lastActivity = new Date();
}
}
/**
* Check if a session is distressed (has excessive ping failures)
*/
protected isSessionDistressed(session: BaseSession): boolean {
return (session.metadata.pingFailures || 0) >= this.PING_FAILURE_THRESHOLD;
}
/**
* Create a standardized client info capture callback for a session
*/
protected createClientInfoCapture(sessionId: string): () => void {
return () => {
const session = this.sessions.get(sessionId);
if (session) {
const clientInfo = session.server.server.getClientVersion();
const clientCapabilities = session.server.server.getClientCapabilities();
if (clientInfo) {
session.metadata.clientInfo = clientInfo;
}
if (clientCapabilities) {
session.metadata.capabilities = {
sampling: !!clientCapabilities.sampling,
roots: !!clientCapabilities.roots,
};
}
Logger.debug(
`Client Initialization Request for session ${sessionId}:`,
{
clientInfo: session.metadata.clientInfo,
capabilities: session.metadata.capabilities,
}
);
}
};
}
/**
* Send a fire-and-forget ping to a single session
* Success updates lastActivity, failures increment failure count
*/
protected pingSingleSession(sessionId: string): void {
const session = this.sessions.get(sessionId);
if (!session) return;
// Skip if ping already in progress for this session
if (this.pingsInFlight.has(sessionId)) {
return;
}
// Mark ping as in-flight and update last ping attempt
this.pingsInFlight.add(sessionId);
session.metadata.lastPingAttempt = new Date();
// Fire ping and handle result asynchronously
session.server.server
.ping()
.then(() => {
// SUCCESS: Update lastActivity timestamp and reset ping failures
// This prevents the stale checker from removing this session
this.updateSessionActivity(sessionId);
session.metadata.pingFailures = 0;
Logger.debug(`Ping succeeded for session ${sessionId}`);
})
.catch((error: unknown) => {
// FAILURE: Increment ping failure count
session.metadata.pingFailures = (session.metadata.pingFailures || 0) + 1;
const errorMessage = error instanceof Error ? error.message : String(error);
Logger.warn(`Ping failed for session ${sessionId}:`, errorMessage, `(failures: ${session.metadata.pingFailures}`);
})
.finally(() => {
// Always remove from tracking set
this.pingsInFlight.delete(sessionId);
});
}
/**
* Start the ping keep-alive interval
*/
protected startPingKeepAlive(): void {
if (!this.PING_ENABLED) {
Logger.info('Ping keep-alive disabled');
return;
}
this.pingInterval = setInterval(() => {
if (this.isShuttingDown) return;
// Ping all sessions that don't have an active ping
for (const sessionId of this.sessions.keys()) {
this.pingSingleSession(sessionId);
}
}, this.PING_INTERVAL);
Logger.info(`Started ping keep-alive with interval ${this.PING_INTERVAL}ms`);
}
/**
* Stop the ping keep-alive interval
*/
protected stopPingKeepAlive(): void {
if (this.pingInterval) {
clearInterval(this.pingInterval);
this.pingInterval = undefined;
// Clear any in-flight pings
this.pingsInFlight.clear();
Logger.info('Stopped ping keep-alive');
}
}
/**
* Start the stale connection check interval
*/
protected startStaleConnectionCheck(): void {
this.staleCheckInterval = setInterval(() => {
if (this.isShuttingDown) return;
const now = Date.now();
const staleSessionIds: string[] = [];
// Find stale sessions
for (const [sessionId, session] of this.sessions) {
const timeSinceActivity = now - session.metadata.lastActivity.getTime();
if (timeSinceActivity > this.STALE_TIMEOUT) {
staleSessionIds.push(sessionId);
}
}
// Remove stale sessions
for (const sessionId of staleSessionIds) {
const session = this.sessions.get(sessionId);
if (session) {
Logger.warn(
`Removing stale session ${sessionId} (inactive for ${Math.round((now - session.metadata.lastActivity.getTime()) / 1000)}s)`
);
void this.removeStaleSession(sessionId);
}
}
}, this.STALE_CHECK_INTERVAL);
Logger.info(`Started stale connection checker with ${this.STALE_CHECK_INTERVAL}ms interval, ${this.STALE_TIMEOUT}ms timeout`);
}
/**
* Remove a stale session - must be implemented by concrete transport
*/
protected abstract removeStaleSession(sessionId: string): Promise<void>;
/**
* Mark transport as shutting down
*/
override shutdown(): void {
this.isShuttingDown = true;
}
/**
* Get the number of active connections
*/
override getActiveConnectionCount(): number {
return this.sessions.size;
}
/**
* Check if server is accepting new connections
*/
isAcceptingConnections(): boolean {
return !this.isShuttingDown;
}
/**
* Stop the stale connection check interval during cleanup
*/
protected stopStaleConnectionCheck(): void {
if (this.staleCheckInterval) {
clearInterval(this.staleCheckInterval);
this.staleCheckInterval = undefined;
}
this.stopPingKeepAlive();
}
/**
* Get all active sessions with their metadata
*/
override getSessions(): SessionMetadata[] {
return Array.from(this.sessions.values()).map((session) => session.metadata);
}
/**
* Start heartbeat monitoring for a session with SSE response
* Automatically detects stale connections and cleans them up
*/
protected startHeartbeat(sessionId: string, response: { destroyed: boolean; writableEnded: boolean }): void {
const session = this.sessions.get(sessionId);
if (!session) return;
// Clear any existing heartbeat
this.stopHeartbeat(sessionId);
session.heartbeatInterval = setInterval(() => {
if (response.destroyed || response.writableEnded) {
Logger.warn(`Detected stale connection via heartbeat for session ${sessionId}`);
void this.removeStaleSession(sessionId);
}
}, this.HEARTBEAT_INTERVAL);
}
/**
* Stop heartbeat monitoring for a session
*/
protected stopHeartbeat(sessionId: string): void {
const session = this.sessions.get(sessionId);
if (session?.heartbeatInterval) {
clearInterval(session.heartbeatInterval);
session.heartbeatInterval = undefined;
}
}
/**
* Set up standard SSE connection event handlers
*/
protected setupSseEventHandlers(
sessionId: string,
response: { on: (event: string, handler: (...args: unknown[]) => void) => void }
): void {
response.on('close', () => {
Logger.info(`SSE connection closed by client for session ${sessionId}`);
void this.removeStaleSession(sessionId);
});
response.on('error', (...args: unknown[]) => {
const error = args[0] as Error;
Logger.error(`SSE connection error for session ${sessionId}:`, error);
void this.removeStaleSession(sessionId);
});
}
/**
* Standard session cleanup implementation
* Handles stopping heartbeat, closing transport/server
*/
protected async cleanupSession(sessionId: string): Promise<void> {
try {
const session = this.sessions.get(sessionId);
if (!session) return;
Logger.debug(`Cleaning up session ${sessionId}`);
// Remove from map FIRST to prevent any re-entry
this.sessions.delete(sessionId);
// Clear heartbeat interval
this.stopHeartbeat(sessionId);
// Clear the onclose handler to prevent circular calls
const transport = session.transport as any;
if (transport && typeof transport.onclose !== 'undefined') {
transport.onclose = undefined;
}
// Close transport
try {
await (session.transport as { close(): Promise<void> }).close();
} catch (error) {
Logger.error(`Error closing transport for session ${sessionId}:`, error);
}
// Close server
try {
await session.server.close();
} catch (error) {
Logger.error(`Error closing server for session ${sessionId}:`, error);
}
Logger.debug(`Session ${sessionId} cleaned up`);
} catch (error) {
Logger.error(`Error during session cleanup for ${sessionId}:`, error);
}
}
/**
* Clean up all sessions in parallel
*/
protected async cleanupAllSessions(): Promise<void> {
const sessionIds = Array.from(this.sessions.keys());
const cleanupPromises = sessionIds.map((sessionId) =>
this.cleanupSession(sessionId).catch((error: unknown) => {
Logger.error(`Error during session cleanup for ${sessionId}:`, error);
})
);
await Promise.allSettled(cleanupPromises);
this.sessions.clear();
}
/**
* Set up standard server configuration for a session
* Configures client info capture and error tracking
*/
protected setupServerForSession(server: McpServer, sessionId: string): void {
// Set up client info capture
server.server.oninitialized = this.createClientInfoCapture(sessionId);
// Set up error tracking for server errors
server.server.onerror = (error) => {
Logger.error(`Server error for session ${sessionId}:`, error);
};
}
}
```
--------------------------------------------------------------------------------
/src/components/WebcamCapture.tsx:
--------------------------------------------------------------------------------
```typescript
import { useRef, useState, useEffect, useCallback, useMemo } from "react";
import Webcam from "react-webcam";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { captureScreen } from "@/utils/screenCapture";
import { Github, Info, Link2, Users, Copy, Check } from "lucide-react";
import { Badge } from "@/components/ui/badge";
interface Session {
id: string;
connectedAt: string;
lastActivity: string;
isStale: boolean;
capabilities: {
sampling: boolean;
tools: boolean;
resources: boolean;
};
clientInfo?: {
name: string;
version: string;
};
}
export function WebcamCapture() {
const [webcamInstance, setWebcamInstance] = useState<Webcam | null>(null);
const clientIdRef = useRef<string | null>(null);
const [_, setClientId] = useState<string | null>(null);
// State for configuration
const [config, setConfig] = useState<{ mcpHostConfigured: boolean; mcpHost: string } | null>(null);
// State for copy functionality
const [copied, setCopied] = useState(false);
// Copy to clipboard function
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy:', err);
}
};
// Generate random 5-character user ID if none provided and in multiuser mode
const generateUserId = () => {
return Math.random().toString(36).substring(2, 7).toLowerCase();
};
// Validate and sanitize user ID
const validateUserId = (userId: string): string => {
if (!userId) return 'default';
// Remove any non-alphanumeric characters and hyphens/underscores
const sanitized = userId.replace(/[^a-zA-Z0-9_-]/g, '');
// Limit to 30 characters max
const truncated = sanitized.substring(0, 30);
// If empty after sanitization, return default
return truncated || 'default';
};
// Extract user parameter from URL
const urlUserParam = new URLSearchParams(window.location.search).get('user');
const userParam = useMemo(() => {
if (urlUserParam) {
return validateUserId(urlUserParam);
}
// Only generate random ID in multiuser mode (when MCP_HOST is configured)
if (config?.mcpHostConfigured) {
// Store in sessionStorage to persist across refreshes
const storageKey = 'mcp-webcam-user-id';
let storedUserId = sessionStorage.getItem(storageKey);
if (!storedUserId) {
storedUserId = generateUserId();
sessionStorage.setItem(storageKey, storedUserId);
}
return validateUserId(storedUserId);
}
return 'default';
}, [urlUserParam, config?.mcpHostConfigured]);
// Determine if we should show the banner (when MCP_HOST is explicitly set)
const showBanner = config?.mcpHostConfigured || false;
// Update URL when user param changes (for autogenerated IDs)
useEffect(() => {
// Only update URL if we don't already have a user param in URL and we have a non-default userParam
if (!urlUserParam && userParam !== 'default' && config?.mcpHostConfigured) {
const url = new URL(window.location.href);
url.searchParams.set('user', userParam);
// Use replaceState to avoid adding to browser history
window.history.replaceState({}, '', url.toString());
}
}, [userParam, urlUserParam, config?.mcpHostConfigured]);
const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
const [selectedDevice, setSelectedDevice] = useState<string>("default");
const [frozenFrame, setFrozenFrame] = useState<string | null>(null);
// New state for sampling results
const [samplingResult, setSamplingResult] = useState<string | null>(null);
const [samplingError, setSamplingError] = useState<string | null>(null);
const [isSampling, setIsSampling] = useState(false);
// State for sampling prompt and auto-update
const [samplingPrompt, setSamplingPrompt] =
useState<string>("What can you see?");
const [autoUpdate, setAutoUpdate] = useState<boolean>(false); // Explicitly false
const [updateInterval, setUpdateInterval] = useState<number>(30);
const autoUpdateIntervalRef = useRef<NodeJS.Timeout | null>(null);
// State for session management
const [sessions, setSessions] = useState<Session[]>([]);
const [selectedSessionId, setSelectedSessionId] = useState<string | null>(
null
);
const sessionPollIntervalRef = useRef<NodeJS.Timeout | null>(null);
// Get the currently selected session
const selectedSession = sessions.find((s) => s.id === selectedSessionId);
const getImage = useCallback(() => {
console.log("getImage called, frozenFrame state:", frozenFrame);
if (frozenFrame) {
console.log("Using frozen frame");
return frozenFrame;
}
console.log("Getting live screenshot");
const screenshot = webcamInstance?.getScreenshot();
return screenshot || null;
}, [frozenFrame, webcamInstance]);
const toggleFreeze = () => {
console.log("toggleFreeze called, current frozenFrame:", frozenFrame);
if (frozenFrame) {
console.log("Unfreezing frame");
setFrozenFrame(null);
} else if (webcamInstance) {
console.log("Freezing new frame");
const screenshot = webcamInstance.getScreenshot();
if (screenshot) {
console.log("New frame captured successfully");
setFrozenFrame(screenshot);
}
}
};
const handleScreenCapture = async () => {
console.log("Screen capture button clicked");
try {
const screenImage = await captureScreen();
console.log("Got screen image, length:", screenImage.length);
// Test if we can even get this far
alert("Screen captured! Check console for details.");
if (!clientIdRef.current) {
console.error("No client ID available");
return;
}
const response = await fetch(`/api/capture-result?user=${encodeURIComponent(userParam)}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
clientId: clientIdRef.current,
image: screenImage,
type: "screen",
}),
});
console.log("Server response:", response.status);
} catch (error) {
console.error("Screen capture error:", error);
alert("Screen capture failed: " + (error as Error).message);
}
};
// New function to handle sampling with callback for auto-update
const handleSample = async (onComplete?: () => void) => {
console.log("Sample button clicked");
setSamplingError(null);
setSamplingResult(null);
setIsSampling(true);
try {
const imageSrc = getImage();
if (!imageSrc) {
throw new Error("Failed to capture image for sampling");
}
console.log("Sending image for sampling...");
// Add timeout to prevent hanging requests
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
const response = await fetch(`/api/process-sample?user=${encodeURIComponent(userParam)}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
image: imageSrc,
prompt: samplingPrompt,
sessionId: selectedSessionId,
}),
signal: controller.signal,
}).catch((error) => {
clearTimeout(timeoutId);
if (error.name === "AbortError") {
throw new Error("Request timed out after 30 seconds");
}
throw error;
});
clearTimeout(timeoutId);
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || "Failed to process sample");
}
const data = await response.json();
console.log("Sampling response:", data);
if (data.success && data.result && data.result.content?.type === "text") {
setSamplingResult(data.result.content.text);
// Call the completion callback on success
if (onComplete) {
onComplete();
}
} else {
throw new Error("Invalid sampling result format");
}
} catch (error) {
console.error("Sampling error:", error);
setSamplingError((error as Error).message || "An unknown error occurred");
} finally {
setIsSampling(false);
}
};
// Fetch configuration on mount
useEffect(() => {
const fetchConfig = async () => {
try {
const response = await fetch('/api/config');
const configData = await response.json();
setConfig(configData);
} catch (error) {
console.error('Error fetching config:', error);
}
};
fetchConfig();
}, []);
useEffect(() => {
const getDevices = async () => {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(
(device) => device.kind === "videoinput"
);
setDevices(videoDevices);
setSelectedDevice("default");
} catch (error) {
console.error("Error getting devices:", error);
}
};
getDevices();
navigator.mediaDevices.addEventListener("devicechange", getDevices);
return () => {
navigator.mediaDevices.removeEventListener("devicechange", getDevices);
};
}, []);
useEffect(() => {
console.error("Setting up EventSource...");
const eventSource = new EventSource(`/api/events?user=${encodeURIComponent(userParam)}`);
eventSource.onopen = () => {
console.error("SSE connection opened successfully");
};
eventSource.onerror = (error) => {
console.error("SSE connection error:", error);
};
eventSource.onmessage = async (event) => {
console.log("Received message:", event.data);
try {
const data = JSON.parse(event.data);
switch (data.type) {
case "connected":
console.log("Connected with client ID:", data.clientId);
clientIdRef.current = data.clientId; // Store in ref
setClientId(data.clientId); // Keep state in sync if needed for UI
break;
case "capture":
console.log(`Capture triggered - webcam status:`, !!webcamInstance);
if (!webcamInstance || !clientIdRef.current) {
const error = !webcamInstance
? "Webcam not initialized"
: "Client ID not set";
await fetch(`/api/capture-error?user=${encodeURIComponent(userParam)}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
clientId: clientIdRef.current,
error: { message: error },
}),
});
return;
}
console.log("Taking webcam image...");
const imageSrc = getImage();
if (!imageSrc) {
await fetch(`/api/capture-error?user=${encodeURIComponent(userParam)}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
clientId: clientIdRef.current,
error: { message: "Failed to capture image" },
}),
});
return;
}
await fetch(`/api/capture-result?user=${encodeURIComponent(userParam)}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
clientId: clientIdRef.current,
image: imageSrc,
}),
});
console.log("Image sent to server");
break;
case "screenshot":
console.log("Screen capture triggered");
if (!clientIdRef.current) {
console.error("Cannot capture - client ID not set");
return;
}
try {
const screenImage = await captureScreen();
await fetch(`/api/capture-result?user=${encodeURIComponent(userParam)}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
clientId: clientIdRef.current,
image: screenImage,
type: "screen",
}),
});
console.log("Screen capture sent to server");
} catch (error) {
console.error("Screen capture failed:", error);
await fetch(`/api/capture-error?user=${encodeURIComponent(userParam)}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
clientId: clientIdRef.current,
error: {
message:
(error as Error).message || "Screen capture failed",
},
}),
});
}
break;
case "sample":
// Handle sample event if needed (currently handled directly by handle Sample function)
break;
default:
console.warn("Unknown message type:", data.type);
}
} catch (error) {
console.error(
"Error processing message:",
error,
"Raw message:",
event.data
);
}
};
return () => {
console.error("Cleaning up EventSource connection");
eventSource.close();
};
}, [webcamInstance, getImage, userParam]); // Add userParam to dependencies
// Handle auto-update with recursive timeout after successful requests
useEffect(() => {
console.log("Auto-update effect running:", {
autoUpdate,
updateInterval,
hasSampling: selectedSession?.capabilities.sampling,
sessionId: selectedSession?.id
});
// Clear any existing timer first
if (autoUpdateIntervalRef.current) {
clearTimeout(autoUpdateIntervalRef.current);
autoUpdateIntervalRef.current = null;
}
// Recursive function to handle auto-update
const scheduleNextUpdate = () => {
// Ensure minimum 5 seconds between requests
const delayMs = Math.max(updateInterval * 1000, 5000);
autoUpdateIntervalRef.current = setTimeout(() => {
if (autoUpdate === true && selectedSession?.capabilities.sampling) {
console.log("Auto-update triggered after", delayMs, "ms");
handleSample(() => {
// On successful completion, schedule the next update
if (autoUpdate === true) {
scheduleNextUpdate();
}
});
}
}, delayMs);
};
// Only start auto-update if explicitly enabled by user
if (autoUpdate === true && updateInterval > 0 && selectedSession?.capabilities.sampling) {
console.log("Starting auto-update");
// Initial sample when auto-update is enabled
handleSample(() => {
// Schedule next update after successful initial sample
if (autoUpdate === true) {
scheduleNextUpdate();
}
});
}
// Cleanup function
return () => {
if (autoUpdateIntervalRef.current) {
console.log("Cleaning up auto-update timer");
clearTimeout(autoUpdateIntervalRef.current);
autoUpdateIntervalRef.current = null;
}
};
}, [autoUpdate, updateInterval, selectedSession?.id]); // Only depend on session ID, not the whole object
// State for all sessions count
const [totalSessions, setTotalSessions] = useState<number>(0);
// Poll for active sessions
useEffect(() => {
const fetchSessions = async () => {
try {
// Fetch sessions for current user
const response = await fetch(`/api/sessions?user=${encodeURIComponent(userParam)}`);
if (response.ok) {
const data = await response.json();
setSessions(data.sessions);
// Auto-select the most recent session if none selected
if (!selectedSessionId && data.sessions.length > 0) {
// Sort by connection time and select the most recent
const sortedSessions = [...data.sessions].sort(
(a, b) =>
new Date(b.connectedAt).getTime() -
new Date(a.connectedAt).getTime()
);
setSelectedSessionId(sortedSessions[0].id);
}
// Clean up selected session if it's no longer available
if (
selectedSessionId &&
!data.sessions.find((s: Session) => s.id === selectedSessionId)
) {
setSelectedSessionId(null);
}
}
// Fetch total sessions count (only if showing banner)
if (showBanner) {
const totalResponse = await fetch(`/api/sessions?all=true`);
if (totalResponse.ok) {
const totalData = await totalResponse.json();
setTotalSessions(totalData.sessions.length);
}
}
} catch (error) {
console.error("Error fetching sessions:", error);
}
};
// Initial fetch
fetchSessions();
// Poll every 2 seconds
sessionPollIntervalRef.current = setInterval(fetchSessions, 2000);
return () => {
if (sessionPollIntervalRef.current) {
clearInterval(sessionPollIntervalRef.current);
}
};
}, [selectedSessionId, userParam, showBanner]);
return (
<div>
{showBanner && (
<>
{/* Fixed position connection badge in top right corner */}
<div className="fixed top-2 right-2 sm:top-4 sm:right-4 z-50 flex items-center gap-1 bg-white dark:bg-slate-800 rounded-md border px-2 py-1 shadow-lg">
<Users className="h-3 w-3 text-green-600" />
<span className="text-xs font-medium text-slate-700 dark:text-slate-300">
{sessions.length}/{totalSessions}
</span>
</div>
{/* Main banner content */}
<div className="border-b bg-slate-50 dark:bg-slate-900/50">
<div className="w-full px-3 sm:px-6 py-3">
<div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
<div className="flex items-center gap-2">
<Info className="h-4 w-4 text-blue-600" />
<span className="text-sm font-medium">Connected as</span>
<Badge variant="default" className="bg-blue-600 hover:bg-blue-700">
{userParam}
</Badge>
</div>
{/* MCP URL - stacks on mobile */}
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2 min-w-0 sm:flex-1">
<div className="flex items-center gap-2">
<Link2 className="h-4 w-4 text-blue-600 flex-shrink-0" />
<span className="text-sm font-medium flex-shrink-0">MCP URL:</span>
</div>
<div className="flex items-center gap-2 min-w-0 flex-1">
<code className="text-xs font-mono bg-slate-100 dark:bg-slate-900 px-2 py-1 rounded border select-all truncate flex-1 text-slate-700 dark:text-slate-300">
{config?.mcpHost || window.location.origin}/mcp{config?.mcpHostConfigured && userParam !== 'default' ? `?user=${userParam}` : ''}
</code>
<Button
variant="outline"
size="sm"
onClick={() => copyToClipboard(`${config?.mcpHost || window.location.origin}/mcp${config?.mcpHostConfigured && userParam !== 'default' ? `?user=${userParam}` : ''}`)}
className="h-7 px-2 flex-shrink-0"
>
{copied ? (
<Check className="h-3 w-3" />
) : (
<Copy className="h-3 w-3" />
)}
</Button>
</div>
</div>
</div>
{/* Helper text */}
<div className="mt-2 text-xs text-muted-foreground">
Add <code className="bg-muted px-1 py-0.5 rounded font-mono text-xs">?user=YOUR_ID</code> to change user
</div>
</div>
</div>
</>
)}
<Card className={`w-full max-w-2xl mx-auto ${showBanner ? 'mt-4' : ''}`}>
<CardHeader>
<div className="relative">
<a
href="https://github.com/evalstate/mcp-webcam"
target="_blank"
rel="noopener noreferrer"
className="absolute left-0 top-0 flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground transition-colors"
>
<Github className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">github.com/evalstate</span>
</a>
<CardTitle className="text-lg sm:text-xl font-bold text-center pt-6 sm:pt-0">
mcp-webcam
</CardTitle>
</div>
<div className="w-full max-w-2xl mx-auto mt-4 space-y-2">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{/* Camera selector */}
<div className="space-y-2">
<label className="text-sm font-medium">Camera</label>
<Select
value={selectedDevice}
onValueChange={setSelectedDevice}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select camera" />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Default camera</SelectItem>
{devices.map((device) => {
const deviceId =
device.deviceId || `device-${devices.indexOf(device)}`;
return (
<SelectItem key={deviceId} value={deviceId}>
{device.label ||
`Camera ${devices.indexOf(device) + 1}`}
</SelectItem>
);
})}
</SelectContent>
</Select>
</div>
{/* Session selector - always visible */}
<div className="space-y-2">
<label className="text-sm font-medium">
{userParam === 'default' ? 'MCP Session' : `MCP Session (${userParam})`}
</label>
<Select
value={selectedSessionId || ""}
onValueChange={setSelectedSessionId}
disabled={sessions.length === 0}
>
<SelectTrigger className="w-full">
<SelectValue
placeholder={
sessions.length === 0
? "No connections"
: "Select MCP session"
}
/>
</SelectTrigger>
<SelectContent>
{sessions.length === 0 ? (
<div className="p-2 text-center text-muted-foreground text-sm">
No MCP connections available
</div>
) : (
sessions.map((session) => {
const connectedTime = new Date(session.connectedAt);
const timeString = connectedTime.toLocaleTimeString();
// Determine color based on status
let colorClass = "bg-red-500"; // Default: stale
if (!session.isStale) {
if (session.capabilities.sampling) {
colorClass = "bg-green-500"; // Active with sampling
} else {
colorClass = "bg-amber-500"; // Active without sampling
}
}
return (
<SelectItem key={session.id} value={session.id}>
<div className="flex items-center gap-2">
<div
className={`w-2 h-2 rounded-full ${colorClass}`}
/>
<span>
{session.clientInfo
? `${session.clientInfo.name} v${session.clientInfo.version}`
: `Session ${session.id.slice(0, 8)}`}
</span>
<span className="text-xs text-muted-foreground">
({timeString})
</span>
</div>
</SelectItem>
);
})
)}
</SelectContent>
</Select>
</div>
</div>
{sessions.length > 0 && (
<div className="text-xs text-muted-foreground text-center">
<span className="inline-flex items-center gap-1">
<div className="w-2 h-2 rounded-full bg-green-500" /> Active
with sampling
</span>
<span className="inline-flex items-center gap-1 ml-3">
<div className="w-2 h-2 rounded-full bg-amber-500" /> Active,
no sampling
</span>
<span className="inline-flex items-center gap-1 ml-3">
<div className="w-2 h-2 rounded-full bg-red-500" /> Stale
connection
</span>
</div>
)}
</div>
</CardHeader>
<CardContent className="px-3 sm:px-6 pt-3 pb-6">
<div className="rounded-lg overflow-hidden border border-border relative">
<Webcam
ref={(webcam) => setWebcamInstance(webcam)}
screenshotFormat="image/jpeg"
className="w-full"
videoConstraints={{
width: 1280,
height: 720,
...(selectedDevice !== "default"
? { deviceId: selectedDevice }
: { facingMode: "user" }),
}}
/>
{frozenFrame && (
<img
src={frozenFrame}
alt="Frozen frame"
className="absolute inset-0 w-full h-full object-cover"
/>
)}
<div className="absolute top-4 right-4">
<Button
onClick={toggleFreeze}
variant={frozenFrame ? "destructive" : "outline"}
size="sm"
>
{frozenFrame ? "Unfreeze" : "Freeze"}
</Button>
</div>
</div>
</CardContent>
<CardFooter className="flex flex-col gap-4 pb-6">
<div className="w-full space-y-4">
{selectedSession && !selectedSession.capabilities.sampling && (
<Alert className="mb-4">
<AlertDescription>
The selected MCP session does not support sampling. Please
connect a client with sampling capabilities.
</AlertDescription>
</Alert>
)}
<div className="flex flex-col sm:flex-row gap-2">
<Input
type="text"
value={samplingPrompt}
onChange={(e) => setSamplingPrompt(e.target.value)}
placeholder="Enter your question..."
className="flex-1"
/>
<Button
onClick={() => handleSample()}
variant="default"
disabled={
isSampling ||
autoUpdate ||
!selectedSession?.capabilities.sampling
}
title={
!selectedSession?.capabilities.sampling
? "Selected session does not support sampling"
: ""
}
className="w-full sm:w-auto"
>
{isSampling ? "Sampling..." : "Sample"}
</Button>
</div>
{/* Sampling results display - always visible */}
<div className="mt-4 min-h-[80px]">
{samplingResult && (
<Alert>
<AlertTitle>Analysis Result</AlertTitle>
<AlertDescription>{samplingResult}</AlertDescription>
</Alert>
)}
{samplingError && (
<Alert variant="destructive">
<AlertTitle>Sampling Error</AlertTitle>
<AlertDescription>{samplingError}</AlertDescription>
</Alert>
)}
{!samplingResult && !samplingError && !isSampling && (
<div className="text-center text-muted-foreground text-sm p-4 border rounded-lg">
Sampling results will appear here
</div>
)}
{isSampling && (
<div className="text-center text-muted-foreground text-sm p-4 border rounded-lg">
Processing image...
</div>
)}
</div>
{/* Auto-update and Screen Capture controls */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-4">
<div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
<div className="flex items-center space-x-2">
<Checkbox
id="auto-update"
checked={autoUpdate}
onCheckedChange={(checked) =>
setAutoUpdate(checked as boolean)
}
disabled={!selectedSession?.capabilities.sampling}
/>
<label
htmlFor="auto-update"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Auto-update
</label>
</div>
<div className="flex items-center gap-2">
<Input
type="number"
value={updateInterval}
onChange={(e) =>
setUpdateInterval(parseInt(e.target.value) || 30)
}
className="w-20"
min="1"
disabled={
!autoUpdate || !selectedSession?.capabilities.sampling
}
/>
<span className="text-sm text-muted-foreground">seconds</span>
</div>
</div>
<Button onClick={handleScreenCapture} variant="secondary" className="w-full sm:w-auto">
Test Screen Capture
</Button>
</div>
</div>
</CardFooter>
</Card>
</div>
);
}
```