tsquare wireframes
Server Details
Draws UI wireframes from a small text language: multi-screen boards with notes and flow arrows.
- Status
- Healthy
- Last Tested
- Transport
- Streamable HTTP · MCP 2025-11-25
- URL
- Repository
- tsquare-js/tsquare
- GitHub Stars
- 7
- ChatGPT
- –
- Claude
- –
TDQS
Scored across 3 tools
Each tool serves a clearly different stage of the workflow: wireframe_guide is documentation/format reference, render_wireframe validates and produces a visual, and share_wireframe produces links. An agent can easily tell which to call for which need, with no overlap in purpose.
render_wireframe and share_wireframe follow a consistent verb_noun pattern, but wireframe_guide reverses the order into a noun phrase. It's still readable and unambiguous, just a minor deviation from the pattern.
Three tools is a small but well-scoped set for a narrow workflow (learn format, validate/render, share). Each tool earns its place, though the surface is on the thin side with no explicit write/save operation.
The core lifecycle is covered: read the guide, validate and render text, and generate shareable/edit/image links that embed the full wireframe. Gaps are minor, such as no tool to fetch or re-render an existing wireframe from a shared link or to manage a saved library of wireframes.
Available Tools
3 toolsrender_wireframeRender a wireframeARead-onlyInspect
Check tsquare wireframe text and render it. Returns a PNG of the board so you can see it, or the problems by line number (with the valid options) if the text isn't valid. Fix every problem and call it again.
| Name | Required | Description | Default |
|---|---|---|---|
| text | Yes | The wireframe in tsquare text (a ```tsquare code fence around it is fine). | |
| flows | No | Draw flow arrows (default true). false leaves them out, as if there were no flow lines. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, and the description adds real value on top: it discloses both outcomes (a PNG on success, per-line problems plus the valid options on failure) and the expected retry behavior. It does not mention cost, size limits, or latency, which keeps it short of a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences, front-loaded with the action and immediately followed by the return contract and the retry instruction. Every sentence carries information an agent needs; there is no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description does the necessary work of explaining both return shapes (PNG vs. line-numbered problems), which is the main gap it needed to close. It is complete enough to call correctly, though a note on how to obtain valid tsquare syntax would round it out.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so both `text` and `flows` are already documented in the schema. The description adds only the framing that the input is tsquare text to be validated and rendered; it says nothing extra about the `flows` toggle, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and resource ("Check ... and render" the tsquare wireframe text) and names the concrete artifact produced (a PNG of the board). It is clear what the tool does, but it never mentions its siblings (wireframe_guide, share_wireframe), so differentiation is left to the agent.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives a clear usage loop: call it, and if the text is invalid, fix every reported problem and call again. That is actionable guidance for the main workflow, though it offers no explicit when-not or pointer to wireframe_guide for learning tsquare syntax.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
wireframe_guidetsquare language guideARead-onlyInspect
How to write a tsquare wireframe: the text format, the rules, a worked example and every component with its props. Call it once before writing your first wireframe.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so the safety profile is covered by structured data. The description adds real value by enumerating the returned content (format, rules, example, component props), which is important because there is no output schema, but it says nothing about size, caching, or whether the guide is versioned.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two compact sentences with the payload description front-loaded and the call instruction last. No filler, though the colon-separated content list is slightly dense rather than structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a no-parameter, read-only documentation tool, the definition covers what the agent gets back and when to fetch it, compensating for the absent output schema. Minor gaps around response size or staleness keep it below the top mark.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters and schema coverage is 100%, so there is nothing for the description to disambiguate. Baseline of 3 applies; no parameter claims are made or needed.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states exactly what the tool returns: the tsquare text format, its rules, a worked example, and every component with its props. That is specific enough to distinguish this documentation tool from the action siblings render_wireframe and share_wireframe, though it never names those siblings explicitly.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
"Call it once before writing your first wireframe" gives a clear trigger condition and implicitly bounds frequency with "once." It stops short of explicit exclusions (for example, whether to re-call when a component name is forgotten), but the when-to-use signal is unambiguous.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
3 tool updates
- First observed
render_wireframe - First observed
share_wireframe - First observed
wireframe_guide
Related MCP Connectors
Turn a flow written as text into a step-through diagram you can share, present or embed.
Draw diagrams, build HTML pages and write Markdown in a live editor the user sees.
Create, edit and organize hand-drawn diagrams (flowcharts, ER, architecture) from any AI agent.
Create flowcharts, mind maps, sequence/ER/UML diagrams and charts as editable, presentable boards.
Related MCP Servers
- AlicenseAqualityCmaintenanceRenders diagram-as-code to PNG files on your disk, and also provides text-art previews and syntax validation, all locally without a browser or network.410 npmMIT
- AlicenseNot gradedqualityDmaintenanceEnables creating and iterating on animated SVG diagrams from text input, photos of sketches, and YAML specifications, with support for shapes, connections, SMIL animations, and file output.1MIT
- AlicenseNot gradedqualityBmaintenanceEnables AI assistants and coding tools to turn a few lines describing a system into clean, hand-sketched architecture diagrams in a consistent style, saving them as SVG or PNG files. Supports themes, automatic product icons, groups, sequence diagrams and cloud icon packs.1MIT
- AlicenseNot gradedqualityDmaintenanceGenerates editable Excalidraw diagram files from natural language descriptions of systems and architectures.1MIT
Glama MCP Gateway
Add one secure layer between your agents and this server.