Add example apps page to docs #615
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
I like the design a lot, but I'm a bit skeptical about the order. Things that come to mind as challenges to maintain this page:
|
| const languages = [ | ||
| "JavaScript", | ||
| "Python", | ||
| "TypeScript", | ||
| "Java", | ||
| "Go", | ||
| "Rust", | ||
| ]; | ||
| const frameworks = [ | ||
| "Langchain", | ||
| "mastra", | ||
| "CrewAI", | ||
| "LangGraph", | ||
| "OpenAI", | ||
| "Anthropic", | ||
| "Next.js", | ||
| ]; | ||
| const integrations = [ | ||
| "Slack", | ||
| "GitHub", | ||
| "Gmail", | ||
| "Discord", | ||
| "Notion", | ||
| "Linear", | ||
| "Jira", | ||
| "Weaviate", | ||
| "Email", | ||
| "Stytch", | ||
| ]; |
There was a problem hiding this comment.
Should we maintain this component in the design system repo instead? @sdserranog what do you think?
There was a problem hiding this comment.
I based this and these on the MCP Servers page's components. They're all a liiiiittle bit different and in flux. Would love to commit to them!
app/en/home/examples/page.mdx
Outdated
| <SampleAppCard | ||
| title="Archer" | ||
| description="A bot that can act on your behalf." | ||
| href="https://github.com/ArcadeAI/ArcadeSlackAgent" | ||
| image="/images/logo/arcade.png" | ||
| tags={["JavaScript", "Slack"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Summarize YouTube Podcasts in Slack" | ||
| description="A Slack bot that extracts and summarizes YouTube transcripts in Weaviate, perfect for AI podcasts." | ||
| href="https://github.com/dforwardfeed/slack-AIpodcast-summaries" | ||
| image="/images/logo/arcade.png" | ||
| tags={["Python", "Langchain", "Slack", "Weaviate"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Baseball dugout" | ||
| description="An AI-powered scout that researches players, generates reports, and shares them via email—all from a single conversation." | ||
| href="https://github.com/ArcadeAI/baseball-dugout" | ||
| image="/images/logo/arcade.png" | ||
| tags={["JavaScript", "GitHub", "Email"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Arcade Custom Verifier Next" | ||
| description="Custom user verification implementation for Next.js applications using Arcade." | ||
| href="https://github.com/ArcadeAI/arcade-custom-verifier-next" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript", "Next.js"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Agent Kitchen Sink" | ||
| description="Comprehensive TypeScript example showcasing various agent capabilities and integrations." | ||
| href="https://github.com/ArcadeAI/agent-kitchen-sink-typescript" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Agency Tutorial with Stytch" | ||
| description="Tutorial demonstrating agency patterns with Stytch authentication integration." | ||
| href="https://github.com/ArcadeAI/agency-tutorial-stytch" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript", "Stytch"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Framework Showdown" | ||
| description="Comparison and examples of different AI agent frameworks and their capabilities." | ||
| href="https://github.com/ArcadeAI/framework-showdown" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Agent Templates" | ||
| description="Collection of ready-to-use agent templates for various use cases and patterns." | ||
| href="https://github.com/ArcadeAI/agent-templates" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="Megaforce" | ||
| description="Powerful multi-agent coordination system for complex task orchestration." | ||
| href="https://github.com/ArcadeAI/megaforce" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="CLI Agent Template" | ||
| description="Command-line interface template for building agents with terminal interactions." | ||
| href="https://github.com/ArcadeAI/cli-agent-template" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript"]} | ||
| blank | ||
| /> | ||
| <SampleAppCard | ||
| title="OpenAI SDK MCP Gateway" | ||
| description="Gateway implementation connecting OpenAI SDK with MCP (Model Context Protocol) servers." | ||
| href="https://github.com/ArcadeAI/openaisdk-mcpgateway" | ||
| image="/images/logo/arcade.png" | ||
| tags={["TypeScript", "OpenAI"]} | ||
| blank | ||
| /> |
There was a problem hiding this comment.
Same question about metadata and the design system repo, where should these live? @sdserranog
Co-authored-by: Mateo Torres <[email protected]>
|
Good feedback, @torresmateo. I've never seen a "complexity pill"—do you have any examples? As it is, I think people will approach these based on what they're trying to do, so complexity isn't going to be an important factor in that (otherwise, they'll head to quickstarts). It might be good to add a "Last updated" tag to these. I don't know we would do that! But we could start with a "date added" tag (something we can know) and order them by that. People usually want "newest first." Right now, there aren't enough that I'm worried about organizing them. I think usage and additional content will have more impact on that than hypothesizing |
- Add optional date prop to display creation dates - Update styling to match MCP Server tiles exactly - Add color-coded tags for languages (green), frameworks (blue), and integrations (yellow) - Remove thumbnail images and motion animations for cleaner design - Improve responsive layout and hover effects 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add 8 new sample applications from ArcadeAI repositories - Include creation dates fetched from GitHub API for all apps - Sort examples chronologically (newest first) - Add "Submit your app" section with clear guidelines for community contributions - Update grid layout to 2-column responsive design - Enhance tag categorization for new frameworks and integrations New apps include: - OpenAI SDK MCP Gateway (Nov 2025) - Agent Kitchen Sink (Nov 2025) - Arcade Custom Verifier Next (Aug 2025) - Agency Tutorial with Stytch (Aug 2025) - CLI Agent Template (Jul 2025) - Megaforce (Jul 2025) - Framework Showdown (May 2025) - Agent Templates (Dec 2025) - Baseball dugout (Dec 2025) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Create GitHub Actions workflow to update example app dates weekly - Auto-discover repositories from MDX file, no hardcoded lists needed - Fetch creation dates from GitHub API for accurate information - Create pull requests for review when dates change - Self-maintaining system - adding new SampleAppCard automatically includes it Workflow features: - Runs every Monday at 00:00 UTC + manual dispatch - Parses SampleAppCard components for GitHub URLs - Updates dates based on repository creation timestamps - Sorts apps chronologically after updates - Creates descriptive PRs with change summaries Script capabilities: - Regex-based MDX parsing for repository discovery - GitHub API integration with proper authentication - Robust error handling and logging - Smart date formatting (MMM YYYY) - Safe file updates with change detection 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| href: string; | ||
| blank?: boolean; | ||
| tags?: string[]; | ||
| date?: string; |
There was a problem hiding this comment.
Bug: Required image prop is accepted but never rendered
The image prop is defined as required in SampleAppCardProps (line 8) and destructured from props (line 18), but it's never used in the component's JSX. The previous implementation rendered an Image component with the image value, but this was removed during refactoring while keeping the prop in the type definition. All usages in page.mdx still pass image="/images/logo/arcade.png" which gets silently ignored. Either the image rendering was accidentally removed, or the prop definition and MDX usages need to be cleaned up.
evantahler
left a comment
evantahler
left a comment
There was a problem hiding this comment.
I like the Github automation here! I generally tend to prefer separating a data file built from the GH crawl from the presentation layer, this way other applications can use it (e.g. the www site?), but not a blocker.
|
@evantahler What kind of data file you thinking, just a .json? Where would it live? |
|
A TS file if you can make it typed, but yes, |
| const titleRegex = new RegExp( | ||
| `(title="${repo.title.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}"[\\s\\S]*?)date="[^"]*"`, | ||
| "g" | ||
| ); |
There was a problem hiding this comment.
Regex can match dates across different card components
The regex pattern (title="..."[\s\S]*?)date="[^"]*" uses non-greedy matching to find a date after a title, but if a SampleAppCard component lacks a date attribute, the regex will continue matching across component boundaries until it finds a date in a subsequent card. This could cause the script to incorrectly update the wrong card's date attribute, corrupting the file contents.
| const repositories = []; | ||
|
|
||
| // Regex to find all SampleAppCard components with title and href | ||
| const sampleAppCardRegex = /<SampleAppCard\s+([^>]+)>/g; |
There was a problem hiding this comment.
Parsing regex fails on > in prop values
The regex /<SampleAppCard\s+([^>]+)>/g uses [^>]+ to capture all props, which stops matching at the first > character. If a description contains > (e.g., "For values x > y"), the regex would prematurely stop capturing, missing the href prop that comes after the description. This would cause the script to silently skip that card without updating its date.
Preview: https://docs-git-example-apps-arcade-ai.vercel.app/en/home/examples
Sharing out our favorite example apps!
As the list grows, we can add filtering mechanisms.
Note
Introduces a new Examples docs page and supporting automation.
app/en/home/examples/page.mdxlisting example apps (GitHub links) withtagsanddate, plus submission guidelinesSampleAppCardto supporttagsand optionaldate, and refreshes styling (removes motion/image usage).github/scripts/update-example-dates.jsto parse the MDX, fetch repo metadata from GitHub, and rewritedatefields; scheduled viaupdate-example-dates.yml(weekly/manual) that opens a PR if changesapp/en/home/_meta.tsxto include Example agentspublic/llms.txtto include an Examples section and updated metadataWritten by Cursor Bugbot for commit 6130080. This will update automatically on new commits. Configure here.