Swytchcode AI API Assistant

A modern, mobile-first AI API assistant for developers. Easily integrate into any React application or run as a standalone app. Get instant help with code, workflows, documentation, APIs, and SDKs.

Features

• AI-Powered Chat Interface - Get intelligent responses about code, workflows, and documentation
• Mobile-First Design - Responsive layout for all devices
• Methods Browser - Explore SDK methods with syntax, examples, and documentation
• Workflow Guides - Step-by-step tutorials with code examples
• Multi-Library Support - Select and work with multiple libraries simultaneously
• Customizable Theming - Light, dark, and custom themes
• Multi-Language Support - JavaScript, TypeScript, Python, Java, and more
• SDK Integration - Built-in support for React, Axios, and other popular frameworks
• MCP Integration - Model Context Protocol integration for enhanced AI capabilities

Quick Start

Installation (as a Library)

npm install swytchcode

Peer Dependencies

This library requires react and react-dom (v16.8.0 or higher) in your project.

CSS Import (Required)

Note: The library's styles are automatically included for most setups (Vite, webpack, CRA, etc.) because the CSS is imported in the library entry. If you do not see styles, you can manually import:

import 'swytchcode/dist/style.css';

Add this to your app's entry point (e.g., src/main.tsx or src/index.js).

Usage Example

import { Swytchcode } from 'swytchcode';

function App() {
  return (
    <Swytchcode
      apiBaseUrl={process.env.REACT_APP_API_BASE_URL}
      projectApiKey={process.env.REACT_APP_PROJECT_API_KEY}
      show_mcp={true}
    />
  );
}

Running as a Standalone App

For local development or demo:

npm install
npm run dev

This will start the Vite dev server and open the app in your browser.

Key Features

Multi-Library Support

Select and work with multiple libraries simultaneously. The library selector supports:

• Checkbox-based multi-selection
• Persistent selection across different views (chat, methods, workflows)
• URL query parameter support for pre-selecting libraries
• Search and filter capabilities

Enhanced Methods Browser

• View methods from multiple selected libraries
• Expand to see method details, descriptions, and tags
• Search across method names, descriptions, and tags
• Test methods with CORS proxy support

Workflow Management

• Browse workflows from multiple libraries
• Step-by-step workflow execution
• Expand to see workflow steps and tags
• Search across workflow names, descriptions, and tags

Chat Integration

• AI-powered chat that works with selected libraries
• Context-aware responses based on your library selection
• Seamless integration with methods and workflows

Customization

Custom Themes

const customTheme = {
  '--primary-color': '#007bff',
  '--secondary-color': '#6c757d',
  '--background-color': '#ffffff',
  '--text-color': '#333333',
};

<Swytchcode customTheme={customTheme} />