From 9a0009813460f51cd8f76b8068fb1b827573ddac Mon Sep 17 00:00:00 2001 From: waleed Date: Wed, 25 Mar 2026 16:09:00 -0700 Subject: [PATCH 01/16] feat: skills import, MCP modal updates, wordmark icon, tool-input improvements - Add skills import functionality (route + components + utils) - Update MCP deploy modal - Add Wordmark emcn icon + logo SVG assets - Improve tool-input component - Update README branding to new wordmark - Add ban-spam-accounts admin script --- README.md | 63 +--- apps/sim/app/api/skills/import/route.ts | 110 +++++++ .../skills/components/skill-import.tsx | 287 ++++++++++++++++++ .../skills/components/skill-modal.tsx | 227 ++++++++------ .../skills/components/utils.test.ts | 191 ++++++++++++ .../components/skills/components/utils.ts | 112 +++++++ .../deploy-modal/components/mcp/mcp.tsx | 42 ++- .../components/tool-input/tool-input.tsx | 41 +-- apps/sim/components/emcn/icons/wordmark.tsx | 55 ++++ apps/sim/public/logo/wordmark-dark.svg | 37 +++ apps/sim/public/logo/wordmark.svg | 37 +++ scripts/ban-spam-accounts.ts | 97 ++++++ 12 files changed, 1125 insertions(+), 174 deletions(-) create mode 100644 apps/sim/app/api/skills/import/route.ts create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/utils.test.ts create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/utils.ts create mode 100644 apps/sim/components/emcn/icons/wordmark.tsx create mode 100644 apps/sim/public/logo/wordmark-dark.svg create mode 100644 apps/sim/public/logo/wordmark.svg create mode 100644 scripts/ban-spam-accounts.ts diff --git a/README.md b/README.md index 17e2ad1ae50..6738087611d 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,20 @@

- Sim Logo + + + + Sim Logo +

The open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.

- Sim.ai + Sim.ai Discord Twitter - Documentation + Documentation

