|
| 1 | +""" |
| 2 | +Shot 4: The @mcp.view_tool() Way — built-in chuk-mcp-server decorator. |
| 3 | +
|
| 4 | +One decorator handles all the MCP Apps plumbing: |
| 5 | + - Builds _meta.ui with resourceUri and viewUrl |
| 6 | + - Sets readOnlyHint=True |
| 7 | + - Auto-registers the ui:// resource (fetches HTML from viewUrl CDN) |
| 8 | + - Enables the experimental MCP Apps capability |
| 9 | +
|
| 10 | +No HTML. No JavaScript. No manual resource registration. |
| 11 | +You just return content + structuredContent. |
| 12 | +
|
| 13 | +This is the chuk-mcp-server equivalent of manual_server.py. |
| 14 | +
|
| 15 | +Run locally: uv run examples/chuk_manual_server.py |
| 16 | +""" |
| 17 | + |
| 18 | +from chuk_mcp_server import ChukMCPServer |
| 19 | + |
| 20 | +mcp = ChukMCPServer( |
| 21 | + name="language-stats", |
| 22 | + version="1.0.0", |
| 23 | + description="MCP Apps with @mcp.view_tool()", |
| 24 | +) |
| 25 | + |
| 26 | + |
| 27 | +@mcp.view_tool( |
| 28 | + resource_uri="ui://language-stats/chart", |
| 29 | + view_url="https://chuk-mcp-ui-views.fly.dev/chart/v1", |
| 30 | + description="Show programming language popularity as an interactive chart.", |
| 31 | +) |
| 32 | +async def show_chart(chart_type: str = "bar") -> dict: |
| 33 | + """Show programming language popularity as an interactive chart. |
| 34 | + chart_type: bar, pie, line, doughnut, or area.""" |
| 35 | + |
| 36 | + data = { |
| 37 | + "Python": 31.0, |
| 38 | + "JavaScript": 25.2, |
| 39 | + "Rust": 18.1, |
| 40 | + "Go": 14.3, |
| 41 | + "TypeScript": 11.4, |
| 42 | + } |
| 43 | + |
| 44 | + return { |
| 45 | + # What the LLM sees — text summary for reasoning |
| 46 | + "content": [ |
| 47 | + { |
| 48 | + "type": "text", |
| 49 | + "text": f"Programming language popularity ({chart_type} chart).", |
| 50 | + } |
| 51 | + ], |
| 52 | + # What the UI sees — full data, hydrates the chart component |
| 53 | + "structuredContent": { |
| 54 | + "type": "chart", |
| 55 | + "version": "1.0", |
| 56 | + "title": "Programming Language Popularity (2026)", |
| 57 | + "chartType": chart_type, |
| 58 | + "data": [ |
| 59 | + { |
| 60 | + "label": "Usage %", |
| 61 | + "values": [{"label": lang, "value": pct} for lang, pct in data.items()], |
| 62 | + } |
| 63 | + ], |
| 64 | + }, |
| 65 | + } |
| 66 | + |
| 67 | + |
| 68 | +if __name__ == "__main__": |
| 69 | + mcp.run() |
0 commit comments