Google Cloud Run

gcloud services enable \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

import { MCPServer, text, object, array } from 'mcp-use/server';
import { z } from 'zod';

// Dictionary of animals at the zoo

interface Animal {
  species: string;
  name: string;
  age: number;
  enclosure: string;
  trail: string;
}

const ZOO_ANIMALS: Animal[] = [
  {
    species: 'lion',
    name: 'Leo',
    age: 7,
    enclosure: 'The Big Cat Plains',
    trail: 'Savannah Heights',
  },
  {
    species: 'lion',
    name: 'Nala',
    age: 6,
    enclosure: 'The Big Cat Plains',
    trail: 'Savannah Heights',
  },
  {
    species: 'lion',
    name: 'Simba',
    age: 3,
    enclosure: 'The Big Cat Plains',
    trail: 'Savannah Heights',
  },
  {
    species: 'penguin',
    name: 'Chilly',
    age: 3,
    enclosure: 'The Arctic Exhibit',
    trail: 'Polar Path',
  },
  {
    species: 'penguin',
    name: 'Pingu',
    age: 6,
    enclosure: 'The Arctic Exhibit',
    trail: 'Polar Path',
  },
  {
    species: 'elephant',
    name: 'Trunkers',
    age: 10,
    enclosure: 'The Pachyderm Sanctuary',
    trail: 'Savannah Heights',
  },
  {
    species: 'bear',
    name: 'Smokey',
    age: 10,
    enclosure: 'The Grizzly Gulch',
    trail: 'Polar Path',
  },
  {
    species: 'giraffe',
    name: 'Longneck',
    age: 5,
    enclosure: 'The Tall Grass Plains',
    trail: 'Savannah Heights',
  },

  {
    species: 'antelope',
    name: 'Speedy',
    age: 2,
    enclosure: 'The Tall Grass Plains',
    trail: 'Savannah Heights',
  },

  {
    species: 'antelope',
    name: 'Swift',
    age: 5,
    enclosure: 'The Tall Grass Plains',
    trail: 'Savannah Heights',
  },

  {
    species: 'polar bear',
    name: 'Blizzard',
    age: 5,
    enclosure: 'The Arctic Exhibit',
    trail: 'Polar Path',
  },
  {
    species: 'polar bear',
    name: 'Iceberg',
    age: 9,
    enclosure: 'The Arctic Exhibit',
    trail: 'Polar Path',
  },
  {
    species: 'walrus',
    name: 'Moby',
    age: 8,
    enclosure: 'The Walrus Cove',
    trail: 'Polar Path',
  },
  {
    species: 'walrus',
    name: 'Flippers',
    age: 9,
    enclosure: 'The Walrus Cove',
    trail: 'Polar Path',
  },
];

// Create the MCP server
const server = new MCPServer({
  name: 'Zoo Animal MCP Server 🦁🐧🐻',
  version: '1.0.0',
  description: 'A MCP server for querying zoo animal information',
});

// Tool: Get animals by species
server.tool(
  {
    name: 'get_animals_by_species',
    description:
      'Retrieves all animals of a specific species from the zoo. Can also be used to collect the base data for aggregate queries of animals of a specific species - like counting the number of penguins or finding the oldest lion.',
    schema: z.object({
      species: z
        .string()
        .describe("The species of the animal (e.g., 'lion', 'penguin')"),
    }),
  },
  async ({ species }) => {
    console.log(`>>> 🛠️ Tool: 'get_animals_by_species' called for '${species}'`);
    const animals = ZOO_ANIMALS.filter(
      (animal) => animal.species.toLowerCase() === species.toLowerCase()
    );
    return array(animals);
  }
);

// Tool: Get animal details by name
server.tool(
  {
    name: 'get_animal_details',
    description: 'Retrieves the details of a specific animal by its name.',
    schema: z.object({
      name: z.string().describe('The name of the animal'),
    }),
  },
  async ({ name }) => {
    console.log(`>>> 🛠️ Tool: 'get_animal_details' called for '${name}'`);
    const animal = ZOO_ANIMALS.find(
      (a) => a.name.toLowerCase() === name.toLowerCase()
    );
    if (animal) {
      return object(animal);
    }
    return object({});
  }
);

// Start the server
const port = parseInt(process.env.PORT || '8080', 10);
console.log(`🚀 MCP server started on port ${port}`);
await server.listen(port);

import React from 'react';
import { McpUseProvider, useWidget, type WidgetMetadata } from 'mcp-use/react';
import { z } from 'zod';

const propsSchema = z.object({
    name: z.string(),
    species: z.string(),
    age: z.number(),
    enclosure: z.string(),
    trail: z.string(),
})
// Define widget metadata - this auto-generates a tool!
export const widgetMetadata: WidgetMetadata = {
  description: 'Display detailed information about a zoo animal',
  props: propsSchema
};

type AnimalCardProps = z.infer<typeof propsSchema>;

