> ## Documentation Index > Fetch the complete documentation index at: https://developer.box.com/llms.txt > Use this file to discover all available pages before exploring further. # Sample Code Catalog > Explore sample code and demo applications for Box APIs, SDKs, and UI Elements export const SampleCodeCatalog = () => { const [selectedLanguage, setSelectedLanguage] = useState("All languages"); const [selectedTag, setSelectedTag] = useState("All tags"); const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false); const [tagDropdownOpen, setTagDropdownOpen] = useState(false); const sampleData = [{ title: "Box AI Python Workshop", href: "https://github.com/barduinor/box-python-gen-workshop/blob/main/workshops/intelligence/intelligence.md", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["API"] }, { title: "Box Custom Portal Demo", href: "https://github.com/box-community/box-custom-portal-demo", icon: "/static/samples/react.svg", languages: ["React", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "Box Web App Integration Demo with Vercel", href: "https://github.com/box-community/box-web-app-integration-demo", icon: "/static/samples/javascript.svg", languages: ["JavaScript"], tags: ["FRONTEND", "API"] }, { title: "Metadata view in Content Explorer", href: "https://github.com/box-community/content-explorer-metadata", icon: "/static/samples/nodejs.svg", languages: ["Node", "React", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "Video Bookmarking Demo", href: "https://github.com/pchristensenB/box-videobookmarking-demo", icon: "/static/samples/nodejs.svg", languages: ["Node", "JavaScript"], tags: ["API"] }, { title: "Typescript SDK", href: "https://github.com/box-community/box-ts-sdk-react", icon: "/static/samples/typescript.svg", languages: ["TypeScript"], tags: ["SDK"] }, { title: ".NET SDK Generated", href: "https://github.com/box/box-dotnet-sdk-gen?tab=readme-ov-file#box-dotnet-sdk-generated", icon: "/static/samples/dotnet.svg", languages: [".NET"], tags: ["SDK"] }, { title: "Box TypeScript SDK GENERATED (beta)", href: "https://github.com/box/box-typescript-sdk-gen#box-typescript-sdk-generated", icon: "/static/samples/typescript.svg", languages: ["TypeScript"], tags: ["SDK"] }, { title: "Get started: Box Node.js SDK & OAuth 2.0", href: "https://github.com/box-community/Box-node.js-SKD-with-OAuth-2.0", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SDK"] }, { title: "Vercel Serverless Demo", href: "https://github.com/box-community/box-vercel-serverless-demo", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API", "WEBHOOKS"] }, { title: "Mini Box Mediainfo Video Metadata Uploader", href: "https://github.com/box-community/mini-box-mediaInfo-video-metadata-uploader", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["API"] }, { title: "Diver Portal Demo", href: "https://github.com/box-community/ui-elements-sample-app", icon: "/static/samples/react.svg", languages: ["React", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "Angular Box UI Elements Quickstart", href: "https://github.com/SowaProgramuje/angular-box-ui-elements-cdn", icon: "/static/samples/angular.svg", languages: ["Angular", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "UI Elements Demo", href: "https://github.com/box-community/ui-elements-demo", icon: "/static/samples/react.svg", languages: ["React", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "UI Elements Demo with JWT", href: "https://github.com/box-community/ui-elements-jwt", icon: "/static/samples/react.svg", languages: ["React", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "UI Elements Demo using Python", href: "https://github.com/box-community/ui-elements-python", icon: "/static/samples/react.svg", languages: ["React", "JavaScript", "Python"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "UI Elements Demo with OAuth 2.0", href: "https://github.com/box-community/ui-elements-oauth", icon: "/static/samples/react.svg", languages: ["React", "JavaScript", "Python"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "Sharing Folders using the Box CLI", href: "https://github.com/box-community/box-cli-100k/tree/main", icon: "/static/samples/powershell.svg", languages: ["PowerShell"], tags: ["CLI", "API"] }, { title: "Box Metadata Media Uploader", href: "https://github.com/box-community/box-metadata-media/tree/main", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["API"] }, { title: "Vue.js Box UI Elements Quickstart", href: "https://github.com/SowaProgramuje/vue3-box-ui-elements-cdn", icon: "/static/samples/vue.js.svg", languages: ["Vue.js", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "Java SDK", href: "https://github.com/box/box-java-sdk/tree/main/src/example", icon: "/static/samples/java.svg", languages: ["Java"], tags: ["SDK"] }, { title: "Box CLI", href: "https://github.com/box/boxcli/tree/main/examples", icon: "/static/samples/powershell.svg", languages: ["PowerShell"], tags: ["CLI", "PROVISIONING"] }, { title: "Box UI Elements", href: "https://github.com/box/box-ui-elements/tree/master/examples", icon: "/static/samples/react.svg", languages: ["React", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: ".NET SDK", href: "https://github.com/box/box-windows-sdk-v2/tree/main/docs", icon: "/static/samples/dotnet.svg", languages: [".NET"], tags: ["SDK"] }, { title: "Box Annotations", href: "https://github.com/box/box-annotations/tree/master/docs", icon: "/static/samples/javascript.svg", languages: ["JavaScript"], tags: ["FRONTEND"] }, { title: "iOS SDK", href: "https://github.com/box/box-ios-sdk/tree/main/docs/usage", icon: "/static/samples/swift.svg", languages: ["Swift"], tags: ["SDK", "MOBILE"] }, { title: "Node SDK", href: "https://github.com/box/box-node-sdk/tree/main/docs", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SDK"] }, { title: "Box Python SDK GENERATED (beta)", href: "https://github.com/box/box-python-sdk-gen", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["SDK"] }, { title: "Box Python SDK", href: "https://github.com/box/box-python-sdk/tree/main/docs/usage", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["SDK"] }, { title: "Android Browse SDK", href: "https://github.com/box/box-android-browse-sdk", icon: "/static/samples/android.svg", languages: ["Android", "Java"], tags: ["SDK", "MOBILE"] }, { title: "Android Share SDK", href: "https://github.com/box/box-android-share-sdk", icon: "/static/samples/java.svg", languages: ["Java", "Android"], tags: ["SDK", "MOBILE"] }, { title: "Content Preview", href: "https://github.com/box/box-content-preview", icon: "/static/samples/javascript.svg", languages: ["JavaScript"], tags: ["FRONTEND"] }, { title: "UI Elements Demo", href: "https://github.com/box/box-ui-elements-demo", icon: "/static/samples/react.svg", languages: ["React", "JavaScript"], tags: ["UI ELEMENTS", "FRONTEND"] }, { title: "Skills Kit Nodejs", href: "https://github.com/box/box-skills-kit-nodejs", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Salesforce SDK", href: "https://github.com/box/box-salesforce-sdk/tree/master/doc", icon: "/static/samples/apex.svg", languages: ["APEX"], tags: ["SALESFORCE", "SDK"] }, { title: "Android SDK (deprecated)", href: "https://github.com/box/box-android-sdk/tree/master/doc", icon: "/static/samples/android.svg", languages: ["Android", "Java"], tags: ["SDK", "MOBILE"] }, { title: "iOS Preview SDK", href: "https://github.com/box/box-ios-preview-sdk", icon: "/static/samples/swift.svg", languages: ["Swift"], tags: ["SDK", "MOBILE"] }, { title: "OpenAI Skill Demo", href: "https://github.com/box-community/box-open-ai-skill-demo", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "cURL Samples", href: "https://github.com/box-community/box-curl-samples", icon: "/static/samples/curl.svg", languages: ["cURL"], tags: ["API"] }, { title: "Box Skills Starter Kit", href: "https://github.com/box-community/Box-Custom-Skills-Starter", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Authenticate with JWT Demo", href: "https://github.com/box-community/samples-docs-authenticate-with-jwt-api/blob/master/sample.js", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API"] }, { title: "JavaScript SDK", href: "https://github.com/box-community/box-javascript-sdk", icon: "/static/samples/javascript.svg", languages: ["JavaScript"], tags: ["SDK", "FRONTEND"] }, { title: "Box for Salesforce Demo", href: "https://github.com/box-community/box-salesforce-demo", icon: "/static/samples/apex.svg", languages: ["APEX"], tags: ["SALESFORCE"] }, { title: "JSON Ref Resolver", href: "https://github.com/box-community/json-ref-resolver", icon: "/static/samples/javascript.svg", languages: ["JavaScript"], tags: ["API", "FRONTEND"] }, { title: "Python Administration Kit", href: "https://github.com/box-community/tool-python-admin-kit", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["API"] }, { title: "Sample JWT App Primer", href: "https://github.com/box-community/sample-jwt-app-primer", icon: "/static/samples/universal.svg", languages: ["Universal"], tags: ["API"] }, { title: "Splunk Dashboards", href: "https://github.com/box-community/splunk-dashboards", icon: "/static/samples/universal.svg", languages: ["Universal"], tags: ["API"] }, { title: "PowerShell SDK", href: "https://github.com/box-community/sdk-powershell-api-v2", icon: "/static/samples/powershell.svg", languages: ["PowerShell"], tags: ["SDK"] }, { title: "Python Batch Folder Tree Rename", href: "https://github.com/box-community/tool-python-batch-folder-tree-rename", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["API"] }, { title: "Python Move Folder to Account", href: "https://github.com/box-community/tool-python-move-folder-to-account", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["API"] }, { title: "PHP Simple User Reports", href: "https://github.com/box-community/tool-php-simple-user-reports", icon: "/static/samples/php.svg", languages: ["PHP"], tags: ["API"] }, { title: "Perl Folder IDs to Paths", href: "https://github.com/box-community/tool-perl-folderids-to-paths", icon: "/static/samples/perl.svg", languages: ["Perl"], tags: ["API"] }, { title: "iOS Browse SDK", href: "https://github.com/box/box-ios-browse-sdk", icon: "/static/samples/swift.svg", languages: ["Swift"], tags: ["SDK", "MOBILE"] }, { title: "iOS Share SDK", href: "https://github.com/box/box-ios-share-sdk", icon: "/static/samples/swift.svg", languages: ["Swift"], tags: ["SDK", "MOBILE"] }, { title: "Android Preview SDK", href: "https://github.com/box/box-android-preview-sdk", icon: "/static/samples/android.svg", languages: ["Android", "Java"], tags: ["SDK", "MOBILE"] }, { title: "Android Simple Tooltip", href: "https://github.com/box/android-simple-tooltip", icon: "/static/samples/android.svg", languages: ["Android", "Java"], tags: ["MOBILE"] }, { title: "Box Content Preview Demo", href: "https://github.com/box/box-content-preview-demo", icon: "/static/samples/react.svg", languages: ["React", "JavaScript"], tags: ["FRONTEND"] }, { title: "Java SDK Samples", href: "https://github.com/box/box-java-sdk-samples", icon: "/static/samples/java.svg", languages: ["Java"], tags: ["API"] }, { title: ".NET Metadata SDK V2", href: "https://github.com/box/box-windows-metadata-sdk-v2", icon: "/static/samples/dotnet.svg", languages: [".NET"], tags: ["SDK", "API"] }, { title: "Android App to App SDK", href: "https://github.com/box/box-android-apptoapp-sdk", icon: "/static/samples/android.svg", languages: ["Android", "Java"], tags: ["SDK", "MOBILE"] }, { title: "Ruby SDK", href: "https://github.com/cburnette/boxr", icon: "/static/samples/ruby.svg", languages: ["Ruby"], tags: ["SDK"] }, { title: "R SDK", href: "https://github.com/r-box/boxr", icon: "/static/samples/r.svg", languages: ["R"], tags: ["SDK"] }, { title: "Box Jira Etsi Document Control", href: "https://github.com/goodgrid/etsi-document-control", icon: "/static/samples/javascript.svg", languages: ["JavaScript"], tags: ["API", "FRONTEND"] }, { title: "Box PowerShell Automations", href: "https://github.com/kylefernandadams/box-powershell-automations", icon: "/static/samples/powershell.svg", languages: ["PowerShell"], tags: ["API", "PROVISIONING"] }, { title: "Microsoft Azure Media Services Box Skill", href: "https://github.com/box-community/sample-video-skills/tree/master/microsoft-azure-faces-transcript-topics-detection", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Postman Collection", href: "https://developer.box.com/guides/tooling/postman/", icon: "/static/samples/universal.svg", languages: ["Universal"], tags: ["API"] }, { title: "AWS Lambda Function to Save Logs", href: "https://github.com/kenji-toforone/box-auditlogs-node-es", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API"] }, { title: "Python Async Rate Limiter", href: "https://github.com/jmfrank63/box-python-async-rate-limiter", icon: "/static/samples/python.svg", languages: ["Python"], tags: ["API"] }, { title: "Box for Salesforce Blueprints", href: "https://github.com/kylefernandadams/box-for-salesforce-blueprints", icon: "/static/samples/apex.svg", languages: ["APEX"], tags: ["SALESFORCE"] }, { title: "Leverton Lease Extraction", href: "https://github.com/box-community/sample-document-skills/tree/master/leverton-lease-extraction", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Rossum Invoice Intelligence", href: "https://github.com/box-community/sample-document-skills/tree/master/rossum-invoice-intelligence", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "IBM Watson Audio Transcript Extraction", href: "https://github.com/box-community/sample-audio-skills/tree/master/ibm-watson-transcript-extraction", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Microsoft Azure Audio Transcript Extraction", href: "https://github.com/box-community/sample-audio-skills/tree/master/microsoft-azure-transcript-topics-detection", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "VoiceBase Dual Channel Audio Analysis", href: "https://github.com/box-community/sample-audio-skills/tree/master/voicebase-callcenter-audio-analysis", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Acuant AssureID Box Skill", href: "https://github.com/box-community/sample-image-skills/tree/master/acuant-assureid-goverment-id-data-extraction", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Amazon Rekognition Label Extraction", href: "https://github.com/box-community/sample-image-skills/tree/master/amazon-rekognition-labels-detection", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "EXIF/XMP MetaInfo Extraction", href: "https://github.com/box-community/sample-image-skills/tree/master/exiftool-metainfo-extraction", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Google Cloud Vision Product Search", href: "https://github.com/box-community/sample-image-skills/tree/master/google-product-search-integration", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Google Vision Image Extraction", href: "https://github.com/box-community/sample-image-skills/tree/master/google-vision-text-topics-detection", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Hive Predict Face Recognition", href: "https://github.com/box-community/sample-image-skills/tree/master/hive-predict-face-recognition", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Microsoft Vision Image Extraction", href: "https://github.com/box-community/sample-image-skills/tree/master/microsoft-vision-text-topics-detection", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "ASP.NET MVC 5 Skeleton App", href: "https://github.com/box/samples/tree/master/box-aspnet-mvc-sk", icon: "/static/samples/dotnet.svg", languages: [".NET"], tags: ["API"] }, { title: "Auth0 Angular 1 Skeleton App", href: "https://github.com/box/samples/tree/master/box-auth0-angular1-skeleton-app-sample", icon: "/static/samples/angularjs.svg", languages: ["AngularJS", "JavaScript"], tags: ["API", "FRONTEND"] }, { title: "Auth0 Angular 2 Skeleton App", href: "https://github.com/box/samples/tree/master/box-auth0-angular2-skeleton-app-sample", icon: "/static/samples/angular.svg", languages: ["Angular", "JavaScript"], tags: ["API", "FRONTEND"] }, { title: "Auth0 Swift Skeleton App", href: "https://github.com/box/samples/tree/master/box-auth0-swift-skeleton-app-sample", icon: "/static/samples/swift.svg", languages: ["Swift"], tags: ["API", "MOBILE"] }, { title: "AWS Cognito Angular 2 Skeleton App", href: "https://github.com/box/samples/tree/master/box-aws-cognito-angular2-skeleton-app-sample", icon: "/static/samples/angular.svg", languages: ["Angular", "JavaScript"], tags: ["API", "FRONTEND"] }, { title: "Java Servlet Skeleton App", href: "https://github.com/box/samples/tree/master/box-java-servlet-skeleton-app", icon: "/static/samples/java.svg", languages: ["Java"], tags: ["API"] }, { title: "Node Cognito Lambdas Sample", href: "https://github.com/box/samples/tree/master/box-node-cognito-lambdas-sample", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API"] }, { title: "Node Custom Skills Sample", href: "https://github.com/box/samples/tree/master/box-node-custom-skills-sample", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["SKILLS"] }, { title: "Node Express Skeleton App", href: "https://github.com/box/samples/tree/master/box-node-express-skeleton-app", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API"] }, { title: "Node Lambda Sample", href: "https://github.com/box/samples/tree/master/box-node-lambda-sample", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API"] }, { title: "Node Rekognition Lambda Sample", href: "https://github.com/box/samples/tree/master/box-node-rekognition-lambdas-sample", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API"] }, { title: "Node Webhook to Lambda Sample", href: "https://github.com/box/samples/tree/master/box-node-webhook-to-lambda-sample", icon: "/static/samples/nodejs.svg", languages: ["Node"], tags: ["API", "WEBHOOKS"] }]; const allLanguages = useMemo(() => { const languageSet = new Set(); sampleData.forEach(sample => { sample.languages.forEach(lang => languageSet.add(lang)); }); return ["All languages", ...Array.from(languageSet).sort()]; }, []); const allTags = useMemo(() => { const tagSet = new Set(); sampleData.forEach(sample => { sample.tags.forEach(tag => tagSet.add(tag)); }); return ["All tags", ...Array.from(tagSet).sort()]; }, []); const filteredSamples = useMemo(() => { return sampleData.filter(sample => { const languageMatch = selectedLanguage === "All languages" || sample.languages.includes(selectedLanguage); const tagMatch = selectedTag === "All tags" || sample.tags.includes(selectedTag); return languageMatch && tagMatch; }); }, [selectedLanguage, selectedTag]); const resetFilters = () => { setSelectedLanguage("All languages"); setSelectedTag("All tags"); }; const hasActiveFilters = selectedLanguage !== "All languages" || selectedTag !== "All tags"; return
{}
{}
{languageDropdownOpen &&
{allLanguages.map(lang => )}
}
{}
{tagDropdownOpen &&
{allTags.map(tag => )}
}
{} {hasActiveFilters && }
{}
{filteredSamples.map((sample, index) => {}
{sample.languages.join(",
{}

{sample.title}

{}
{sample.tags.map((tag, tagIndex) => {tag} )}
)}
{} {filteredSamples.length === 0 &&

No samples found matching your filters.

}
; };