Spaces:
Sleeping
Sleeping
File size: 3,230 Bytes
c40c75a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import React from 'react';
const codeString = `import asyncio
from openai import AsyncOpenAI
from openai.types.chat import ChatCompletionUserMessageParam
from mcp import ClientSession
from mcp.client.sse import sse_client
from litellm.experimental_mcp_client.tools import (
transform_mcp_tool_to_openai_tool,
transform_openai_tool_call_request_to_mcp_tool_call_request,
)
async def main():
# Initialize clients
client = AsyncOpenAI(
api_key="sk-1234",
base_url="http://localhost:4000"
)
# Connect to MCP
async with sse_client("http://localhost:4000/mcp/") as (read, write):
async with ClientSession(read, write) as session:
await session.initialize()
mcp_tools = await session.list_tools()
print("List of MCP tools for MCP server:", mcp_tools.tools)
# Create message
messages = [
ChatCompletionUserMessageParam(
content="Send an email about LiteLLM supporting MCP",
role="user"
)
]
# Request with tools
response = await client.chat.completions.create(
model="gpt-4o",
messages=messages,
tools=[transform_mcp_tool_to_openai_tool(tool) for tool in mcp_tools.tools],
tool_choice="auto"
)
# Handle tool call
if response.choices[0].message.tool_calls:
tool_call = response.choices[0].message.tool_calls[0]
if tool_call:
# Convert format
mcp_call = transform_openai_tool_call_request_to_mcp_tool_call_request(
openai_tool=tool_call.model_dump()
)
# Execute tool
result = await session.call_tool(
name=mcp_call.name,
arguments=mcp_call.arguments
)
print("Result:", result)
# Run it
asyncio.run(main())`;
export const CodeExample: React.FC = () => {
return (
<div className="bg-white rounded-lg shadow h-full">
<div className="border-b px-4 py-3">
<h3 className="text-base font-medium text-gray-900">Using MCP Tools</h3>
</div>
<div className="p-4">
<div className="flex items-center gap-2 mb-2">
<div className="flex-1">
<div className="text-sm font-medium text-gray-700">Python integration</div>
</div>
<button
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 px-2 py-1 rounded-md transition-colors"
onClick={() => {
navigator.clipboard.writeText(codeString);
}}
>
Copy
</button>
</div>
<div className="overflow-auto rounded-md bg-gray-50 border" style={{ maxHeight: "calc(100vh - 280px)" }}>
<pre className="p-3 text-xs font-mono text-gray-800 whitespace-pre overflow-x-auto">
{codeString}
</pre>
</div>
</div>
</div>
);
}; |