const AnimalCard: React.FC = () => {
  // Props are supplied at runtime via useWidget(), not as React props
  const { props } = useWidget<AnimalCardProps>();

  return (
    <McpUseProvider autoSize>
      <div style={{
        padding: '20px',
        borderRadius: '8px',
        border: '1px solid #e0e0e0',
        backgroundColor: '#f9f9f9',
        fontFamily: 'system-ui, sans-serif'
      }}>
        <h2 style={{ marginTop: 0, color: '#333' }}>{props.name}</h2>
        <div style={{ marginBottom: '10px' }}>
          <strong>Species:</strong> {props.species}
        </div>
        <div style={{ marginBottom: '10px' }}>
          <strong>Age:</strong> {props.age} years old
        </div>
        <div style={{ marginBottom: '10px' }}>
          <strong>Enclosure:</strong> {props.enclosure}
        </div>
        <div>
          <strong>Trail:</strong> {props.trail}
        </div>
      </div>
    </McpUseProvider>
  );
};

export default AnimalCard;

import { MCPServer, text, object, array, widget } from 'mcp-use/server';

// Tool: Get animal details with widget
server.tool(
  {
    name: 'get_animal_details_widget',
    description: 'Retrieves the details of a specific animal by its name and displays it in an interactive widget.',
    schema: z.object({
      name: z.string().describe('The name of the animal'),
    }),
    widget: {
      name: 'animal-card',
      invoking: 'Loading animal details...',
      invoked: 'Animal details loaded',
    },
  },
  async ({ name }) => {
    console.log(`>>> 🛠️ Tool: 'get_animal_details_widget' called for '${name}'`);
    const animal = ZOO_ANIMALS.find(
      (a) => a.name.toLowerCase() === name.toLowerCase()
    );
    
    if (animal) {
      return widget({
        props: {
          name: animal.name,
          species: animal.species,
          age: animal.age,
          enclosure: animal.enclosure,
          trail: animal.trail,
        },
        output: text(`Found ${animal.name}, a ${animal.age}-year-old ${animal.species} in ${animal.enclosure}.`),
      });
    }
    
    return text(`Animal "${name}" not found in the zoo.`);
  }
);

# Use the official Node.js image
FROM node:22-slim

# Set working directory
WORKDIR /app

# Copy package files
COPY package*.json ./

# Install all dependencies (needed for build)
RUN npm ci

# Copy source code
COPY . .

# Build TypeScript and widgets (mcp-use build handles everything)
RUN npm run build

# Allow statements and log messages to immediately appear in the logs
ENV NODE_ENV=production

# Expose port (Cloud Run sets PORT env var)
EXPOSE $PORT

# Run the MCP server (mcp-use start runs the built server)
CMD ["npm", "start"]

PROJECT_NUMBER=$(gcloud projects describe $GOOGLE_CLOUD_PROJECT --format="value(projectNumber)")

gcloud projects add-iam-policy-binding $GOOGLE_CLOUD_PROJECT \
  --member="serviceAccount:${PROJECT_NUMBER}@cloudbuild.gserviceaccount.com" \
  --role="roles/storage.objectViewer"

🔍 Attempting OAuth discovery for 'zoo-remote'...
❌ 'zoo-remote' requires authentication but no OAuth configuration found
Error connecting to MCP server 'zoo-remote': MCP server 'zoo-remote' requires authentication. Please configure OAuth or check server settings.

gcloud run services logs read zoo-mcp-server --region europe-west1 --limit=5

2025-08-05 19:50:31 INFO:     169.254.169.126:39444 - "POST /mcp HTTP/1.1" 200 OK
2025-08-05 19:50:31 [INFO]: Processing request of type CallToolRequest
2025-08-05 19:50:31 >>> 🛠️ Tool: 'get_animals_by_species' called for 'penguin'

// Prompt: Find animal location
server.prompt(
  {
    name: 'find',
    description: 'Find which exhibit and trail a specific animal might be located.',
    schema: z.object({
      animal: z.string().describe('The name or species of the animal to find'),
    }),
  },
  async ({ animal }) => {
    return text(
      `Please find the exhibit and trail information for ${animal} in the zoo. ` +
        `Respond with '[animal] can be found in the [exhibit] on the [trail].' ` +
        `Example: Penguins can be found in The Arctic Exhibit on the Polar Path.`
    );
  }
);

✕ Unknown command: /find --animal="lions"

gcloud projects add-iam-policy-binding $GOOGLE_CLOUD_PROJECT \
  --member=user:$(gcloud config get-value account) \
  --role='roles/run.invoker'

export PROJECT_NUMBER=$(gcloud projects describe $GOOGLE_CLOUD_PROJECT --format="value(projectNumber)")
export ID_TOKEN=$(gcloud auth print-identity-token)

gcloud projects delete $GOOGLE_CLOUD_PROJECT