@@ -42,7 +46,7 @@ Upload documents to a vector store and let agents answer questions grounded in y ### Cloud-hosted: [sim.ai](https://sim.ai) -Sim.ai +Sim.ai ### Self-hosted: NPM Package @@ -70,43 +74,7 @@ docker compose -f docker-compose.prod.yml up -d Open [http://localhost:3000](http://localhost:3000) -#### Using Local Models with Ollama - -Run Sim with local AI models using [Ollama](https://ollama.ai) - no external APIs required: - -```bash -# Start with GPU support (automatically downloads gemma3:4b model) -docker compose -f docker-compose.ollama.yml --profile setup up -d - -# For CPU-only systems: -docker compose -f docker-compose.ollama.yml --profile cpu --profile setup up -d -``` - -Wait for the model to download, then visit [http://localhost:3000](http://localhost:3000). Add more models with: -```bash -docker compose -f docker-compose.ollama.yml exec ollama ollama pull llama3.1:8b -``` - -#### Using an External Ollama Instance - -If Ollama is running on your host machine, use `host.docker.internal` instead of `localhost`: - -```bash -OLLAMA_URL=http://host.docker.internal:11434 docker compose -f docker-compose.prod.yml up -d -``` - -On Linux, use your host's IP address or add `extra_hosts: ["host.docker.internal:host-gateway"]` to the compose file. - -#### Using vLLM - -Sim supports [vLLM](https://docs.vllm.ai/) for self-hosted models. Set `VLLM_BASE_URL` and optionally `VLLM_API_KEY` in your environment. - -### Self-hosted: Dev Containers - -1. Open VS Code with the [Remote - Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) -2. Open the project and click "Reopen in Container" when prompted -3. Run `bun run dev:full` in the terminal or use the `sim-start` alias - - This starts both the main application and the realtime socket server +Sim also supports local models via [Ollama](https://ollama.ai) and [vLLM](https://docs.vllm.ai/) — see the [Docker self-hosting docs](https://docs.sim.ai/self-hosting/docker) for setup details. ### Self-hosted: Manual Setup @@ -159,18 +127,7 @@ Copilot is a Sim-managed service. To use Copilot on a self-hosted instance: ## Environment Variables -Key environment variables for self-hosted deployments. See [`.env.example`](apps/sim/.env.example) for defaults or [`env.ts`](apps/sim/lib/core/config/env.ts) for the full list. - -| Variable | Required | Description | -|----------|----------|-------------| -| `DATABASE_URL` | Yes | PostgreSQL connection string with pgvector | -| `BETTER_AUTH_SECRET` | Yes | Auth secret (`openssl rand -hex 32`) | -| `BETTER_AUTH_URL` | Yes | Your app URL (e.g., `http://localhost:3000`) | -| `NEXT_PUBLIC_APP_URL` | Yes | Public app URL (same as above) | -| `ENCRYPTION_KEY` | Yes | Encrypts environment variables (`openssl rand -hex 32`) | -| `INTERNAL_API_SECRET` | Yes | Encrypts internal API routes (`openssl rand -hex 32`) | -| `API_ENCRYPTION_KEY` | Yes | Encrypts API keys (`openssl rand -hex 32`) | -| `COPILOT_API_KEY` | No | API key from sim.ai for Copilot features | +See the [environment variables reference](https://docs.sim.ai/self-hosting/environment-variables) for the full list, or [`apps/sim/.env.example`](apps/sim/.env.example) for defaults. ## Tech Stack diff --git a/apps/sim/app/api/skills/import/route.ts b/apps/sim/app/api/skills/import/route.ts new file mode 100644 index 00000000000..8315caefee5 --- /dev/null +++ b/apps/sim/app/api/skills/import/route.ts @@ -0,0 +1,110 @@ +import { createLogger } from '@sim/logger' +import { type NextRequest, NextResponse } from 'next/server' +import { z } from 'zod' +import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid' +import { generateRequestId } from '@/lib/core/utils/request' + +const logger = createLogger('SkillsImportAPI') + +const FETCH_TIMEOUT_MS = 15_000 + +const ImportSchema = z.object({ + url: z.string().url('A valid URL is required'), +}) + +/** + * Converts a standard GitHub file URL to its raw.githubusercontent.com equivalent. + * + * Supported formats: + * github.com/{owner}/{repo}/blob/{branch}/{path} + * raw.githubusercontent.com/{owner}/{repo}/{branch}/{path} (passthrough) + */ +function toRawGitHubUrl(url: string): string { + const parsed = new URL(url) + + if (parsed.hostname === 'raw.githubusercontent.com') { + return url + } + + if (parsed.hostname !== 'github.com') { + throw new Error('Only GitHub URLs are supported') + } + + // /owner/repo/blob/branch/path... + const segments = parsed.pathname.split('/').filter(Boolean) + if (segments.length < 5 || segments[2] !== 'blob') { + throw new Error( + 'Invalid GitHub URL format. Expected: https://github.com/{owner}/{repo}/blob/{branch}/{path}' + ) + } + + const [owner, repo, , branch, ...pathParts] = segments + return `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${pathParts.join('/')}` +} + +/** POST - Fetch a SKILL.md from a GitHub URL and return its raw content */ +export async function POST(req: NextRequest) { + const requestId = generateRequestId() + + try { + const authResult = await checkSessionOrInternalAuth(req, { requireWorkflowId: false }) + if (!authResult.success || !authResult.userId) { + logger.warn(`[${requestId}] Unauthorized skill import attempt`) + return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) + } + + const body = await req.json() + const { url } = ImportSchema.parse(body) + + let rawUrl: string + try { + rawUrl = toRawGitHubUrl(url) + } catch (err) { + const message = err instanceof Error ? err.message : 'Invalid URL' + return NextResponse.json({ error: message }, { status: 400 }) + } + + const controller = new AbortController() + const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS) + + try { + const response = await fetch(rawUrl, { + signal: controller.signal, + headers: { Accept: 'text/plain' }, + }) + + if (!response.ok) { + logger.warn(`[${requestId}] GitHub fetch failed`, { + status: response.status, + url: rawUrl, + }) + return NextResponse.json( + { error: `Failed to fetch file (HTTP ${response.status}). Is the repository public?` }, + { status: 502 } + ) + } + + const content = await response.text() + + if (content.length > 100_000) { + return NextResponse.json({ error: 'File is too large (max 100KB)' }, { status: 400 }) + } + + return NextResponse.json({ content }) + } finally { + clearTimeout(timeout) + } + } catch (error) { + if (error instanceof z.ZodError) { + return NextResponse.json({ error: 'Invalid request', details: error.errors }, { status: 400 }) + } + + if (error instanceof Error && error.name === 'AbortError') { + logger.warn(`[${requestId}] GitHub fetch timed out`) + return NextResponse.json({ error: 'Request timed out' }, { status: 504 }) + } + + logger.error(`[${requestId}] Error importing skill`, error) + return NextResponse.json({ error: 'Failed to import skill' }, { status: 500 }) + } +} diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx new file mode 100644 index 00000000000..443fc049191 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx @@ -0,0 +1,287 @@ +'use client' + +import type { ChangeEvent } from 'react' +import { useCallback, useRef, useState } from 'react' +import { Loader2 } from 'lucide-react' +import { Button, Input, Label, Textarea } from '@/components/emcn' +import { Upload } from '@/components/emcn/icons' +import { cn } from '@/lib/core/utils/cn' +import { extractSkillFromZip, parseSkillMarkdown } from './utils' + +interface ImportedSkill { + name: string + description: string + content: string +} + +interface SkillImportProps { + onImport: (data: ImportedSkill) => void +} + +type ImportState = 'idle' | 'loading' | 'error' + +const ACCEPTED_EXTENSIONS = ['.md', '.zip'] + +function isAcceptedFile(file: File): boolean { + const name = file.name.toLowerCase() + return ACCEPTED_EXTENSIONS.some((ext) => name.endsWith(ext)) +} + +export function SkillImport({ onImport }: SkillImportProps) { + const fileInputRef = useRef(null) + + const [isDragging, setIsDragging] = useState(false) + const [dragCounter, setDragCounter] = useState(0) + const [fileState, setFileState] = useState('idle') + const [fileError, setFileError] = useState('') + + const [githubUrl, setGithubUrl] = useState('') + const [githubState, setGithubState] = useState('idle') + const [githubError, setGithubError] = useState('') + + const [pasteContent, setPasteContent] = useState('') + const [pasteError, setPasteError] = useState('') + + const processFile = useCallback( + async (file: File) => { + if (!isAcceptedFile(file)) { + setFileError('Unsupported file type. Use .md or .zip files.') + setFileState('error') + return + } + + setFileState('loading') + setFileError('') + + try { + let rawContent: string + + if (file.name.toLowerCase().endsWith('.zip')) { + rawContent = await extractSkillFromZip(file) + } else { + rawContent = await file.text() + } + + const parsed = parseSkillMarkdown(rawContent) + setFileState('idle') + onImport(parsed) + } catch (err) { + const message = err instanceof Error ? err.message : 'Failed to process file' + setFileError(message) + setFileState('error') + } + }, + [onImport] + ) + + const handleFileChange = useCallback( + (e: ChangeEvent) => { + const file = e.target.files?.[0] + if (file) processFile(file) + if (fileInputRef.current) fileInputRef.current.value = '' + }, + [processFile] + ) + + const handleDragEnter = useCallback((e: React.DragEvent) => { + e.preventDefault() + e.stopPropagation() + setDragCounter((prev) => { + const next = prev + 1 + if (next === 1) setIsDragging(true) + return next + }) + }, []) + + const handleDragLeave = useCallback((e: React.DragEvent) => { + e.preventDefault() + e.stopPropagation() + setDragCounter((prev) => { + const next = prev - 1 + if (next === 0) setIsDragging(false) + return next + }) + }, []) + + const handleDragOver = useCallback((e: React.DragEvent) => { + e.preventDefault() + e.stopPropagation() + e.dataTransfer.dropEffect = 'copy' + }, []) + + const handleDrop = useCallback( + (e: React.DragEvent) => { + e.preventDefault() + e.stopPropagation() + setIsDragging(false) + setDragCounter(0) + + const file = e.dataTransfer.files?.[0] + if (file) processFile(file) + }, + [processFile] + ) + + const handleGithubImport = useCallback(async () => { + const trimmed = githubUrl.trim() + if (!trimmed) { + setGithubError('Please enter a GitHub URL') + setGithubState('error') + return + } + + setGithubState('loading') + setGithubError('') + + try { + const res = await fetch('/api/skills/import', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ url: trimmed }), + }) + + const data = await res.json() + + if (!res.ok) { + throw new Error(data.error || `Import failed (HTTP ${res.status})`) + } + + const parsed = parseSkillMarkdown(data.content) + setGithubState('idle') + onImport(parsed) + } catch (err) { + const message = err instanceof Error ? err.message : 'Failed to import from GitHub' + setGithubError(message) + setGithubState('error') + } + }, [githubUrl, onImport]) + + const handlePasteImport = useCallback(() => { + const trimmed = pasteContent.trim() + if (!trimmed) { + setPasteError('Please paste some content first') + return + } + + setPasteError('') + const parsed = parseSkillMarkdown(trimmed) + onImport(parsed) + }, [pasteContent, onImport]) + + return ( +

+ {/* File drop zone */} +
+ + + {fileError &&

{fileError}

} +
+ + + + {/* GitHub URL */} +
+ +
+ { + setGithubUrl(e.target.value) + if (githubError) setGithubError('') + }} + className='flex-1' + disabled={githubState === 'loading'} + /> + +
+ {githubError &&

{githubError}

} +
+ + + + {/* Paste content */} +
+ +