reicon-mcp 1.0.0 → 1.0.1

package/cli/index.js

@@ -94,7 +94,7 @@ export async function run(argv) {
         case 'apply': {
             const name = positional[1];
             if (!name) {
-                console.error('Usage: reicon-mcp apply <name> --framework react|vue|svelte|html|svg');
+                console.error('Usage: reicon-mcp apply <name> --framework react|react-native|vue|svelte|html|svg [--weight Outline|Filled] [--size 24] [--color #hex] [--file path] [--marker "{/* ICON */}"]');
                 process.exit(1);
             }
             const framework = flags.framework || 'react';

package/core/codegen.js

@@ -10,7 +10,7 @@ function sizeProp(size, framework) {
         return ` :size="${size}"`;
     if (framework === 'html')
         return ` size="${size}"`;
-    if (framework === 'svelte' || framework === 'react')
+    if (framework === 'svelte' || framework === 'react' || framework === 'react-native')
         return ` size={${size}}`;
     return ` width="${size}" height="${size}"`;
 }
@@ -19,7 +19,7 @@ function colorProp(color, framework) {
         return ` color="${color}"`;
     if (framework === 'html')
         return ` color="${color}"`;
-    if (framework === 'svelte' || framework === 'react') {
+    if (framework === 'svelte' || framework === 'react' || framework === 'react-native') {
         const val = color === 'currentColor' ? 'currentColor' : `"${color}"`;
         return ` color={${val}}`;
     }
@@ -47,6 +47,16 @@ export function generateCode(icon, input) {
             const usageSnippet = `<${component}${props} />`;
             return { importStatement, usageSnippet };
         }
+        case 'react-native': {
+            const importStatement = `import { ${component} } from 'reicon-react-native';`;
+            const props = [
+                sizeProp(size, 'react-native'),
+                colorAttr('react-native'),
+                weightProp(weight, 'react-native'),
+            ].join('');
+            const usageSnippet = `<${component}${props} />`;
+            return { importStatement, usageSnippet };
+        }
         case 'vue': {
             const importStatement = `import { ${component} } from 'reicon-vue';`;
             const props = [

package/core/search.js

@@ -1,17 +1,99 @@
+// Only flag clearly conversational strings — short "add home icon" should be fine
 const SENTENCE_MARKERS = /\?|!|\.{2,}/;
-const SENTENCE_WORDS = /\b(please|could|would|want|need|show|find|give|get|me|my|the|a|an|icon for|looking for|i am|i'm|can you|help me)\b/i;
+const SENTENCE_WORDS = /\b(please|could|would|want|need|show|find|give|get me|looking for|i am|i'm|can you|help me|what is)\b/i;
 const SYNONYMS = {
     close: ['x'],
+    dismiss: ['x', 'close'],
+    cancel: ['x', 'close'],
     cart: ['cart', 'cart-large', 'shopping-cart2'],
     'shopping cart': ['cart', 'cart3', 'shopping-cart2', 'cart-large'],
     delete: ['trash', 'trash-bin-trash'],
     remove: ['trash', 'x'],
-    settings: ['settings', 'settings-minimalistic'],
+    bin: ['trash', 'trash-bin-trash'],
+    settings: ['settings', 'settings-minimalistic', 'cog'],
+    gear: ['settings', 'settings-minimalistic'],
+    cog: ['settings'],
     arrow: ['arrow-right', 'arrow-down', 'arrow-up', 'arrow-left'],
     search: ['search', 'minimalistic-magnifer'],
+    magnifier: ['search', 'minimalistic-magnifer'],
     heart: ['heart', 'heart-angle'],
+    love: ['heart', 'heart-angle'],
+    favorite: ['heart', 'star'],
     trash: ['trash', 'trash-bin-trash'],
     user: ['user', 'user-circle'],
+    person: ['user', 'user-circle'],
+    profile: ['user', 'user-circle'],
+    avatar: ['user', 'user-circle'],
+    home: ['home', 'home-2'],
+    house: ['home', 'home-2'],
+    menu: ['hamburger-menu', 'menu'],
+    hamburger: ['hamburger-menu'],
+    check: ['check', 'check-circle', 'check-read'],
+    tick: ['check', 'check-circle'],
+    notification: ['bell', 'bell-bing'],
+    bell: ['bell', 'bell-bing'],
+    alert: ['bell', 'shield-warning'],
+    warning: ['shield-warning'],
+    info: ['info-circle'],
+    information: ['info-circle'],
+    edit: ['pen', 'pen-2', 'edit'],
+    pencil: ['pen', 'pen-2'],
+    pen: ['pen', 'pen-2'],
+    send: ['send-2', 'send'],
+    share: ['share', 'share-2'],
+    download: ['download', 'download-minimalistic'],
+    upload: ['upload', 'upload-minimalistic'],
+    link: ['link', 'link-2'],
+    copy: ['copy', 'clipboard'],
+    clipboard: ['clipboard', 'copy'],
+    globe: ['globe', 'map'],
+    world: ['globe'],
+    lock: ['lock', 'lock-key-minimalistic'],
+    unlock: ['lock-opened', 'lock-opened-2'],
+    star: ['star', 'stars'],
+    eye: ['eye', 'eye-closed'],
+    visibility: ['eye', 'eye-closed'],
+    phone: ['phone', 'phone-calling-rounded'],
+    call: ['phone', 'phone-calling-rounded'],
+    calendar: ['calendar', 'calendar-date'],
+    date: ['calendar'],
+    time: ['clock', 'stopwatch'],
+    clock: ['clock'],
+    camera: ['camera'],
+    photo: ['camera', 'gallery'],
+    image: ['gallery', 'camera'],
+    message: ['chat-round', 'letter'],
+    chat: ['chat-round', 'chat-square'],
+    email: ['letter', 'letter-opened'],
+    mail: ['letter', 'letter-opened'],
+    add: ['add', 'add-circle'],
+    plus: ['add', 'add-circle'],
+    minus: ['subtract'],
+    subtract: ['subtract'],
+    refresh: ['refresh', 'restart'],
+    reload: ['refresh', 'restart'],
+    filter: ['filter'],
+    sort: ['sort', 'alt-arrow-down'],
+    grid: ['widget', 'four-circles'],
+    list: ['list'],
+    tag: ['tag'],
+    folder: ['folder', 'folder-open'],
+    file: ['file', 'file-text'],
+    document: ['file-text', 'document'],
+    chart: ['chart', 'pie-chart', 'chart-2'],
+    graph: ['chart', 'chart-2'],
+    play: ['play'],
+    pause: ['pause'],
+    stop: ['stop-circle'],
+    volume: ['volume'],
+    music: ['music-note', 'music-notes'],
+    map: ['map', 'map-point'],
+    location: ['map-point', 'target'],
+    pin: ['map-point'],
+    power: ['power'],
+    wifi: ['wifi'],
+    bluetooth: ['bluetooth'],
+    battery: ['battery'],
 };
 function normalize(text) {
     return text.toLowerCase().trim().replace(/\s+/g, ' ');
@@ -26,9 +108,11 @@ export function isSentenceQuery(query) {
     if (SENTENCE_MARKERS.test(trimmed))
         return true;
     const words = tokenize(trimmed);
-    if (words.length > 6)
+    // Only flag > 7 words as a sentence (was 6, which was too aggressive)
+    if (words.length > 7)
         return true;
-    if (words.length >= 4 && SENTENCE_WORDS.test(trimmed))
+    // Only flag if sentence words appear AND query is 5+ words
+    if (words.length >= 5 && SENTENCE_WORDS.test(trimmed))
         return true;
     if (/^(how|what|where|which|why|when)\b/i.test(trimmed))
         return true;
@@ -44,37 +128,70 @@ function synonymBoost(query, name) {
         return 0;
     return 3000 - idx * 100;
 }
+// Fuzzy partial match — how many chars of `token` appear sequentially in `str`
+function fuzzyScore(str, token) {
+    let ti = 0;
+    let hits = 0;
+    for (const c of str) {
+        if (ti < token.length && c === token[ti]) {
+            ti++;
+            hits++;
+        }
+    }
+    return ti === token.length ? Math.round((hits / str.length) * 100) : 0;
+}
 function scoreIcon(icon, query, tokens, weight) {
     const q = normalize(query);
     const name = icon.name;
     const nameNorm = name.replace(/-/g, ' ');
+    const catNorm = icon.category.replace(/-/g, ' ').toLowerCase();
     const tagsNorm = icon.tags.map((t) => normalize(t));
     let score = 0;
+    // Synonym boost
     score += synonymBoost(query, name);
+    // Exact name match
     if (name === q || name === q.replace(/ /g, '-')) {
         score += 10000;
     }
+    // Single token exact match
     if (tokens.length === 1 && name === tokens[0]) {
         score += 5000;
     }
+    // All tokens appear in name
     if (tokens.every((t) => name.includes(t) || nameNorm.includes(t))) {
         score += 2000;
     }
+    // Full tag exact match
     if (tagsNorm.some((t) => t === q)) {
         score += 1500;
     }
     for (const token of tokens) {
+        // Exact tag match
         if (tagsNorm.some((t) => t === token))
             score += 800;
+        // Name includes token
         if (name.includes(token))
             score += 600;
+        // Name starts with token (prefix boost)
+        if (name.startsWith(token))
+            score += 400;
+        // Tag includes token
         if (tagsNorm.some((t) => t.includes(token)))
             score += 300;
+        // Category match
+        if (catNorm.includes(token))
+            score += 150;
+        // Fuzzy fallback — only if no direct match
+        const directMatch = name.includes(token) || tagsNorm.some((t) => t.includes(token));
+        if (!directMatch) {
+            const fuzz = fuzzyScore(name, token);
+            if (fuzz > 70)
+                score += Math.round(fuzz * 0.8);
+        }
     }
-    if (tokens.length === 1 && name.startsWith(tokens[0])) {
-        score += 400;
-    }
+    // Prefer shorter names (more specific)
     score += Math.max(0, 50 - name.length);
+    // Weight filter
     if (weight) {
         if (icon.weights[weight])
             score += 10;
@@ -89,7 +206,8 @@ export function searchIcons(index, query, options = {}) {
             error: 'Query looks like a full sentence. Use concise keywords instead, such as "cart", "user", or "settings".',
         };
     }
-    const limit = options.limit ?? 5;
+    // Default limit raised from 5 → 8 for better agent context
+    const limit = options.limit ?? 8;
     const tokens = tokenize(query);
     const weights = options.weight ? [options.weight] : ['Outline', 'Filled'];
     const results = [];
@@ -121,9 +239,14 @@ export function searchIcons(index, query, options = {}) {
         if (deduped.length >= limit)
             break;
     }
+    if (deduped.length === 0) {
+        return {
+            error: `No icons found for "${query}". Try a shorter or different keyword.`,
+        };
+    }
     return {
         results: deduped,
-        instruction: 'Pick exactly one result from the list above and proceed with view_icon or apply_icon. Do not ask a person to choose.',
+        instruction: 'Pick exactly one result from the list above. Prefer the highest score. Then call view_icon to confirm the SVG, or apply_icon to generate ready-to-use code. Do not ask the user to choose.',
     };
 }
 export function findIcon(index, name) {

package/core/types.d.ts

@@ -1,5 +1,5 @@
 export type IconWeight = 'Outline' | 'Filled';
-export type Framework = 'react' | 'vue' | 'svelte' | 'html' | 'svg';
+export type Framework = 'react' | 'react-native' | 'vue' | 'svelte' | 'html' | 'svg';
 export interface IconWeightData {
     code: string;
     viewBox: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reicon-mcp",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "MCP server and CLI for browsing and applying Reicon icons.",
   "bin": {

package/server/index.js

@@ -7,41 +7,85 @@ import { handleSearchIcons } from './tools/search-icons.js';
 import { handleViewIcon } from './tools/view-icon.js';
 const server = new McpServer({
     name: 'reicon-mcp',
-    version: '1.0.0',
+    version: '1.0.1',
 });
-server.tool('search_icons', 'Search Reicon icons by keyword. Returns ranked matches for agent selection.', {
-    query: z.string().describe('Concise search keywords, not full sentences'),
-    weight: z.enum(['Outline', 'Filled']).optional(),
-    limit: z.number().optional(),
+server.tool('search_icons', [
+    'Search 2,700+ Reicon icons by keyword.',
+    'Returns ranked matches. Use short, specific terms — not full sentences.',
+    'Good queries: "cart", "user circle", "arrow down", "settings".',
+    'Bad queries: "please find me a heart icon" or "I need a shopping cart".',
+    'After getting results, pick the highest-scoring match and call apply_icon directly.',
+    'Only call view_icon first if you need to inspect the raw SVG before generating code.',
+].join(' '), {
+    query: z.string().describe('Concise keyword(s) — e.g. "cart", "bell", "user circle". Not full sentences.'),
+    weight: z
+        .enum(['Outline', 'Filled'])
+        .optional()
+        .describe('Filter by weight. Omit to search both.'),
+    limit: z
+        .number()
+        .int()
+        .min(1)
+        .max(20)
+        .optional()
+        .describe('Max results to return. Defaults to 8.'),
 }, async (args) => {
     const result = handleSearchIcons(args);
     return {
         content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
     };
 });
-server.tool('view_icon', 'View raw SVG markup and metadata for a Reicon icon.', {
-    name: z.string().describe('Icon kebab-case name'),
-    weight: z.enum(['Outline', 'Filled']),
+server.tool('view_icon', [
+    'Fetch raw SVG markup and metadata for a specific Reicon icon.',
+    'Use this to inspect the SVG before applying, or when you only need the raw markup.',
+    'For generating import/usage code, prefer apply_icon instead.',
+].join(' '), {
+    name: z.string().describe('Icon kebab-case name, e.g. "heart", "arrow-right", "user-circle"'),
+    weight: z.enum(['Outline', 'Filled']).describe('Which weight variant to fetch'),
 }, async (args) => {
     const result = handleViewIcon(args);
     return {
         content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
     };
 });
-server.tool('apply_icon', 'Generate copy-pasteable import and usage code for a Reicon icon.', {
-    name: z.string(),
-    weight: z.enum(['Outline', 'Filled']),
-    framework: z.enum(['react', 'vue', 'svelte', 'html', 'svg']),
-    size: z.number().optional(),
-    color: z.string().optional(),
-    componentName: z.string().optional(),
+server.tool('apply_icon', [
+    'Generate ready-to-paste import and usage code for a Reicon icon.',
+    'Returns importStatement and usageSnippet for the chosen framework.',
+    'Supported frameworks: react, react-native, vue, svelte, html (CDN custom element), svg (raw markup).',
+    'Insert importStatement at the top of the file and usageSnippet where the icon should appear.',
+    'Always call search_icons first to confirm the icon name and weight exist.',
+].join(' '), {
+    name: z.string().describe('Icon kebab-case name, e.g. "heart"'),
+    weight: z.enum(['Outline', 'Filled']).describe('Icon weight variant'),
+    framework: z
+        .enum(['react', 'react-native', 'vue', 'svelte', 'html', 'svg'])
+        .describe('Target framework or output format'),
+    size: z
+        .number()
+        .int()
+        .min(8)
+        .max(256)
+        .optional()
+        .describe('Icon size in pixels. Defaults to 24.'),
+    color: z
+        .string()
+        .optional()
+        .describe('CSS color value, e.g. "#ef4444" or "currentColor". Defaults to currentColor.'),
+    componentName: z
+        .string()
+        .optional()
+        .describe('Override the component name. Defaults to the PascalCase icon name.'),
 }, async (args) => {
     const result = handleApplyIcon(args);
     return {
         content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
     };
 });
-server.tool('list_categories', 'List all icon categories in the Reicon dataset.', {}, async () => {
+server.tool('list_categories', [
+    'List all icon categories available in the Reicon dataset.',
+    'Use this to explore what types of icons exist before searching.',
+    'Each category can be used as a search keyword with search_icons.',
+].join(' '), {}, async () => {
     const result = handleListCategories();
     return {
         content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],

package/server/tools/apply-icon.d.ts

@@ -1,4 +1,18 @@
 import type { ApplyIconInput } from '../../core/types.js';
-export declare function handleApplyIcon(args: ApplyIconInput): import("../../core/types.js").ApplyIconOutput | {
+export declare function handleApplyIcon(args: ApplyIconInput): {
     error: string;
+} | {
+    error: string;
+    suggestion: string;
+} | {
+    meta: {
+        name: string;
+        weight: import("../../core/types.js").IconWeight;
+        framework: import("../../core/types.js").Framework;
+        size: number;
+    };
+    importStatement: string;
+    usageSnippet: string;
+    error?: undefined;
+    suggestion?: undefined;
 };

package/server/tools/apply-icon.js

@@ -5,7 +5,31 @@ export function handleApplyIcon(args) {
     const index = loadIndex();
     const icon = findIcon(index, args.name);
     if (!icon) {
-        return { error: `Icon "${args.name}" not found.` };
+        // Soft-match: try normalized kebab-case
+        const lower = args.name.toLowerCase().replace(/\s+/g, '-');
+        const match = index.icons.find((i) => i.name.toLowerCase() === lower ||
+            i.pascal.toLowerCase() === lower.replace(/-/g, ''));
+        if (match) {
+            return {
+                error: `Icon "${args.name}" not found. Did you mean "${match.name}"? Call apply_icon again with name="${match.name}".`,
+                suggestion: match.name,
+            };
+        }
+        return {
+            error: `Icon "${args.name}" not found. Use search_icons to find the correct name.`,
+        };
     }
-    return generateCode(icon, args);
+    const result = generateCode(icon, args);
+    if ('error' in result)
+        return result;
+    return {
+        ...result,
+        // Echo back key info so the agent can confirm what was applied
+        meta: {
+            name: icon.name,
+            weight: args.weight,
+            framework: args.framework,
+            size: args.size ?? 24,
+        },
+    };
 }

package/server/tools/view-icon.d.ts

@@ -5,8 +5,25 @@ export declare function handleViewIcon(args: {
 }): {
     error: string;
 } | {
-    svg: string;
-    viewBox: string;
-    tags: string[];
+    error: string;
+    suggestion: string;
+    name?: undefined;
+    weight?: undefined;
+    availableWeights?: undefined;
+    category?: undefined;
+    tags?: undefined;
+    viewBox?: undefined;
+    svg?: undefined;
+    hint?: undefined;
+} | {
+    name: string;
+    weight: IconWeight;
+    availableWeights: IconWeight[];
     category: string;
+    tags: string[];
+    viewBox: string;
+    svg: string;
+    hint: string;
+    error?: undefined;
+    suggestion?: undefined;
 };

package/server/tools/view-icon.js

@@ -5,17 +5,31 @@ export function handleViewIcon(args) {
     const index = loadIndex();
     const icon = findIcon(index, args.name);
     if (!icon) {
-        return { error: `Icon "${args.name}" not found.` };
+        // Try a soft match in case casing or dashes differ
+        const lower = args.name.toLowerCase().replace(/\s+/g, '-');
+        const match = index.icons.find((i) => i.name.toLowerCase() === lower || i.pascal.toLowerCase() === lower.replace(/-/g, ''));
+        if (match) {
+            return {
+                error: `Icon "${args.name}" not found. Did you mean "${match.name}"?`,
+                suggestion: match.name,
+            };
+        }
+        return { error: `Icon "${args.name}" not found. Use search_icons to find the correct name.` };
     }
     const svg = buildSvgMarkup(icon, args.weight);
     if (typeof svg !== 'string') {
         return svg;
     }
     const weightData = icon.weights[args.weight];
+    const availableWeights = Object.keys(icon.weights);
     return {
-        svg,
-        viewBox: weightData.viewBox,
-        tags: icon.tags,
+        name: icon.name,
+        weight: args.weight,
+        availableWeights,
         category: icon.category,
+        tags: icon.tags,
+        viewBox: weightData.viewBox,
+        svg,
+        hint: 'Call apply_icon with this name and weight to generate framework-specific code.',
     };
 }