### Install Composio CLI

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Install the Composio CLI globally to manage and interact with Composio's MCP servers.

```bash
npm install -g composio-core@rc
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/camel-ai/mcp-hub/blob/main/CONTRIBUTING.md

Clone the repository and install project dependencies using npm or yarn.

```bash
git clone https://github.com/camel-ai/mcp-hub.git
cd mcp-hub

npm install
# or
yarn install
```

--------------------------------

### Run Development Server

Source: https://github.com/camel-ai/mcp-hub/blob/main/CONTRIBUTING.md

Start the development server to view the application locally. Open http://localhost:3000 in your browser.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Install uv package manager

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Install the uv package manager using pip, a tool that can be used in conjunction with ACI.dev for server configuration.

```bash
pip install uv
```

--------------------------------

### Install Filesystem Server with npm

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Install a specific MCP server, such as the filesystem server, using npm. This allows for local use or integration into Node.js projects.

```bash
npm install -g @modelcontextprotocol/server-filesystem
```

--------------------------------

### Run Memory Server with npx

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Use npx to run an MCP server without permanent installation, ideal for testing or community tools. This example launches a memory server for Claude.

```bash
npx -y @modelcontextprotocol/server-memory
```

--------------------------------

### Local Development and Deployment Commands

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

Commands for cloning the repository, installing dependencies, running the development server, and deploying using Docker, Vercel, or GitHub Pages.

```bash
# Clone and run locally
git clone https://github.com/camel-ai/mcp-hub.git
cd mcp-hub
npm install
npm run dev          # http://localhost:3000

# Docker
docker build -t mcp-hub:latest .
docker run -p 3000:3000 mcp-hub:latest

# Vercel
npm install -g vercel
vercel

# GitHub Pages (static export)
npm run deploy       # runs: next build && gh-pages -d out
```

--------------------------------

### Python Code to Interact with MCP Time Server

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Example Python script demonstrating how to load an MCP server configuration, connect to the server, create a ChatAgent with server tools, and query for information.

```python
import asyncio
from camel.toolkits.mcp_toolkit import MCPToolkit
from camel.agents import ChatAgent

async def main():
    # Load the config file
    mcp_toolkit = MCPToolkit(config_path="config/time.json")
    # Connect to the server (using stdio for local time server)
    await mcp_toolkit.connect()
    # Create an agent with server tools
    agent = ChatAgent(model=model, tools=mcp_toolkit.get_tools())
    # Ask a question
    response = await agent.astep("What time is it now?")
    print(response.msgs[0].content)  # Outputs: "The current time is 03:52 PM IST"
    # Disconnect when done
    await mcp_toolkit.disconnect()

asyncio.run(main())
```

--------------------------------

### Conceptual Schema Mismatch Example

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module1.mdx

Illustrates the difference in tool definition schemas between OpenAI and Gemini, highlighting the need for adapters or rewriting tools for cross-provider compatibility.

```json
{
  "openai_tool": {
    "function": {
      "name": "get_weather",
      "parameters": {"location": "string"}
    }
  },
  "gemini_tool": {
    "function_declarations": [
      {"name": "get_weather", "args": {"location": "str"}}
    ]
  }
}
```

--------------------------------

### Server Data Structure Example

Source: https://github.com/camel-ai/mcp-hub/blob/main/CONTRIBUTING.md

Defines the structure for server entries in JSON files, including name, key, command, arguments, environment variables, and homepage.

```json
{
  "name": "Server Name",
  "key": "server-key",
  "description": "Description of the server functionality",
  "command": "npx",
  "args": ["-y", "@package/server-name"],
  "env": {
    "API_KEY": "{{apiKey@string::Your API key}}"
  },
  "homepage": "https://github.com/org/repo"
}
```

--------------------------------

### Deploy to Vercel

Source: https://github.com/camel-ai/mcp-hub/blob/main/CONTRIBUTING.md

Deploy the Next.js application using the Vercel CLI. Ensure Vercel is installed globally.

```bash
npm install -g vercel
vercel
```

--------------------------------

### Install Python MCP Server

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Install an MCP server that is packaged for Python using pip. This is useful for Python-based projects or custom server development.

```bash
pip install mcp-server
```

--------------------------------

### MDX Course Module System Utilities

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

Utility functions for parsing MDX course modules. `getCourseModules` reads `.mdx` files, extracts frontmatter, and returns structured module data. Includes an example of frontmatter and rendering the course index.

```typescript
// app/course/utils.ts

