MCP Server Part 7: get_dash_component tool and callback tool execution

[KoolADE85]

Summary

• Wires up the full tool pipeline following the same pattern as resources:

  • list_tools() builds the tool list from all registered tool providers
  • call_tool(name, args) routes LLM calls to the appropriate callback function

• Adds a static tool get_dash_component which allows LLMs to query a specific prop for a given ID.

Manual verification:

from dash import Dash, html, dcc, Input, Output
import json

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown(id="city", options=["NYC", "LA"], value="NYC"),
    dcc.Graph(id="chart"),
    html.Div(id="summary"),
])

@app.callback(Output("chart", "figure"), Input("city", "value"))
def update_chart(city):
    return {"data": [], "layout": {"title": city}}

@app.callback(Output("summary", "children"), Input("city", "value"))
def update_summary(city):
    return f"Showing data for {city}"

with app.server.app_context():
    from dash.mcp.primitives.tools import list_tools, call_tool

    # List all tools — should include update_chart, update_summary, get_dash_component
    tools = list_tools()
    for tool in tools.tools:
        print(f"- {tool.name}")

    # Inspect a component — shows it's input to both callbacks
    result = call_tool("get_dash_component", {"component_id": "city"})
    print(json.dumps(json.loads(result.content[0].text), indent=2))
    # "value" property should list both `update_chart` and `update_summary` in input_to_tool

    # Execute a callback via its tool
    result = call_tool("update_summary", {"city": "LA"})
    print(result.content[0].text)  # Shows "Showing data for LA"

[github-actions]

Thank you for your contribution to Dash! 🎉

This PR is exempt from requiring a linked issue due to its labels.

[camdecoster]

I made a few suggestions. The one to pay attention to is the loop going through callbacks/inputs/outputs. Let me know what you think.

[camdecoster]

Suggested change

	value = callback_map.get_initial_value(f"{comp_id}.{prop_name}")
	id_and_prop = f"{comp_id}.{prop_name}"
	value = callback_map.get_initial_value(id_and_prop)

[camdecoster]

Suggested change

id_and_prop = f"{comp_id}.{prop_name}"

[camdecoster]

Suggested change

	raise ValueError("component_id is required")
	return CallToolResult(
	content=[TextContent(type="text", text="component_id is required")],
	isError=True,
	)

[camdecoster]

Suggested change

	if component is None:
	callback_map = get_app().mcp_callback_map
	callback_map = get_app().mcp_callback_map
	if component is None:

[camdecoster]

Suggested change

callback_map = get_app().mcp_callback_map

[camdecoster]

This could get expensive for apps with a lot of callbacks, inputs, outputs. Is there a way to create and use an index for looking this up?

[KoolADE85]

Great point! The dash renderer actually implements such a mapping (but in JS obviously). I'll do the same on the python side.