blog: add 5 tips for building MCP Apps that work #6855

blackgirlbytes · 2026-01-30T22:28:07Z

New blog post co-authored with Matthew Wang (MCPJam)
Add Matt Wang as new author in authors.yml
Covers: MCP Apps tips host environment adaptation, data flow control, loading/error states, model sync, and tool visibility

Type of Change

- New blog post co-authored with Matthew Wang (MCPJam) - Add Matt Wang as new author in authors.yml - Covers: host environment adaptation, data flow control, loading/error states, model sync, and tool visibility

github-actions · 2026-01-30T22:30:56Z

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-01-30 22:54 UTC

Copilot

Pull request overview

Adds a new blog post covering five practical tips for building MCP Apps, including supporting diagrams/screenshots and a new co-author entry.

Changes:

Add a new blog post: “5 Tips for Building MCP Apps That Work”.
Add Matthew Wang as a blog author in authors.yml.
Add new blog images used by the post (banner, flow diagram, loading state screenshot).

Reviewed changes

Copilot reviewed 2 out of 6 changed files in this pull request and generated 8 comments.

File	Description
documentation/blog/authors.yml	Adds new `matt` author profile for the co-authored post.
documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md	New blog content, code examples, and social metadata for the post.
documentation/blog/2026-01-30-5-tips-building-mcp-apps/loading-state.png	New image asset referenced by the post.

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md

documentation/blog/authors.yml

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md

Co-authored-by: Copilot <[email protected]>

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md

Copilot

Pull request overview

Copilot reviewed 2 out of 6 changed files in this pull request and generated 2 comments.

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md

documentation/blog/authors.yml

Co-authored-by: Copilot <[email protected]>

Copilot

Pull request overview

Copilot reviewed 2 out of 6 changed files in this pull request and generated 3 comments.

Copilot · 2026-01-30T22:52:01Z

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md

+import { useApp } from "@modelcontextprotocol/ext-apps/react";
+
+function CocktailApp() {
+  const [cocktail, setCocktail] = useState<CocktailData | null>(null);
+


The loading-state React example uses useState but doesn't import it, so the snippet as written won't run; add useState to the React import (or qualify it) to keep the example self-contained.

Copilot · 2026-01-30T22:52:01Z

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md

+      ui: { resourceUri: "ui://cocktail/cocktail-recipe-widget.html" },
+      visibility: ["model", "app"],


In this tool definition, visibility is placed at _meta.visibility, but elsewhere in the post it is nested under _meta.ui.visibility; hosts in this repo read UI metadata from _meta.ui.*, so move visibility under the ui object for consistency and to match how the host discovers UI metadata.

Suggested change

ui: { resourceUri: "ui://cocktail/cocktail-recipe-widget.html" },

visibility: ["model", "app"],

ui: { resourceUri: "ui://cocktail/cocktail-recipe-widget.html", visibility: ["model", "app"] },

Copilot · 2026-01-30T22:52:02Z

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md

+      return {
+        content: [
+          { type: "text", text: `Could not load cocktail` },
+        ],
+        error


The catch block returns the raw error object from the backend to both the model and the MCP App view, which can expose internal details such as stack traces, database errors, or configuration information to end users. An attacker can trigger failing requests (e.g., invalid IDs or crafted payloads) to harvest these internal error messages and use them to map the backend or discover weaknesses. Instead, return a generic, user-safe error message and log the detailed error server-side, ensuring the tool result only contains sanitized error information.

Suggested change

return {

content: [

{ type: "text", text: `Could not load cocktail` },

],

error

// Log the detailed error server-side instead of returning it to the client.

console.error("Failed to load cocktail", error);

return {

content: [

{ type: "text", text: `Could not load cocktail` },

],

error: {

message: "Failed to load cocktail.",

},

* 'main' of github.com:block/goose: fix(ui): preserve working directory when creating new chat (#6789) blog: add 5 tips for building MCP Apps that work (#6855) docs: session isolation (#6846)

* main: fix: fixed the broken release (#6887) feat: Streamable HTTP transport for ACP + goose-acp usage (#6741) Add Laminar for Observability (#6514) Missed a couple of places that hard code J for the newline key (#6853) fix(ui): preserve working directory when creating new chat (#6789) blog: add 5 tips for building MCP Apps that work (#6855) docs: session isolation (#6846) upgrade react and electron to latest (#6845) Fix: Small update UI settings prompt injection (#6830) Remove autogenerated .gooseignore files that don't belong in repo (#6824) Fix case-insensitive matching for builtin extension names (#6825) docs: cli newline keybinding (#6823) Update version to 1.22.0 (#6821) Refactor: move persisting extension to session outside of route (#6685) acp: load configured extensions and refactor tests (#6803)

blog: add 5 tips for building MCP Apps that work

0482326

- New blog post co-authored with Matthew Wang (MCPJam) - Add Matt Wang as new author in authors.yml - Covers: host environment adaptation, data flow control, loading/error states, model sync, and tool visibility

blackgirlbytes requested a review from a team as a code owner January 30, 2026 22:28

Copilot AI review requested due to automatic review settings January 30, 2026 22:28

Copilot started reviewing on behalf of blackgirlbytes January 30, 2026 22:28 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

blackgirlbytes added 2 commits January 30, 2026 17:34

add canonical link to MCPJam original post

306f90b

fix: update social media image URLs with hashed filename

f7a2d3c

Copilot AI review requested due to automatic review settings January 30, 2026 22:37

Apply suggestion from @Copilot

c205b49

Co-authored-by: Copilot <[email protected]>

Copilot started reviewing on behalf of blackgirlbytes January 30, 2026 22:38 View session

angiejones approved these changes Jan 30, 2026

View reviewed changes

blackgirlbytes commented Jan 30, 2026

View reviewed changes

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md Outdated Show resolved Hide resolved

Apply suggestions from code review

b1005a1

Copilot AI reviewed Jan 30, 2026

View reviewed changes

documentation/blog/2026-01-30-5-tips-building-mcp-apps/index.md Show resolved Hide resolved

documentation/blog/authors.yml Show resolved Hide resolved

Apply suggestions from code review

e911b61

Co-authored-by: Copilot <[email protected]>

Copilot AI review requested due to automatic review settings January 30, 2026 22:47

Copilot started reviewing on behalf of blackgirlbytes January 30, 2026 22:47 View session

blackgirlbytes merged commit 6f9eadd into main Jan 30, 2026
24 checks passed

blackgirlbytes deleted the blog/5-tips-building-mcp-apps branch January 30, 2026 22:50

Copilot AI reviewed Jan 30, 2026

View reviewed changes

github-actions bot mentioned this pull request Feb 3, 2026

chore(release): release version 1.23.0 (minor) #6906

Open

		ui: { resourceUri: "ui://cocktail/cocktail-recipe-widget.html" },
		visibility: ["model", "app"],

blog: add 5 tips for building MCP Apps that work #6855

blog: add 5 tips for building MCP Apps that work #6855

Uh oh!

Conversation

blackgirlbytes commented Jan 30, 2026 • edited by angiejones Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Change

Uh oh!

github-actions bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

blackgirlbytes commented Jan 30, 2026 •

edited by angiejones

Loading

github-actions bot commented Jan 30, 2026 •

edited

Loading