// Frontmatter shape
type Metadata = {
  title: string;
  publishedAt: string;
  summary: string;
  image?: string;
  author?: string;
  reviewer?: string;
};

// Returns all modules sorted by filesystem order
export function getCourseModules() {
  // Reads every *.mdx file in app/course/modules/
  // Returns: Array<{ metadata: Metadata; slug: string; content: string }>
  return getMDXData(path.join(process.cwd(), "app", "course", "modules"));
}

// Example module frontmatter (app/course/modules/module0.mdx):
// ---
// title: "Course Overview - CAMEL-AI with MCP"
// publishedAt: "2025-08-07"
// summary: "Introduction to the CAMEL AI MCP course"
// author: "Parth Sharma"
// reviewer: "Xiaotian Jing"
// ---

// Rendering the course index (app/course/page.tsx)
export default function Page() {
  const modules = getCourseModules();
  return (
    <section>
      {modules.map((module) => (
        <Link key={module.slug} href={`/course/${module.slug}`}>
          <h2>{module.metadata.title}</h2>
          <p>{module.metadata.summary}</p>
        </Link>
      ))}
    </section>
  );
}
```

--------------------------------

### Fetch GitHub Stars Count API Route

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

This Next.js Route Handler fetches the star count for the `camel-ai/camel` repository. It's configured for static generation and hourly revalidation to avoid GitHub API rate limits. Includes client-side usage example.

```typescript
export const dynamic   = "force-static";
export const revalidate = 3600; // seconds

export async function GET() {
  try {
    const response = await fetch("https://api.github.com/repos/camel-ai/camel", {
      headers: { Accept: "application/vnd.github.v3+json" },
    });
    if (!response.ok) throw new Error("Failed to fetch GitHub data");
    const data = await response.json();
    return NextResponse.json({ stars: data.stargazers_count });
  } catch (error) {
    console.error("Error fetching GitHub data:", error);
    return NextResponse.json({ stars: 0 }, { status: 500 });
  }
}

// Client usage
const res  = await fetch("/api/github");
const { stars } = await res.json();
// => { stars: 8420 }
```

--------------------------------

### Create FastMCP Server and Define Tools

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module4.mdx

Instantiate a FastMCP server and define functions as tools or resources using decorators. Ensure necessary imports are included.

```python
from mcp.server.fastmcp import FastMCP

# Create a server named "DemoServer"
mcp = FastMCP("DemoServer")

# Define a tool for adding numbers
@mcp.tool()
def add(a: int, b: int) -> int:
    """Add two numbers."""
    return a + b

# Define a resource for personalized greetings
@mcp.resource("greeting://user")
def get_greeting(name: str) -> str:
    """Get a personalized greeting."""
    return f"Hello, {name}!"

```

--------------------------------

### Build and Run Docker Image

Source: https://github.com/camel-ai/mcp-hub/blob/main/CONTRIBUTING.md

Build a Docker image for the mcp-hub application and run it as a container, exposing port 3000.

```bash
# Build the image
docker build -t mcp-hub:latest .

# Run the container
docker run -p 3000:3000 mcp-hub:latest
```

--------------------------------

### Integrate ArxivToolkit into a CAMEL AI Agent

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module1.mdx

Initialize the ArxivToolkit and provide its tools to a `ChatAgent` for tasks like searching academic papers. Ensure the model is already configured.

```python
from camel.toolkits import ArxivToolkit
from camel.agents import ChatAgent

# Initialize the toolkit
toolkit = ArxivToolkit()

# Create an agent with the toolkit
agent = ChatAgent(model=model, tools=toolkit.get_tools())
response = agent.step("Find papers on AI ethics.")
print(response.msgs[0].content)  # Outputs paper summaries
```

--------------------------------

### Composio Notion Server Configuration (streamable-http)

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Configuration for the Composio Notion server using npx and the streamable-http transport. Requires an API key and server ID.

```json
{
  "mcpServers": {
    "composio-notion": {
      "command": "npx",
      "args": ["composio-core@rc", "mcp", "<https://mcp.composio.dev/notion/your-server-id>", "--client", "camel"],
      "env": {
        "COMPOSIO_API_KEY": "your-api-key-here"
      },
      "transport": "streamable-http"
    }
  }
}
```

--------------------------------

### MDX Course Module System

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

Utilities for reading and parsing MDX files from the `app/course/modules/` directory. It provides functions to retrieve course module data, including frontmatter metadata.

```APIDOC
## MDX Course Module System

