Skip to content

Commit abf994b

Browse files
committed
Add MCP Support
1 parent d9b5d5b commit abf994b

20 files changed

+436
-59
lines changed

app/(home)/page.tsx

Lines changed: 95 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { screenshotScreens } from './screenshot-screens';
88
import { TabbedImages } from './tabbed-images';
99
import { LightboxImage } from './lightbox-image';
1010
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
11-
import { Star, Sparkles, Zap, Code2, Image as ImageIcon, Music, Calculator, Puzzle, Search, GalleryHorizontal, Sigma } from 'lucide-react';
11+
import { Star, Sparkles, Zap, Code2, Image as ImageIcon, Music, Calculator, Puzzle, Search, GalleryHorizontal, Sigma, Plug } from 'lucide-react';
1212

1313
export default function HomePage() {
1414
return (
@@ -164,65 +164,65 @@ export default function HomePage() {
164164
</Card>
165165
</Link>
166166

167-
<Link href="/docs/features/calculator-ui" className="block">
167+
<Link href="/docs/extensions/fast_mcp" className="block">
168168
<Card className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer h-full">
169169
<CardHeader>
170170
<CardTitle className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
171-
<Calculator className="w-5 h-5 text-orange-500" />
172-
Calculator & Run Code UIs
171+
<Plug className="w-5 h-5 text-teal-500" />
172+
MCP Support
173173
</CardTitle>
174174
</CardHeader>
175175
<CardContent>
176176
<p className="text-slate-700 dark:text-slate-300">
177-
Beautiful UIs to evaluate math and execute Python, JS, TS & C# code
177+
Connect to Model Context Protocol servers for extended tool capabilities
178178
</p>
179179
</CardContent>
180180
</Card>
181181
</Link>
182182

183-
<Link href="/docs/media-generation/media-gallery" className="block">
183+
<Link href="/docs/features/calculator-ui" className="block">
184184
<Card className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer h-full">
185185
<CardHeader>
186186
<CardTitle className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
187-
<GalleryHorizontal className="w-5 h-5 text-indigo-500" />
188-
Media Gallery
187+
<Calculator className="w-5 h-5 text-orange-500" />
188+
Calculator & Run Code UIs
189189
</CardTitle>
190190
</CardHeader>
191191
<CardContent>
192192
<p className="text-slate-700 dark:text-slate-300">
193-
Browse and manage all your generated images and audio in one place
193+
Beautiful UIs to evaluate math and execute Python, JS, TS & C# code
194194
</p>
195195
</CardContent>
196196
</Card>
197197
</Link>
198198

199-
<Link href="/docs/media-generation/image-generation" className="block">
199+
<Link href="/docs/media-generation/media-gallery" className="block">
200200
<Card className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer h-full">
201201
<CardHeader>
202202
<CardTitle className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
203-
<ImageIcon className="w-5 h-5 text-green-500" />
204-
Image Generation
203+
<GalleryHorizontal className="w-5 h-5 text-indigo-500" />
204+
Media Gallery
205205
</CardTitle>
206206
</CardHeader>
207207
<CardContent>
208208
<p className="text-slate-700 dark:text-slate-300">
209-
Built-in support for Google, OpenAI, OpenRouter, Chutes, and Nvidia
209+
Browse and manage all your generated images and audio in one place
210210
</p>
211211
</CardContent>
212212
</Card>
213213
</Link>
214214

215-
<Link href="/docs/media-generation/audio-generation" className="block">
215+
<Link href="/docs/media-generation/image-generation" className="block">
216216
<Card className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer h-full">
217217
<CardHeader>
218218
<CardTitle className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
219-
<Music className="w-5 h-5 text-pink-500" />
220-
Audio Generation
219+
<ImageIcon className="w-5 h-5 text-green-500" />
220+
Image & Audio Generation
221221
</CardTitle>
222222
</CardHeader>
223223
<CardContent>
224224
<p className="text-slate-700 dark:text-slate-300">
225-
TTS support for Gemini 2.5 Flash/Pro Preview models
225+
Built-in support for Gemini, OpenAI, OpenRouter, Chutes, and Nvidia
226226
</p>
227227
</CardContent>
228228
</Card>
@@ -452,6 +452,84 @@ export default function HomePage() {
452452
</div>
453453
</div>
454454

455+
{/* MCP Support Section */}
456+
<div id="mcp" className="w-full my-16 px-4">
457+
<div className="max-w-6xl mx-auto">
458+
<div className="text-center mb-8">
459+
<h2 className="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-4">
460+
MCP Support
461+
</h2>
462+
<p className="text-lg text-slate-600 dark:text-slate-400">
463+
Extend LLM capabilities with Model Context Protocol servers
464+
</p>
465+
<Link
466+
href="/docs/extensions/fast_mcp"
467+
className="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline mt-2"
468+
>
469+
Learn more →
470+
</Link>
471+
</div>
472+
<div className="grid md:grid-cols-2 gap-6 mb-8">
473+
<div className="rounded-xl overflow-hidden shadow-xl border border-slate-200 dark:border-slate-700 dark:bg-white">
474+
<LightboxImage
475+
src="/img/mcp-servers.webp"
476+
alt="MCP Servers with registered tools"
477+
width={600}
478+
height={400}
479+
className="w-full h-auto"
480+
/>
481+
</div>
482+
<div className="rounded-xl overflow-hidden shadow-xl border border-slate-200 dark:border-slate-700 dark:bg-white">
483+
<LightboxImage
484+
src="/img/tools-chat-gemini-image.webp"
485+
alt="Gemini image generation via MCP"
486+
width={600}
487+
height={400}
488+
className="w-full h-auto"
489+
/>
490+
</div>
491+
</div>
492+
<div className="grid md:grid-cols-3 gap-6 mb-8">
493+
<div className="rounded-xl overflow-hidden shadow-xl border border-slate-200 dark:border-slate-700 dark:bg-white">
494+
<LightboxImage
495+
src="/img/mcp-add.webp"
496+
alt="Add MCP Server"
497+
width={400}
498+
height={300}
499+
className="w-full h-auto"
500+
/>
501+
</div>
502+
<div className="rounded-xl overflow-hidden shadow-xl border border-slate-200 dark:border-slate-700 dark:bg-white">
503+
<LightboxImage
504+
src="/img/tools-exec.webp"
505+
alt="Execute MCP Tools"
506+
width={400}
507+
height={300}
508+
className="w-full h-auto"
509+
/>
510+
</div>
511+
<div className="rounded-xl overflow-hidden shadow-xl border border-slate-200 dark:border-slate-700 dark:bg-white">
512+
<LightboxImage
513+
src="/img/tools-exec-results.webp"
514+
alt="Tool Execution Results"
515+
width={400}
516+
height={300}
517+
className="w-full h-auto"
518+
/>
519+
</div>
520+
</div>
521+
<div className="rounded-xl overflow-hidden shadow-xl border border-slate-200 dark:border-slate-700 dark:bg-white">
522+
<LightboxImage
523+
src="/img/tools-chat-tetris.webp"
524+
alt="Interactive HTML results from MCP tools"
525+
width={1200}
526+
height={600}
527+
className="w-full h-auto"
528+
/>
529+
</div>
530+
</div>
531+
</div>
532+
455533
{/* Calculator UI Section */}
456534
<div id="calculator" className="w-full my-16 px-4">
457535
<div className="max-w-6xl mx-auto">
Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
---
2+
title: MCP Support
3+
description: The fast_mcp extension brings Model Context Protocol (MCP) support to `llms.py`, allowing you to extend LLM capabilities with a wide range of external tools and services.
4+
---
5+
6+
## Install
7+
8+
Add the [fast_mcp](https://github.com/llmspy/fast_mcp) extension to enable MCP support using the [FastMCP Python Framework](https://gofastmcp.com):
9+
10+
<ShellCommand>llms --add fast_mcp</ShellCommand>
11+
12+
## Features
13+
14+
- **Standardized Tool Access**: Connect to any MCP-compliant server (Node.js, Python, etc.) seamlessly.
15+
- **Dynamic Discovery**: Automatically discovers and registers all tools exposed by the configured servers.
16+
- **Parallel Discovery**: All configured MCP servers are discovered concurrently for fast startup times.
17+
- **Deterministic Registration**: Tools are registered in configuration order; if multiple servers provide tools with the same name, the later server in the config overrides earlier ones.
18+
19+
## Configuration
20+
21+
The extension manages MCP servers via a `mcp.json` configuration file in the following locations:
22+
23+
1. **User Config**: `~/.llms/user/default/fast_mcp/mcp.json`
24+
2. **Default Config**: The [ui/mcp.json](https://github.com/llmspy/fast_mcp/blob/main/ui/mcp.json) file bundled with the extension.
25+
26+
### Server Configuration Options
27+
28+
Each server in `mcpServers` supports the [mcp_config fields](https://gofastmcp.com/python-sdk/fastmcp-mcp_config):
29+
30+
| Field | Type | Required | Description |
31+
|---------------|--------|----------|-------------|
32+
| `command` | string | Yes | The executable to run (e.g., `npx`, `uvx`, `uv`, `python`) |
33+
| `args` | array | No | Command-line arguments passed to the command |
34+
| `env` | object | No | Environment variables to set for the server process |
35+
| `timeout` | number | No | Timeout in seconds for tool execution |
36+
| `description` | string | No | A human-readable description of the server |
37+
38+
### Environment Variable Substitution
39+
40+
To allow for flexible and shared configurations, you can reference environment variables using the `$` prefix in both `args` and `env` values, e.g:
41+
42+
- `$PWD` - Current working directory
43+
- `$GEMINI_API_KEY` - Any environment variable
44+
45+
**Selective Registration**: MCP servers are only registered if **all** referenced environment variables are available. If any variable is missing, that server is skipped during discovery. This allows you to maintain a single shared config with optional servers.
46+
47+
### Example `mcp.json`
48+
49+
```json
50+
{
51+
"mcpServers": {
52+
"filesystem": {
53+
"description": "Anthropic's MCP Server for secure filesystem operations",
54+
"command": "npx",
55+
"args": [
56+
"-y",
57+
"@modelcontextprotocol/server-filesystem",
58+
"$PWD"
59+
]
60+
},
61+
"git": {
62+
"description": "Provides tools to read, search, and manipulate Git repositories",
63+
"command": "uvx",
64+
"args": [
65+
"mcp-server-git",
66+
"--repository",
67+
"$PWD"
68+
]
69+
},
70+
"gemini-gen": {
71+
"description": "Gemini Image and Audio TTS generation",
72+
"command": "uvx",
73+
"args": ["gemini-gen-mcp"],
74+
"env": {
75+
"GEMINI_API_KEY": "$GEMINI_API_KEY"
76+
}
77+
}
78+
}
79+
}
80+
```
81+
82+
## Tools UI
83+
84+
Information about all discovered MCP servers and their registered tools is available in the **Tools** page under the **MCP Servers** section. By default only Anthropic's [Filesystem MCP Server](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem) is configured.
85+
86+
<Screenshot src="/img/mcp-servers-empty.webp" />
87+
88+
You can either edit the `mcp.json` file directly to add your own servers or use the UI to **Add**, **Edit**, or **Delete** servers or use the **Copy** button to copy an individual server's configuration.
89+
90+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
91+
<Screenshot src="/img/mcp-add.webp" />
92+
<Screenshot src="/img/mcp-edit.webp" />
93+
</div>
94+
95+
After adding servers and restarting the application, the Tools page will display all discovered servers and their registered tools.
96+
97+
<Screenshot src="/img/mcp-servers.webp" />
98+
99+
## Executing Tools
100+
101+
Fundamentally MCP Servers are a standardized way to expose external tools to LLMs. Once MCP servers are configured and their tools discovered, LLMs can invoke them during chat sessions like any other tool.
102+
103+
An MCP Tools are grouped under their tool name, making it easy to identify, enable or disable them for each chat session. You can execute tools directly from the Tools page by clicking the **Execute** button next to each tool, filling out the required parameters in the dialog, and clicking **Run Tool**.
104+
105+
<Screenshot src="/img/tools-exec.webp" />
106+
107+
#### Results
108+
109+
Upon execution, the tool's output is displayed in a results dialog with specific rendering based on the output type:
110+
111+
<Screenshot src="/img/tools-exec-results.webp" />
112+
113+
### Chat Sessions
114+
115+
When included, the same tools can be also be invoked indirectly by LLMs during chat sessions:
116+
117+
<Screenshot src="/img/tools-chat-gemini-image.webp" />
118+
119+
### HTML Results
120+
121+
Tool outputs containing HTML content are rendered within an `<iframe>` within the results dialog which safely sandboxes the content whilst letting you interact with it and play games like Tetris from the arguments or output of a tool call:
122+
123+
<Screenshot src="/img/tools-chat-tetris.webp" />
124+
125+
### Top Panel Tools Selector
126+
127+
- **One-Click Enable/Disable**: Use the new Tool Selector in the chat interface (top-right) to control which tools are available to the model
128+
- **Granular Control**: Select **all**, **none** per group or globally, or individual tools for each chat session
129+
130+
<Screenshot src="/img/llms-tools-top.webp" />
131+
132+
When tools are used within AI Requests a special UI is used to render tool calls and responses.
133+
134+
135+
## How It Works
136+
137+
### Discovery Phase (Startup)
138+
139+
1. The extension loads `mcp.json` and filters out servers with missing environment variables
140+
2. All valid servers are discovered **in parallel**
141+
3. Each server is started, queried for its available tools via `list_tools()`
142+
4. Tools are registered in **config order** (deterministic - later servers override earlier ones for duplicate tool names)
143+
144+
### Execution Phase (Runtime)
145+
146+
When a tool is invoked:
147+
148+
1. A **fresh connection** is established to the appropriate MCP server
149+
2. The tool is executed with the provided arguments (configurable timeout, default 60s)
150+
3. The connection is closed after execution
151+
152+
This fresh-connection-per-execution approach ensures reliability and isolation between tool calls.
153+
154+
## Environment Variables
155+
156+
| Variable | Default | Description |
157+
|----------|---------|-------------|
158+
| `MCP_TIMEOUT` | `60.0` | Timeout in seconds for MCP tool execution |
159+
| `MCP_LOG_ERRORS` | `0` | Set to `1` to enable detailed stderr logging for tool execution |
160+
161+
## Troubleshooting
162+
163+
If tools are not appearing:
164+
165+
- Check that the MCP server command is accessible in your `PATH`
166+
- Verify that all required environment variables are exported
167+
- Enable detailed error logging with `MCP_LOG_ERRORS=1`
168+
- Review the logs in the `logs/` directory for specific error messages
169+
170+
If tools are timing out:
171+
172+
- Increase the timeout with `MCP_TIMEOUT=120` (or higher value in seconds)
173+
174+
### Log Files
175+
176+
Logs are stored in the extension's `logs/` directory:
177+
178+
| Log File | Description |
179+
|----------|-------------|
180+
| `{server}_discovery.stderr.log` | Stderr output from server during discovery phase |
181+
| `{tool_name}.stderr.log` | Stderr output from tool execution (when `MCP_LOG_ERRORS=1`) |
182+
183+
## Requirements
184+
185+
- Python 3.9+ (for dict insertion order guarantee)
186+
- [fastmcp](https://pypi.org/project/fastmcp/) - MCP client library

0 commit comments

Comments
 (0)