@@ -237,6 +253,13 @@ export default function HomePage() {
OpenAI Agents SDK
+
OpenAI Agents SDK
+ 🤗
+ HuggingFace Tiny Agents
+
+ ✨ NEW
+
+
Generated agents include sophisticated slash command workflows for multi-step operations. - Built on Claude Agent SDK and OpenAI Agents API with MCP tools, streaming, and configurable security. + Built on Claude Agent SDK, OpenAI Agents API, and HuggingFace Tiny Agents with MCP tools, streaming, and configurable security.
-
+
@@ -878,16 +936,26 @@ const features = [
title: 'Multi-Step Workflows',
description: 'Domain-specific slash commands like /literature-review, /code-audit, /invoice-batch orchestrate complex multi-step processes. Template variables, retry logic, and error handling built-in.',
icon: CodeBracketIcon,
+ providers: ['claude', 'openai'],
},
{
title: 'Configurable Security',
description: 'Claude Code-style permission system with interactive prompts for file operations, command execution, and network requests. Users approve high-risk actions before they execute.',
icon: CogIcon,
+ providers: ['claude', 'openai'],
},
{
title: 'SDK-Native & Customizable',
- description: 'Built on official Claude Agent SDK and OpenAI Agents API with MCP tool integration. Download complete TypeScript source. Modify prompts, add tools, or extend workflows from day one.',
+ description: 'Download complete TypeScript source code. Full control over prompts, tools, and workflows. Extend with custom business logic from day one.',
icon: RocketLaunchIcon,
+ providers: ['claude', 'openai'],
+ },
+ {
+ title: 'Zero-Build Tiny Agents',
+ description: 'Create lightweight agents with just JSON + markdown. No build step, no dependencies. Run instantly with npx, share to the HuggingFace community, and use powerful open-source models.',
+ icon: SparklesIcon,
+ providers: ['huggingface'],
+ isNew: true,
},
]
diff --git a/agent-workshop-app/src/components/preview/ProjectPreview.tsx b/agent-workshop-app/src/components/preview/ProjectPreview.tsx
index d66953a6..822a199b 100644
--- a/agent-workshop-app/src/components/preview/ProjectPreview.tsx
+++ b/agent-workshop-app/src/components/preview/ProjectPreview.tsx
@@ -24,7 +24,10 @@ interface ProjectPreviewProps {
export function ProjectPreview({ project, onClose, onDownload }: ProjectPreviewProps) {
const [selectedFile, setSelectedFile] = useState
{features.map((feature, index) => (
-
+ {feature.isNew && (
+
+ ✨ NEW
+
+ )}
+
@@ -852,19 +898,31 @@ export default function HomePage() {
{feature.title}
-+
{feature.description}
+
+ {feature.providers?.map(provider => (
+
+ {provider === 'claude' ? 'Claude' : provider === 'openai' ? 'OpenAI' : '🤗 Tiny Agents'}
+
+ ))}
+
))}
Free, open-source tool for generating AI agent CLIs
++ Intellectual property of{' '} + + reasoning.software + {' '} + (MadWatch LLC) +
- Built by{' '} + Created by{' '} Dakota Kim
- © {new Date().getFullYear()} Build-An-Agent Workshop. Made with ❤️ for the AI community. + © 2025-{new Date().getFullYear()} Dakota Kim / reasoning.software (MadWatch LLC). MIT License.
+
+ )}
+
+
+
+
+ 🤗
+
+
+
+
+ Ready to run!
+
+ npx @huggingface/tiny-agents run .
+
+
{/* File Tree */}
+
@@ -258,6 +285,7 @@ export function ProjectPreview({ project, onClose, onDownload }: ProjectPreviewP
)}
-
- {/* Dependencies */}
- Setup Instructions
++ {project.config.sdkProvider === 'huggingface' ? 'Quick Start' : 'Setup Instructions'} +
{project.metadata.buildInstructions.map((instruction, index) => (
+ {project.config.sdkProvider === 'huggingface' && (
+
@@ -340,36 +370,127 @@ export function ProjectPreview({ project, onClose, onDownload }: ProjectPreviewP
))}
+ No build step required! Your agent is ready to run instantly. +
+ )}
-
Dependencies
-
-
-
Production Dependencies
-
- {Object.entries(project.metadata.dependencies).map(([name, version]) => (
-
-
+
- {name}
- {version}
-
- ))}
+ {/* Share with Community (HuggingFace only) */}
+ {project.config.sdkProvider === 'huggingface' && (
+
+ (config.sdkProvider)
- const steps: WizardStep[] = [
- {
- id: 'domain',
- title: 'Choose Domain',
- description: 'Select your agent\'s area of expertise',
- component: DomainSelection,
- isComplete: (config) => !!config.domain,
- validation: (config) => config.domain ? [] : ['Please select a domain']
- },
- {
- id: 'template',
- title: 'Select Template',
- description: 'Pick a starting template for your agent',
- component: TemplateSelection,
- isComplete: (config) => !!config.templateId,
- validation: (config) => config.templateId ? [] : ['Please select a template']
- },
- {
- id: 'sdk',
- title: 'Configure AI Provider',
- description: 'Choose your AI provider and model',
- component: SDKConfiguration,
- isComplete: (config) => !!config.sdkProvider,
- validation: (config) => {
- const errors = []
- if (!config.sdkProvider) errors.push('Please select an AI provider')
- return errors
- }
- },
- {
- id: 'tools',
- title: 'Configure Tools',
- description: 'Select capabilities for your agent',
- component: ToolConfiguration,
- isComplete: (config) => !!(config.tools && config.tools.some(t => t.enabled)),
- validation: (config) => {
- if (!config.tools?.some(t => t.enabled)) {
- return ['Please enable at least one tool']
- }
- return []
- }
- },
- {
- id: 'mcp',
- title: 'MCP Servers',
- description: 'Connect to Model Context Protocol servers (optional)',
- component: MCPConfiguration,
- isComplete: () => true, // Optional step, always complete
- validation: () => [] // No validation required
- },
- {
- id: 'project',
- title: 'Project Settings',
- description: 'Configure your project details',
- component: ProjectSettings,
- isComplete: (config) => !!(config.name && config.projectName && config.author),
- validation: (config) => {
- const errors = []
- if (!config.name) errors.push('Agent name is required')
- if (!config.projectName) errors.push('Project name is required')
- if (!config.author) errors.push('Author name is required')
- return errors
+ // Get current steps based on provider
+ const steps = useMemo(() => getStepsForProvider(config.sdkProvider), [config.sdkProvider])
+
+ // Handle provider switching - reset step if needed
+ useEffect(() => {
+ const previousProvider = previousProviderRef.current
+ const currentProvider = config.sdkProvider
+
+ if (previousProvider !== currentProvider && currentProvider !== undefined) {
+ // Provider changed, reset to step 1 (after provider selection)
+ if (currentStep > 0) {
+ setCurrentStep(1)
}
- },
- {
- id: 'preview',
- title: 'Preview & Generate',
- description: 'Review your configuration and generate the project',
- component: PreviewAndGenerate,
- isComplete: () => true,
- validation: () => []
}
- ]
+
+ previousProviderRef.current = currentProvider
+ }, [config.sdkProvider, currentStep])
const currentStepData = steps[currentStep]
const CurrentStepComponent = currentStepData.component
const handleNext = useCallback(() => {
const errors = currentStepData.validation?.(config) || []
-
+
if (errors.length > 0) {
toast.error(errors[0])
return
@@ -115,7 +186,7 @@ export function AgentBuilder({ onBack }: AgentBuilderProps) {
if (currentStep < steps.length - 1) {
setCurrentStep(currentStep + 1)
}
- }, [currentStep, currentStepData, config])
+ }, [currentStep, currentStepData, config, steps.length])
const handlePrevious = useCallback(() => {
if (currentStep > 0) {
@@ -155,7 +226,7 @@ export function AgentBuilder({ onBack }: AgentBuilderProps) {
+ 🤗
+
-
+
Share with the Community!
+Add your agent to the official tiny-agents dataset
-
)}
diff --git a/agent-workshop-app/src/components/wizard/AgentBuilder.tsx b/agent-workshop-app/src/components/wizard/AgentBuilder.tsx
index a6d1956e..53471740 100644
--- a/agent-workshop-app/src/components/wizard/AgentBuilder.tsx
+++ b/agent-workshop-app/src/components/wizard/AgentBuilder.tsx
@@ -1,14 +1,16 @@
'use client'
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
-import {
- ArrowLeftIcon,
+import {
+ ArrowLeftIcon,
ArrowRightIcon,
CheckIcon,
XMarkIcon
} from '@heroicons/react/24/outline'
-import { AgentConfig, WizardStep } from '@/types/agent'
+import { AgentConfig, WizardStep, SDKProvider } from '@/types/agent'
+import { ProviderSelection } from './steps/ProviderSelection'
+import { HuggingFaceQuickForm } from './steps/HuggingFaceQuickForm'
import { DomainSelection } from './steps/DomainSelection'
import { TemplateSelection } from './steps/TemplateSelection'
import { SDKConfiguration } from './steps/SDKConfiguration'
@@ -23,90 +25,159 @@ interface AgentBuilderProps {
onBack: () => void
}
+// Step definitions for full flow (Claude/OpenAI)
+const fullFlowSteps: WizardStep[] = [
+ {
+ id: 'provider',
+ title: 'Choose Provider',
+ description: 'Select your AI provider',
+ component: ProviderSelection,
+ isComplete: (config) => !!config.sdkProvider,
+ validation: (config) => config.sdkProvider ? [] : ['Please select an AI provider']
+ },
+ {
+ id: 'domain',
+ title: 'Choose Domain',
+ description: 'Select your agent\'s area of expertise',
+ component: DomainSelection,
+ isComplete: (config) => !!config.domain,
+ validation: (config) => config.domain ? [] : ['Please select a domain']
+ },
+ {
+ id: 'template',
+ title: 'Select Template',
+ description: 'Pick a starting template for your agent',
+ component: TemplateSelection,
+ isComplete: (config) => !!config.templateId,
+ validation: (config) => config.templateId ? [] : ['Please select a template']
+ },
+ {
+ id: 'model',
+ title: 'Configure Model',
+ description: 'Choose your model and settings',
+ component: SDKConfiguration,
+ isComplete: (config) => !!config.model,
+ validation: (config) => {
+ const errors = []
+ if (!config.model) errors.push('Please select a model')
+ return errors
+ }
+ },
+ {
+ id: 'tools',
+ title: 'Configure Tools',
+ description: 'Select capabilities for your agent',
+ component: ToolConfiguration,
+ isComplete: (config) => !!(config.tools && config.tools.some(t => t.enabled)),
+ validation: (config) => {
+ if (!config.tools?.some(t => t.enabled)) {
+ return ['Please enable at least one tool']
+ }
+ return []
+ }
+ },
+ {
+ id: 'mcp',
+ title: 'MCP Servers',
+ description: 'Connect to Model Context Protocol servers (optional)',
+ component: MCPConfiguration,
+ isComplete: () => true,
+ validation: () => []
+ },
+ {
+ id: 'project',
+ title: 'Project Settings',
+ description: 'Configure your project details',
+ component: ProjectSettings,
+ isComplete: (config) => !!(config.name && config.projectName && config.author),
+ validation: (config) => {
+ const errors = []
+ if (!config.name) errors.push('Agent name is required')
+ if (!config.projectName) errors.push('Project name is required')
+ if (!config.author) errors.push('Author name is required')
+ return errors
+ }
+ },
+ {
+ id: 'preview',
+ title: 'Preview & Generate',
+ description: 'Review your configuration and generate the project',
+ component: PreviewAndGenerate,
+ isComplete: () => true,
+ validation: () => []
+ }
+]
+
+// Step definitions for lightweight flow (HuggingFace)
+const lightweightFlowSteps: WizardStep[] = [
+ {
+ id: 'provider',
+ title: 'Choose Provider',
+ description: 'Select your AI provider',
+ component: ProviderSelection,
+ isComplete: (config) => !!config.sdkProvider,
+ validation: (config) => config.sdkProvider ? [] : ['Please select an AI provider']
+ },
+ {
+ id: 'config',
+ title: 'Configure Agent',
+ description: 'Set up your tiny-agent in one simple form',
+ component: HuggingFaceQuickForm,
+ isComplete: (config) => !!(config.name?.trim() && config.model),
+ validation: (config) => {
+ const errors = []
+ if (!config.name?.trim()) errors.push('Agent name is required')
+ if (!config.model) errors.push('Please select a model')
+ return errors
+ }
+ },
+ {
+ id: 'preview',
+ title: 'Preview & Download',
+ description: 'Review and download your agent files',
+ component: PreviewAndGenerate,
+ isComplete: () => true,
+ validation: () => []
+ }
+]
+
+// Get steps based on provider
+function getStepsForProvider(provider?: SDKProvider): WizardStep[] {
+ if (provider === 'huggingface') {
+ return lightweightFlowSteps
+ }
+ return fullFlowSteps
+}
+
export function AgentBuilder({ onBack }: AgentBuilderProps) {
const { config, updateConfig, resetConfig } = useAgentStore()
const [currentStep, setCurrentStep] = useState(0)
+ const previousProviderRef = useRefDevelopment Dependencies
-
- {Object.entries(project.metadata.devDependencies).map(([name, version]) => (
-
+ )}
+
+ {/* Dependencies (hide for HuggingFace since there are none) */}
+ {project.config.sdkProvider !== 'huggingface' && (
+
- {name}
- {version}
+
+ {/* Your Agent Files */}
+
-
+
+
+ {/* Folder Structure Visualization */}
+ Your Agent Files
+
+ agent.json
+ PROMPT.md
+ EXAMPLES.md (optional)
+
+
+
+
+ {/* Submission Steps */}
+ Folder Structure
+
+
+ tiny-agents/tiny-agents/
+ <your-username>/
+ {project.config.projectName}/
+ agent.json
+ PROMPT.md
+
+
+
+ {/* Test First */}
+ How to Submit
+
+
+
+ 1
+
+ Go to the dataset and click "+ Contribute" → "New pull request"
+ Open tiny-agents dataset →
- ))}
+
+
+ 2
+
+ After creating the PR, you'll see git instructions to push your files:
+
+
+
+ # Clone and checkout your PR branch
+ git clone https://huggingface.co/datasets/tiny-agents/tiny-agents
+ git fetch origin refs/pr/<PR_NUMBER>:pr-<PR_NUMBER>
+ git checkout pr-<PR_NUMBER>
+ # Add your files and push
+ mkdir -p <your-username>/{project.config.projectName}
+ cp agent.json PROMPT.md <your-username>/{project.config.projectName}/
+ git add . && git commit -m "Add {project.config.projectName} agent"
+ git push origin HEAD:refs/pr/<PR_NUMBER>
+
+
3
+ Or use "Upload files" in the web UI to upload directly to your PR
+
+
+
+ {/* After Merge */}
+
+ Tip: Test your agent locally first:
+ npx @huggingface/tiny-agents run .
+
+
After your PR is merged:
+npx @huggingface/tiny-agents run <your-username>/{project.config.projectName}
+
+
+ )}
Dependencies
+
+
+
+
+ Production Dependencies
+
+ {Object.entries(project.metadata.dependencies).map(([name, version]) => (
+
+
+ {name}
+ {version}
+
+ ))}
+
+
+ Development Dependencies
+
+ {Object.entries(project.metadata.devDependencies).map(([name, version]) => (
+
+
+ {name}
+ {version}
+
+ ))}
+
+ {config.sdkProvider === 'huggingface' && (
+
+ Quick Setup
+
+ )}
{config.name && (
{config.name}
@@ -179,21 +255,21 @@ export function AgentBuilder({ onBack }: AgentBuilderProps) {
+ updateConfig: (updates: Partial) => void
+ onNext: () => void
+}
+
+const HUGGINGFACE_MODELS = [
+ {
+ id: 'Qwen/Qwen3-235B-A22B-Instruct-2507',
+ name: 'Qwen 3 235B Instruct',
+ description: 'Most capable open-source model with excellent tool support',
+ contextWindow: '128K'
+ },
+ {
+ id: 'Qwen/Qwen3-32B',
+ name: 'Qwen 3 32B',
+ description: 'Fast and capable with good tool support',
+ contextWindow: '128K'
+ },
+ {
+ id: 'meta-llama/Llama-3.3-70B-Instruct',
+ name: 'Llama 3.3 70B',
+ description: 'Popular open-source model from Meta',
+ contextWindow: '128K'
+ },
+ {
+ id: 'deepseek-ai/DeepSeek-R1',
+ name: 'DeepSeek R1',
+ description: 'Specialized in reasoning tasks',
+ contextWindow: '64K'
+ },
+ {
+ id: 'deepseek-ai/DeepSeek-V3-0324',
+ name: 'DeepSeek V3',
+ description: 'Powerful general-purpose model',
+ contextWindow: '64K'
+ }
+]
+
+// Popular MCP servers for quick-add (verified working packages)
+const POPULAR_MCP_SERVERS = [
+ 'playwright',
+ 'github',
+ 'filesystem',
+ 'memory',
+ 'sequential-thinking',
+ 'brave-search'
+]
+
+export function HuggingFaceQuickForm({ config, updateConfig, onNext }: HuggingFaceQuickFormProps) {
+ const [showMCPSection, setShowMCPSection] = useState(false)
+ const [showAllTemplates, setShowAllTemplates] = useState(false)
+
+ // Auto-apply defaults on mount
+ useEffect(() => {
+ const defaults: Partial = {}
+
+ if (!config.domain) defaults.domain = 'development'
+ if (!config.version) defaults.version = '1.0.0'
+ if (!config.license) defaults.license = 'MIT'
+ if (!config.permissions) defaults.permissions = 'balanced'
+ if (!config.tools) defaults.tools = []
+ if (!config.model) defaults.model = HUGGINGFACE_MODELS[0].id
+
+ if (Object.keys(defaults).length > 0) {
+ updateConfig(defaults)
+ }
+ }, [])
+
+ // Auto-generate projectName from name
+ useEffect(() => {
+ if (config.name) {
+ const projectName = config.name
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, '-')
+ .replace(/^-|-$/g, '')
+ updateConfig({
+ projectName,
+ packageName: projectName
+ })
+ }
+ }, [config.name])
+
+ const mcpServers = config.mcpServers || []
+
+ const generateId = () => `mcp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+
+ const addServerFromTemplate = (templateId: string) => {
+ const template = MCP_SERVER_TEMPLATES.find(t => t.id === templateId)
+ if (!template) return
+
+ // Check if already added
+ if (mcpServers.some(s => s.name === template.id)) return
+
+ const newServer: MCPServer = {
+ id: generateId(),
+ name: template.id,
+ description: template.description,
+ enabled: true,
+ ...template.defaultConfig,
+ } as MCPServer
+
+ updateConfig({
+ mcpServers: [...mcpServers, newServer]
+ })
+ }
+
+ const removeServer = (id: string) => {
+ updateConfig({
+ mcpServers: mcpServers.filter(s => s.id !== id)
+ })
+ }
+
+ const popularTemplates = MCP_SERVER_TEMPLATES.filter(t =>
+ POPULAR_MCP_SERVERS.includes(t.id)
+ )
+
+ const isValid = !!(config.name?.trim() && config.model)
+
+ return (
+
Progress
- +
{steps.map((step, index) => {
const isCompleted = step.isComplete(config)
const isCurrent = index === currentStep
const isAccessible = index <= currentStep
-
+
return (
)
-}
\ No newline at end of file
+}
diff --git a/agent-workshop-app/src/components/wizard/steps/HuggingFaceQuickForm.tsx b/agent-workshop-app/src/components/wizard/steps/HuggingFaceQuickForm.tsx
new file mode 100644
index 00000000..fc4516bd
--- /dev/null
+++ b/agent-workshop-app/src/components/wizard/steps/HuggingFaceQuickForm.tsx
@@ -0,0 +1,389 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import {
+ CheckIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+ PlusIcon,
+ TrashIcon,
+ InformationCircleIcon,
+ ServerIcon,
+} from '@heroicons/react/24/outline'
+import { AgentConfig, MCPServer, MCPServerTemplate } from '@/types/agent'
+import { MCP_SERVER_TEMPLATES } from '@/data/mcp-templates'
+
+interface HuggingFaceQuickFormProps {
+ config: Partial
+ {/* Header */}
+
+
+
+
+ {/* Agent Identity Section */}
+
+ 🤗
+ HuggingFace Tiny Agent
+
+ + Configure Your Agent +
++ Set up your lightweight agent in one simple form. No build step required! +
+Agent Identity
+ +
+
+
+ updateConfig({ name: e.target.value })}
+ placeholder="My Awesome Agent"
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+ />
+ {config.name && (
+
+
+
+ Will be published as: {config.projectName}
+
+
+