### Description
Provides functionality to read `.mdx` files from `app/course/modules/`, parse their YAML frontmatter, and return structured module objects. This system is used to render the course index and individual modules.

### Functions
#### `getCourseModules()`
- **Description**: Reads every `*.mdx` file in `app/course/modules/` and returns an array of module objects.
- **Returns**: `Array<{ metadata: Metadata; slug: string; content: string }>`

### Metadata Shape
```typescript
type Metadata = {
  title: string;
  publishedAt: string;
  summary: string;
  image?: string;
  author?: string;
  reviewer?: string;
};
```

### Example Usage (Rendering Course Index)
```typescript
// app/course/page.tsx
import { getCourseModules } from "./utils";

export default function Page() {
  const modules = getCourseModules();
  return (
    <section>
      {modules.map((module) => (
        <Link key={module.slug} href={`/course/${module.slug}`}>
          <h2>{module.metadata.title}</h2>
          <p>{module.metadata.summary}</p>
        </Link>
      ))}
    </section>
  );
}
```
```

--------------------------------

### Local Time Server Configuration (stdio)

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Configuration for a local time server using Python and the stdio transport. This is useful for local testing.

```json
{
  "mcpServers": {
    "time_server": {
      "command": "python",
      "args": ["time_server.py"],
      "transport": "stdio"
    }
  }
}
```

--------------------------------

### Sample MCP Server Configuration Schema

Source: https://github.com/camel-ai/mcp-hub/blob/main/README.md

This JSON object represents a typical server configuration for the CAMEL MCP Hub. It includes details like the server's name, a unique key, a description, the command to run it, arguments, and its homepage.

```json
{
  "name": "Filesystem",
  "key": "filesystem",
  "description": "Read, write, and manipulate local files through a controlled API.",
  "command": "npx",
  "args": [
    "-y",
    "@modelcontextprotocol/server-filesystem",
    "{{dirs@list::directories you about to access. Trailing slash in path required.}}"
  ],
  "homepage": "https://github.com/modelcontextprotocol/servers/tree/HEAD/src/filesystem"
}
```

--------------------------------

### Search MCP Servers with PulseMCPSearchToolkit

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module6.mdx

Use PulseMCPSearchToolkit to dynamically discover MCP servers based on a query. Specify the number of results with `top_k`.

```python
from camel.toolkits.mcp import PulseMCPSearchToolkit

search_toolkit = PulseMCPSearchToolkit()
results = search_toolkit.search_mcp_servers(query="Slack", top_k=1)
print(results)

```

--------------------------------

### Convert ChatAgent to MCP Server with to_mcp()

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module6.mdx

Convert an existing ChatAgent instance into an MCP server using the `to_mcp()` function. This method allows for naming and describing the MCP server and specifies the transport protocol.

```python
from camel.agents import ChatAgent

# Create a chat agent with a model
agent = ChatAgent(model="gpt-4o-mini")

# Create an MCP server from the agent
mcp_server = agent.to_mcp(
    name="demo", description="A demonstration of ChatAgent to MCP conversion"
)

# Run the server
if __name__ == "__main__":
    print("Starting MCP server on http://localhost:8000")
    mcp_server.run(transport="streamable-http")


```

--------------------------------

### Configure MCPAgent with ACI Registry

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module6.mdx

Initialize an MCPAgent connected to an MCP registry, such as ACI.dev. This requires providing API keys and linked account owner IDs for authentication.

```python
from camel.configs import ACIRegistryConfig
from camel.factories import ModelFactory
from camel.models import ModelPlatformType, ModelType
from camel.agents import MCPAgent
import os

aci_config = ACIRegistryConfig(
    api_key=os.getenv("ACI_API_KEY"),
    linked_account_owner_id=os.getenv("ACI_LINKED_ACCOUNT_OWNER_ID"),
)

model = ModelFactory.create(
    model_platform=ModelPlatformType.OPENAI,
    model_type=ModelType.GPT_4O,
)

# Create MCPAgent with registry configurations
agent = MCPAgent(
    model=model,
    registry_configs=[aci_config],
)


```

--------------------------------

### Configure ChatAgent as an MCP Server

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module6.mdx

Configure a ChatAgent to run as an MCP server. This involves specifying the Python interpreter, script path, and necessary environment variables for API keys.

```json
{
  "camel-chat-agent": {
    "command": "/path/to/python",
    "args": [
      "/path/to/camel/services/agent_mcp_server.py"
    ],
    "env": {
      "OPENAI_API_KEY": "...",
      "OPENROUTER_API_KEY": "...",
      "BRAVE_API_KEY": "..."
    }
  }
}

