Update GitHub demo components with new model and enhanced markdown rendering

docs/app/demo/github/components/ConversationPanel/ConversationPanel.css

@@ -125,6 +125,29 @@
   font-family: var(--openui-font-body);
 }
 
+.conv-assistant-bubble .openui-markdown-renderer {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.conv-assistant-bubble .openui-markdown-renderer p {
+  margin: 0 0 var(--openui-space-xs) 0;
+}
+
+.conv-assistant-bubble .openui-markdown-renderer p:last-child {
+  margin-bottom: 0;
+}
+
+.conv-assistant-bubble .openui-markdown-renderer ul,
+.conv-assistant-bubble .openui-markdown-renderer ol {
+  margin: 0 0 var(--openui-space-xs) 0;
+  padding-left: var(--openui-space-m-l);
+}
+
+.conv-assistant-bubble .openui-markdown-renderer li {
+  margin-bottom: var(--openui-space-3xs);
+}
+
 /* Code badge */
 .conv-code-badge {
   display: inline-flex;

docs/app/demo/github/components/ConversationPanel/ConversationPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { IconButton } from "@openuidev/react-ui";
+import { MarkDownRenderer } from "@openuidev/react-ui/MarkDownRenderer";
 import { ChevronRight, MessageSquare, Send, Square } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { ChatMessage } from "../../constants";
@@ -80,7 +81,11 @@ export function ConversationPanel({
             ) : (
               <div className="conv-assistant">
                 {/* Text response */}
-                {msg.text && <div className="conv-assistant-bubble">{msg.text}</div>}
+                {msg.text && (
+                  <div className="conv-assistant-bubble">
+                    <MarkDownRenderer textMarkdown={msg.text} />
+                  </div>
+                )}
 
                 {/* Dashboard updated badge */}
                 {msg.hasCode && <span className="conv-code-badge">✓ dashboard updated</span>}
@@ -98,7 +103,9 @@ export function ConversationPanel({
             <div className="conv-assistant">
               {/* Streaming text or thinking indicator */}
               {streamingText ? (
-                <div className="conv-assistant-bubble">{streamingText}</div>
+                <div className="conv-assistant-bubble">
+                  <MarkDownRenderer textMarkdown={streamingText} />
+                </div>
               ) : (
                 <div className="conv-thinking">
                   {elapsed

docs/app/demo/github/components/GitHubConnect/GitHubConnect.tsx

@@ -25,7 +25,7 @@ type GitHubConnectProps = {
   onConnectAndPrompt: (username: string, prompt: string) => void;
 };
 
-type DeveloperTone = "peach" | "mint" | "violet" | "rose";
+type DeveloperTone = "peach" | "mint" | "violet" | "rose" | "pink" | "red";
 
 type PickerOption = {
   value: string;
@@ -46,11 +46,11 @@ const STARTER_ICON_MAP: Record<GitHubStarterIconKey, LucideIcon> = {
 };
 
 const DEMO_USERS = [
-  { username: "torvalds", tone: "peach" },
-  { username: "yyx990803", tone: "mint" },
-  { username: "rauchg", tone: "violet" },
-  { username: "gaearon", tone: "rose" },
-  { username: "ctate", tone: "mint" },
+  { username: "garrytan", tone: "peach" },
+  { username: "bradfitz", tone: "mint" },
+  { username: "yyx990803", tone: "violet" },
+  { username: "ctate", tone: "red" },
+  { username: "torvalds", tone: "pink" },
 ] as const satisfies ReadonlyArray<{ username: string; tone: DeveloperTone }>;
 
 const DEVELOPER_OPTIONS: PickerOption[] = DEMO_USERS.map((user) => ({

docs/app/demo/github/constants.ts

@@ -1,8 +1,8 @@
 export type Theme = "system" | "light" | "dark";
 export type Status = "idle" | "streaming" | "done" | "error";
 
-export const GITHUB_DEMO_MODEL = "openai/gpt-5.4-mini";
-export const GITHUB_DEMO_MODEL_LABEL = "GPT-5.4 Mini";
+export const GITHUB_DEMO_MODEL = "anthropic/claude-sonnet-4-6";
+export const GITHUB_DEMO_MODEL_LABEL = "Claude Sonnet 4.6";
 
 export type GitHubStarterIconKey =
   | "commit-activity"

docs/app/demo/github/github/prompt-config.ts

@@ -16,14 +16,17 @@ After the openui-lang code block, write a brief friendly message describing what
 
 export const GITHUB_TOOL_EXAMPLES: string[] = [
   `Example — GitHub Profile Dashboard (PREFERRED pattern):
-root = Stack([header, kpiRow, chartsRow, repoSection])
+root = Stack([header, globalControls, kpiRow, chartsRow, repoSection])
 header = CardHeader("GitHub Dashboard", "Your developer profile at a glance")
 $sortBy = "stars"
 $language = "all"
 profile = Query("get_profile", {}, {login: "", name: "", bio: "", avatar_url: "", public_repos: 0, followers: 0, following: 0, created_at: ""})
 repos = Query("get_repos", {sort: $sortBy, language: $language}, {rows: []})
 languages = Query("get_languages", {}, {rows: []})
 events = Query("get_events", {}, {rows: [], summary: {total: 0, push: 0, pr: 0, issues: 0, reviews: 0}})
+globalControls = Stack([langFilter, refreshBtn], "row", "m", "end")
+langFilter = FormControl("Language", Select("language", [SelectItem("all", "All"), SelectItem("TypeScript", "TypeScript"), SelectItem("Python", "Python"), SelectItem("JavaScript", "JavaScript"), SelectItem("C", "C"), SelectItem("Go", "Go"), SelectItem("Rust", "Rust")], null, null, $language))
+refreshBtn = Button("Refresh", Action([@Run(repos), @Run(languages), @Run(events)]), "secondary")
 kpiRow = Stack([reposKpi, starsKpi, followersKpi, activityKpi], "row", "m", "stretch", "start", true)
 reposKpi = Card([TextContent("Repositories", "small"), TextContent("" + profile.public_repos, "large-heavy")])
 starsKpi = Card([TextContent("Total Stars", "small"), TextContent("" + @Sum(repos.rows.stars), "large-heavy")])
@@ -32,11 +35,9 @@ activityKpi = Card([TextContent("Recent Events", "small"), TextContent("" + even
 chartsRow = Stack([langCard, activityCard], "row", "m")
 langCard = Card([CardHeader("Languages", "By bytes of code"), PieChart(languages.rows.language, languages.rows.bytes, "donut")])
 activityCard = Card([CardHeader("Activity Mix"), BarChart(["Push", "PR", "Issues", "Reviews"], [Series("Events", [events.summary.push, events.summary.pr, events.summary.issues, events.summary.reviews])])])
-repoSection = Card([CardHeader("Repositories"), controls, repoTable])
-controls = Stack([langFilter, sortFilter, refreshBtn], "row", "m", "end")
-langFilter = FormControl("Language", Select("language", [SelectItem("all", "All"), SelectItem("TypeScript", "TypeScript"), SelectItem("Python", "Python"), SelectItem("JavaScript", "JavaScript"), SelectItem("C", "C"), SelectItem("Go", "Go"), SelectItem("Rust", "Rust")], null, null, $language))
+repoSection = Card([CardHeader("Repositories"), sortControl, repoTable])
+sortControl = Stack([sortFilter], "row", "m", "end")
 sortFilter = FormControl("Sort", Select("sortBy", [SelectItem("stars", "Stars"), SelectItem("forks", "Forks"), SelectItem("updated", "Recent")], null, null, $sortBy))
-refreshBtn = Button("Refresh", Action([@Run(repos), @Run(languages), @Run(events)]), "secondary")
 sorted = @Sort(repos.rows, $sortBy, "desc")
 repoTable = Table([Col("Name", sorted.name), Col("Language", @Each(sorted, "r", Tag(r.language, null, "sm", r.language == "TypeScript" ? "info" : r.language == "Python" ? "success" : "neutral"))), Col("Stars", sorted.stars, "number"), Col("Forks", sorted.forks, "number")])`,
 
@@ -78,6 +79,7 @@ export const GITHUB_ADDITIONAL_RULES: string[] = [
   "get_contributors({repo}) returns: rows[].{login, avatar_url, total_commits}. Needs repo name.",
   "Bookmark tools: save_bookmark({repo, note?, tag?}), get_bookmarks({}), delete_bookmark({repo}). Use Mutation + @Run pattern.",
   "For dashboards, ALWAYS include: 3+ KPI cards with @Sum/@Count, 2+ chart types, 1 data table, 1+ interactive filter ($variable + Select)",
+  "Place GLOBAL filters (language, date range, refresh) at the dashboard level — between header and KPI cards — so they visibly affect all widgets below. Place LOCAL filters (sort, search) inside their specific widget Card, directly above the component they control.",
   "Use @Sum(repos.rows.stars), @Count(repos.rows), @Avg, @Round on Query results for KPIs — NEVER hardcode numbers",
   "Use PieChart for language breakdowns (donut variant), BarChart for comparisons, LineChart for trends over time",
   "Rate limit: 60 req/hr per visitor. Prefer get_repos (1 API call) over per-repo endpoints (get_commit_activity, get_star_history, get_contributors)",

docs/app/demo/github/page.tsx

@@ -668,6 +668,9 @@ export default function GitHubDemoPage() {
                           event.humanFriendlyMessage ||
                           "";
                         if (text) send(text);
+                      } else if (event.type === "open_url") {
+                        const url = event.params?.["url"] as string | undefined;
+                        if (url) window.open(url, "_blank");
                       }
                     }}
                   />

docs/components/tweet-embed.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Script from "next/script";
 import { useTheme } from "next-themes";
+import Script from "next/script";
 import { useEffect, useRef, useState } from "react";
 
 const EMBED_MAX_WIDTH = 550;