```

--------------------------------

### Construct MCP Server Configuration JSON

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

This React component constructs and formats the `mcpServers` JSON block for a given server configuration. It uses `useState` for managing clipboard copy feedback and `navigator.clipboard.writeText` for the copy functionality.

```tsx
function Modal({ server, onClose }: ModalProps) {
  const serverConfig = {
    command: server.command,
    ...(server.args && { args: server.args }),
    ...(server.env  && { env:  server.env  }),
  };

  const configObject = {
    mcpServers: {
      [server.key.toLowerCase()]: serverConfig,
    },
  };

  const formattedConfig = JSON.stringify(configObject, null, 2);

  const [copied, setCopied] = useState(false);
  const copyToClipboard = () => {
    navigator.clipboard.writeText(formattedConfig)
      .then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); })
      .catch(err => console.error("Copy failed:", err));
  };

  // ... AnimatePresence / motion.div render with <pre>{formattedConfig}</pre>
}
```

--------------------------------

### Expose CAMEL Toolkit as MCP Server

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Python code to expose a CAMEL toolkit (e.g., ArxivToolkit) as an MCP server. This allows other clients to access the toolkit's functionalities.

```python
from camel.toolkits import ArxivToolkit
import argparse

parser = argparse.ArgumentParser()
parser.add_argument("--mode", default="stdio")
args = parser.parse_args()

toolkit = ArxivToolkit()
toolkit.mcp.run(args.mode)
```

--------------------------------

### ACI.dev Unified Server Configuration (sse)

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module5.mdx

Configuration for the ACI.dev Unified Server using sse transport. Requires an ACI API key and linked account owner ID.

```json
{
  "mcpServers": {
    "aci_apps": {
      "command": "uvx",
      "args": [
        "aci-mcp",
        "apps-server",
        "--apps=BRAVE_SEARCH,GITHUB,ARXIV",
        "--linked-account-owner-id",
        "<your_linked_acc_owner_id>"
      ],
      "env": {
        "ACI_API_KEY": "your_aci_api_key"
      }
    }
  }
}
```

--------------------------------

### MCP Server JSON Data Schema

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

Defines the structure for MCP server entries in JSON files. Includes required fields like name, key, description, command, and homepage, along with optional args and env fields. The env field uses a template syntax for UI rendering.

```json
// public/servers/official.json  (or anthropic.json / camel.json / community.json)
[
  {
    "name": "GitHub",
    "key": "github",
    "description": "Manage repositories, issues, and search code via GitHub API.",
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-github"],
    "env": {
      "GITHUB_TOKEN": "{{token@string::Your GitHub personal access token}}"
    },
    "homepage": "https://github.com/modelcontextprotocol/servers/tree/HEAD/src/github"
  },
  {
    "name": "SQLite",
    "key": "sqlite",
    "description": "Query and analyze SQLite databases directly.",
    "command": "uvx",
    "args": ["mcp-server-sqlite", "--db-path", "{{dbPath@string::Sqlite database file path}}"],
    "homepage": "https://github.com/modelcontextprotocol/servers/tree/HEAD/src/sqlite"
  }
]
```

--------------------------------

### Define and Use a Custom Tool in CAMEL AI

Source: https://github.com/camel-ai/mcp-hub/blob/main/app/course/modules/module1.mdx

Define a Python function, wrap it with `FunctionTool`, and integrate it into a `ChatAgent` to extend AI capabilities. Ensure the model and agent are properly initialized.

```python
from camel.agents import ChatAgent
from camel.models import ModelFactory
from camel.models.types import ModelPlatformType, ModelType
from camel.tools import FunctionTool
from camel.messages import BaseMessage

# Define a tool
def add(a: int, b: int) -> int:
    """Add two integers."""
    return a + b

# Wrap it
add_tool = FunctionTool(add)

# Create a model
model = ModelFactory.create(
    model_platform=ModelPlatformType.OPENAI,
    model_type=ModelType.GPT_3_5_TURBO,
    model_config_dict={"temperature": 0.0}
)

# Initialize the agent
system_message = BaseMessage.make_system_message(
    role_name="MathAssistant",
    content="You help with math using tools."
)
agent = ChatAgent(model=model, tools=[add_tool])

# Use the agent
response = agent.step("What is 5 plus 3?")
print(response.msgs[0].content)  # Output: "8"
```

--------------------------------

### Server Data Aggregation and Sorting

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

Aggregates server data from multiple JSON files and sorts them alphabetically by name. Adds a 'source' discriminator to each server object.

```typescript
// public/servers/index.ts
import anthropicServers from "./anthropic.json";
import officialServers from "./official.json";
import camelServers from "./camel.json";
import communityServers from "./community.json";

export { anthropicServers, officialServers, camelServers, communityServers };

// --- Usage inside app/page.tsx ---
import { anthropicServers, officialServers, camelServers, communityServers } from "@/public/servers";

const allServers = [
  ...anthropicServers.map(s => ({ ...s, source: "anthropic" as const })),
  ...officialServers.map(s  => ({ ...s, source: "official"  as const })),
  ...camelServers.map(s     => ({ ...s, source: "camel"     as const })),
  ...communityServers.map(s => ({ ...s, source: "community" as const })),
].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));

```

--------------------------------

### Git Commit Workflow

Source: https://github.com/camel-ai/mcp-hub/blob/main/CONTRIBUTING.md

Standard Git commands for committing changes to a feature branch.

```bash
git checkout -b servers/new-server
git commit -m 'Add new server'
```

--------------------------------

### GitHub Stars API Route

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

A Next.js Route Handler to fetch the star count for the camel-ai/camel GitHub repository. This route is statically cached and revalidates every hour to prevent hitting GitHub rate limits.

```APIDOC
## GET /api/github

### Description
Fetches the star count for the `camel-ai/camel` GitHub repository using a statically cached Next.js Route Handler. The route revalidates every hour.

### Method
GET

### Endpoint
/api/github

### Response
#### Success Response (200)
- **stars** (integer) - The number of stars the repository has.

#### Response Example
{
  "stars": 8420
}
```

--------------------------------

### URL-Driven Filter Implementation

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

Manages the filter state and updates the URL query string using the History API. This allows filters to persist across refreshes and be bookmarked or deep-linked.

```typescript
// Navigating directly to a filtered view
// https://mcp.camel-ai.org/?filter=official

// Internal implementation (app/page.tsx)
const handleFilterChange = (newFilter: "all" | "official" | "anthropic" | "camel" | "community") => {
  setFilter(newFilter);
  const params = new URLSearchParams(window.location.search);
  if (newFilter === "all") {
    params.delete("filter");
  } else {
    params.set("filter", newFilter);
  }
  const newUrl = params.toString() ? `/?${params.toString()}` : "/";
  window.history.replaceState({}, "", newUrl);
};

// Reading the filter on mount via useSearchParams
useEffect(() => {
  const filterParam = searchParams.get("filter");
  if (filterParam && ["official", "anthropic", "camel", "community"].includes(filterParam)) {
    setFilter(filterParam as typeof filter);
  } else {
    setFilter("all");
  }
}, [searchParams]);

```

--------------------------------

### Validate Server JSON Script

Source: https://context7.com/camel-ai/mcp-hub/llms.txt

A Node.js script to validate JSON files under public/servers/. It ensures each entry is an array of objects with required fields and correct types for 'args' and 'env'.

```javascript
// .github/scripts/validate-server-json.js
// Run locally:  node .github/scripts/validate-server-json.js

const requiredFields = ["name", "key", "description", "command", "homepage"];

function validateJsonFile(filePath, requiredFieldsList) {
  const jsonData = JSON.parse(fs.readFileSync(filePath, "utf8"));

  if (!Array.isArray(jsonData)) {
    console.error(`${filePath} must contain an array`);
    process.exit(1);
  }

  jsonData.forEach((server, index) => {
    const missing = requiredFieldsList.filter(
      f => !Object.prototype.hasOwnProperty.call(server, f) || !server[f]
    );
    if (missing.length) {
      console.error(`[${index}] ${server.name || "unnamed"}: missing ${missing.join(", ")}`);
      process.exit(1);
    }
    if (server.args && !Array.isArray(server.args)) {
      console.error(`[${index}] 'args' must be an array`);
      process.exit(1);
    }
    if (server.env && (typeof server.env !== "object" || Array.isArray(server.env))) {
      console.error(`[${index}] 'env' must be a plain object`);
      process.exit(1);
    }
  });
  console.log(`${filePath} is valid!`);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.