diff --git a/website/astro.config.mjs b/website/astro.config.mjs index 63d93bea6..570bc34b2 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -81,10 +81,22 @@ export default defineConfig({ label: 'MCP Examples', collapsed: true, items: [ + { + label: 'Browser Control (Browserbase)', + slug: 'jan/mcp-examples/browser/browserbase', + }, { label: 'Code Sandbox (E2B)', slug: 'jan/mcp-examples/data-analysis/e2b', }, + { + label: 'Design Creation (Canva)', + slug: 'jan/mcp-examples/design/canva', + }, + { + label: 'Deep Research (Octagon)', + slug: 'jan/mcp-examples/deepresearch/octagon', + }, { label: 'Web Search with Exa', slug: 'jan/mcp-examples/search/exa', diff --git a/website/src/assets/browserbase.png b/website/src/assets/browserbase.png new file mode 100644 index 000000000..7624e187b Binary files /dev/null and b/website/src/assets/browserbase.png differ diff --git a/website/src/assets/browserbase2.png b/website/src/assets/browserbase2.png new file mode 100644 index 000000000..b4b1793be Binary files /dev/null and b/website/src/assets/browserbase2.png differ diff --git a/website/src/assets/browserbase3.png b/website/src/assets/browserbase3.png new file mode 100644 index 000000000..5d7836e53 Binary files /dev/null and b/website/src/assets/browserbase3.png differ diff --git a/website/src/assets/browserbase4.png b/website/src/assets/browserbase4.png new file mode 100644 index 000000000..79d460021 Binary files /dev/null and b/website/src/assets/browserbase4.png differ diff --git a/website/src/assets/browserbase5.png b/website/src/assets/browserbase5.png new file mode 100644 index 000000000..bc6d97a16 Binary files /dev/null and b/website/src/assets/browserbase5.png differ diff --git a/website/src/assets/browserbase6.png b/website/src/assets/browserbase6.png new file mode 100644 index 000000000..f33f863d7 Binary files /dev/null and b/website/src/assets/browserbase6.png differ diff --git a/website/src/assets/browserbase7.png b/website/src/assets/browserbase7.png new file mode 100644 index 000000000..005d9e15f Binary files /dev/null and b/website/src/assets/browserbase7.png differ diff --git a/website/src/assets/canva.png b/website/src/assets/canva.png new file mode 100644 index 000000000..5fe27c779 Binary files /dev/null and b/website/src/assets/canva.png differ diff --git a/website/src/assets/canva2.png b/website/src/assets/canva2.png new file mode 100644 index 000000000..63f934132 Binary files /dev/null and b/website/src/assets/canva2.png differ diff --git a/website/src/assets/canva3.png b/website/src/assets/canva3.png new file mode 100644 index 000000000..db07b6ddb Binary files /dev/null and b/website/src/assets/canva3.png differ diff --git a/website/src/assets/canva4.png b/website/src/assets/canva4.png new file mode 100644 index 000000000..6dac7b7e1 Binary files /dev/null and b/website/src/assets/canva4.png differ diff --git a/website/src/assets/canva5.png b/website/src/assets/canva5.png new file mode 100644 index 000000000..7c8ee337f Binary files /dev/null and b/website/src/assets/canva5.png differ diff --git a/website/src/assets/canva6.png b/website/src/assets/canva6.png new file mode 100644 index 000000000..d98f4cec3 Binary files /dev/null and b/website/src/assets/canva6.png differ diff --git a/website/src/assets/canva7.png b/website/src/assets/canva7.png new file mode 100644 index 000000000..2d6ca7275 Binary files /dev/null and b/website/src/assets/canva7.png differ diff --git a/website/src/assets/canva8.png b/website/src/assets/canva8.png new file mode 100644 index 000000000..54d397b57 Binary files /dev/null and b/website/src/assets/canva8.png differ diff --git a/website/src/assets/canva9.png b/website/src/assets/canva9.png new file mode 100644 index 000000000..d242c7da2 Binary files /dev/null and b/website/src/assets/canva9.png differ diff --git a/website/src/assets/octagon.png b/website/src/assets/octagon.png new file mode 100644 index 000000000..416d4672d Binary files /dev/null and b/website/src/assets/octagon.png differ diff --git a/website/src/assets/octagon2.png b/website/src/assets/octagon2.png new file mode 100644 index 000000000..6afb8cb57 Binary files /dev/null and b/website/src/assets/octagon2.png differ diff --git a/website/src/assets/octagon3.png b/website/src/assets/octagon3.png new file mode 100644 index 000000000..2b7af9dfe Binary files /dev/null and b/website/src/assets/octagon3.png differ diff --git a/website/src/assets/octagon4.png b/website/src/assets/octagon4.png new file mode 100644 index 000000000..4995a9576 Binary files /dev/null and b/website/src/assets/octagon4.png differ diff --git a/website/src/assets/octagon5.png b/website/src/assets/octagon5.png new file mode 100644 index 000000000..9264ed5a2 Binary files /dev/null and b/website/src/assets/octagon5.png differ diff --git a/website/src/assets/octagon6.png b/website/src/assets/octagon6.png new file mode 100644 index 000000000..5645f99af Binary files /dev/null and b/website/src/assets/octagon6.png differ diff --git a/website/src/assets/octagon7.png b/website/src/assets/octagon7.png new file mode 100644 index 000000000..3f37d0784 Binary files /dev/null and b/website/src/assets/octagon7.png differ diff --git a/website/src/assets/octagon8.png b/website/src/assets/octagon8.png new file mode 100644 index 000000000..bb5d99b53 Binary files /dev/null and b/website/src/assets/octagon8.png differ diff --git a/website/src/assets/octagon9.png b/website/src/assets/octagon9.png new file mode 100644 index 000000000..a6e39caf4 Binary files /dev/null and b/website/src/assets/octagon9.png differ diff --git a/website/src/content/docs/jan/explanation/model-parameters.mdx b/website/src/content/docs/jan/explanation/model-parameters.mdx index 4b60afd68..d86fa5f44 100644 --- a/website/src/content/docs/jan/explanation/model-parameters.mdx +++ b/website/src/content/docs/jan/explanation/model-parameters.mdx @@ -16,8 +16,9 @@ keywords: parameters, ] --- +import { Aside, Steps } from '@astrojs/starlight/components' -import { Aside } from '@astrojs/starlight/components'; +# Model Parameters Model parameters control how your AI thinks and responds. Think of them as the AI's personality settings and performance controls. @@ -32,7 +33,7 @@ Model parameters control how your AI thinks and responds. Think of them as the A **For model capabilities:** - Click the **edit button** next to a model to enable features like vision or tools -## Performance Settings +## Performance Settings (Gear Icon) These settings control how the model thinks and performs: @@ -51,7 +52,7 @@ These settings control how the model thinks and performs: ![Model Parameters](../../../../assets/model-parameters.png) -## Model Capabilities +## Model Capabilities (Edit Button) These toggle switches enable special features: diff --git a/website/src/content/docs/jan/mcp-examples/browser/browserbase.mdx b/website/src/content/docs/jan/mcp-examples/browser/browserbase.mdx new file mode 100644 index 000000000..a8963d029 --- /dev/null +++ b/website/src/content/docs/jan/mcp-examples/browser/browserbase.mdx @@ -0,0 +1,273 @@ +--- +title: Browserbase MCP +description: Control browsers with natural language through Browserbase's cloud infrastructure. +keywords: + [ + Jan, + MCP, + Model Context Protocol, + Browserbase, + browser automation, + web scraping, + Stagehand, + headless browser, + tool calling, + ] +--- + +import { Aside, Steps } from '@astrojs/starlight/components' + +[Browserbase MCP](https://docs.browserbase.com/integrations/mcp/introduction) gives AI models actual browser control through cloud infrastructure. Built on Stagehand, it lets you navigate websites, extract data, and interact with web pages using natural language commands. + +The integration provides real browser sessions that AI can control, enabling tasks that go beyond simple web search APIs. + +## Available Tools + + + +### Multi-Session Tools +- `multi_browserbase_stagehand_session_create`: Create parallel browser sessions +- `multi_browserbase_stagehand_session_list`: Track active sessions +- `multi_browserbase_stagehand_session_close`: Clean up sessions +- `multi_browserbase_stagehand_navigate_session`: Navigate in specific session + +### Core Browser Actions +- `browserbase_stagehand_navigate`: Navigate to URLs +- `browserbase_stagehand_act`: Perform actions ("click the login button") +- `browserbase_stagehand_extract`: Extract text content +- `browserbase_stagehand_observe`: Find page elements +- `browserbase_screenshot`: Capture screenshots + +### Session Management +- `browserbase_session_create`: Create or reuse sessions +- `browserbase_session_close`: Close active sessions + +## Prerequisites + +- Jan with MCP enabled +- Browserbase account (includes 60 minutes free usage) +- Model with strong tool calling support +- Node.js installed + + + +## Setup + +### Enable MCP + +1. Go to **Settings** > **MCP Servers** +2. Toggle **Allow All MCP Tool Permission** ON + +![MCP settings page with toggle enabled](../../../../../assets/mcp-on.png) + +### Get Browserbase Credentials + +1. Sign up at [browserbase.com](https://browserbase.com) + - Email verification required + - Phone number authentication + - Thorough security process + +2. Access your dashboard and copy: + - **API Key** + - **Project ID** + +![Browserbase dashboard showing API key and project ID](../../../../../assets/browserbase.png) + +### Configure MCP Server + +Click `+` in MCP Servers section: + +**NPM Package Configuration:** +- **Server Name**: `browserbase` +- **Command**: `npx` +- **Arguments**: `@browserbasehq/mcp-server-browserbase` +- **Environment Variables**: + - Key: `BROWSERBASE_API_KEY`, Value: `your-api-key` + - Key: `BROWSERBASE_PROJECT_ID`, Value: `your-project-id` + +![Jan MCP server configuration with Browserbase settings](../../../../../assets/browserbase3.png) + +### Verify Setup + +Check the tools bubble in chat to confirm Browserbase tools are available: + +![Chat interface showing available Browserbase tools](../../../../../assets/browserbase2.png) + +## Real Usage Example + +### Live Information Query + +``` +Which sports matches are happening right now in Australia (irrespective of the sport)? +``` + +This simple query demonstrates browser automation in action: + +1. **Tool Activation** + - Model creates browser session + - Navigates to sports websites + - Extracts current match data + +![Model using browser tools to search for information](../../../../../assets/browserbase5.png) + +2. **Results Delivery** + - Real-time match information + - Multiple sports covered + - Current scores and timings + +![Final response with Australian sports matches](../../../../../assets/browserbase6.png) + +The AI successfully found: +- AFL matches with live scores +- NRL games in progress +- Upcoming Rugby Union fixtures + +## Common Issues + +### Tool Call Failures + +Sometimes tool calls fail due to parsing issues: + +![Tool call error showing parsing problem](../../../../../assets/browserbase7.png) + +**Solutions:** +- Try rephrasing your prompt +- Disable unnecessary tools +- Use simpler, more direct requests +- Switch to Claude 3.5+ Sonnet if using another model + +### Model Limitations + +Most models struggle with multiple tools. If experiencing issues: +- Start with single-purpose requests +- Build complexity gradually +- Consider which tools are actually needed +- Expect some trial and error initially + +## Usage Limits + +**Free Tier:** +- 60 minutes of browser time included +- Sessions auto-terminate after 5 minutes inactivity +- Can adjust timeout in Browserbase dashboard +- Usage visible in dashboard analytics + +**Session Management:** +- Each browser session counts against time +- Close sessions when done to conserve minutes +- Multi-session operations consume time faster + +## Practical Use Cases + +### Real-Time Data Collection +``` +Check current prices for MacBook Pro M4 at major Australian retailers and create a comparison table. +``` + +### Form Testing +``` +Navigate to myservice.gov.au and walk through the Medicare claim process, documenting each required field. +``` + +### Content Monitoring +``` +Visit ABC News Australia and extract the top 5 breaking news headlines with their timestamps. +``` + +### Multi-Site Analysis +``` +Compare flight prices from Sydney to Tokyo next week across Qantas, Jetstar, and Virgin Australia. +``` + +### Automated Verification +``` +Check if our company is listed correctly on Google Maps, Yelp, and Yellow Pages, noting any discrepancies. +``` + +## Advanced Techniques + +### Session Reuse +``` +Create a browser session, log into LinkedIn, then search for "AI engineers in Melbourne" and extract the first 10 profiles. +``` + +### Parallel Operations +``` +Create three browser sessions: monitor stock prices on ASX, check crypto on CoinSpot, and track forex on XE simultaneously. +``` + +### Sequential Workflows +``` +Go to seek.com.au, search for "data scientist" jobs in Sydney, apply filters for $150k+, then extract job titles and companies. +``` + +## Optimization Tips + +**Prompt Engineering:** +- Be specific about what to extract +- Name exact websites when possible +- Break complex tasks into steps +- Specify output format clearly + +**Tool Selection:** +- Use multi-session only when needed +- Close sessions promptly +- Choose observe before act when possible +- Screenshot sparingly to save time + +**Error Recovery:** +- Have fallback prompts ready +- Start simple, add complexity +- Watch for timeout warnings +- Monitor usage in dashboard + +## Troubleshooting + +**Connection Issues:** +- Verify API key and Project ID +- Check Browserbase service status +- Ensure NPX can download packages +- Restart Jan after configuration + +**Browser Failures:** +- Some sites block automation +- Try different navigation paths +- Check if site requires login +- Verify target site is accessible + +**Performance Problems:** +- Reduce concurrent sessions +- Simplify extraction requests +- Check remaining time quota +- Consider upgrading plan + +**Model Struggles:** +- Too many tools overwhelm most models +- Claude 3.5+ Sonnet most reliable +- Reduce available tools if needed +- Use focused, clear instructions + + + +## Browserbase vs Browser Use + +| Feature | Browserbase | Browser Use | +|---------|-------------|-------------| +| **Infrastructure** | Cloud browsers | Local browser | +| **Setup Complexity** | API key only | Python environment | +| **Performance** | Consistent | System dependent | +| **Cost** | Usage-based | Free (local resources) | +| **Reliability** | High | Variable | +| **Privacy** | Cloud-based | Fully local | + +## Next Steps + +Browserbase MCP provides genuine browser automation capabilities, not just web search. This enables complex workflows like form filling, multi-site monitoring, and data extraction that would be impossible with traditional APIs. + +The cloud infrastructure handles browser complexity while Jan maintains conversational privacy. Just remember: with great browser power comes occasional parsing errors. diff --git a/website/src/content/docs/jan/mcp-examples/deepresearch/octagon.mdx b/website/src/content/docs/jan/mcp-examples/deepresearch/octagon.mdx new file mode 100644 index 000000000..aba5cc9d9 --- /dev/null +++ b/website/src/content/docs/jan/mcp-examples/deepresearch/octagon.mdx @@ -0,0 +1,259 @@ +--- +title: Octagon Deep Research MCP +description: Finance-focused deep research with AI-powered analysis through Octagon's MCP integration. +keywords: + [ + Jan, + MCP, + Model Context Protocol, + Octagon, + deep research, + financial research, + private equity, + market analysis, + technical research, + tool calling, + ] +--- + +import { Aside, Steps } from '@astrojs/starlight/components' + + +[Octagon Deep Research MCP](https://docs.octagonagents.com/guide/deep-research-mcp.html) provides specialized AI research capabilities with a strong focus on financial markets and business intelligence. Unlike general research tools, Octagon excels at complex financial analysis, market dynamics, and investment research. + +The integration delivers comprehensive reports that combine multiple data sources, cross-verification, and actionable insights - particularly useful for understanding market structures, investment strategies, and business models. + +## Available Tools + +### octagon-agent +Orchestrates comprehensive market intelligence research, particularly strong in: +- Financial market analysis +- Private equity and M&A research +- Corporate structure investigations +- Investment strategy evaluation + +### octagon-scraper-agent +Specialized web scraping for public and private market data: +- SEC filings and regulatory documents +- Company financials and metrics +- Market transaction data +- Industry reports and analysis + +### octagon-deep-research-agent +Comprehensive research synthesis combining: +- Multi-source data aggregation +- Cross-verification of claims +- Historical trend analysis +- Actionable insights generation + +## Prerequisites + +- Jan with MCP enabled +- Octagon account (includes 2-week Pro trial) +- Model with tool calling support +- Node.js installed + + + +## Setup + +### Enable MCP + +1. Go to **Settings** > **MCP Servers** +2. Toggle **Allow All MCP Tool Permission** ON + +![MCP settings page with toggle enabled](../../../../../assets/mcp-on.png) + +### Get Octagon API Key + +1. Sign up at [Octagon signup page](https://app.octagonai.co/signup/?redirectToAfterSignup=https://app.octagonai.co/api-keys) +2. Navigate to the API playground +3. Copy your API key from the dashboard + +![Octagon API playground showing API key location](../../../../../assets/octagon2.png) + +### Configure MCP Server + +Click `+` in MCP Servers section: + +**NPM Package Configuration:** +- **Server Name**: `octagon-mcp-server` +- **Command**: `npx` +- **Arguments**: `-y octagon-mcp@latest` +- **Environment Variables**: + - Key: `OCTAGON_API_KEY`, Value: `your-api-key` + +![Jan MCP server configuration with Octagon settings](../../../../../assets/octagon3.png) + +### Verify Setup + +Check the tools bubble in chat to confirm Octagon tools are available: + +![Chat interface showing available Octagon tools with moonshotai/kimi-k2 model](../../../../../assets/octagon4.png) + +## Real-World Example: Private Equity Analysis + +Here's an actual deep research query demonstrating Octagon's financial analysis capabilities: + +### The Prompt + +``` +Break apart the private equity paradox: How did an industry that promises to "unlock value" become synonymous with gutting companies, yet still attracts the world's smartest money? + +Start with the mechanics—how PE firms use other people's money to buy companies with borrowed cash, then charge fees for the privilege. Trace the evolution from corporate raiders of the 1980s to today's trillion-dollar titans like Blackstone, KKR, and Apollo. Use SEC filings, M&A databases, and bankruptcy records to map their empires. + +Dig into specific deals that illustrate the dual nature: companies genuinely transformed versus those stripped and flipped. Compare Toys "R" Us's death to Hilton's resurrection. Examine how PE-owned companies fare during economic downturns—do they really have "patient capital" or do they bleed portfolio companies dry through dividend recaps? + +Investigate the fee structure that makes partners billionaires regardless of performance. Calculate the real returns after the 2-and-20 (or worse) fee structures. Why do pension funds and endowments keep pouring money in despite academic studies showing they'd do better in index funds? + +Explore the revolving door between PE, government, and central banks. How many Fed officials and Treasury secretaries came from or went to PE? Map the political donations and lobbying expenditures that keep carried interest taxed as capital gains. + +Address the human cost through labor statistics and case studies—what happens to employees when PE takes over? But also examine when PE genuinely saves failing companies and preserves jobs. + +Write this as if explaining to a skeptical but curious friend over drinks—clear language, no jargon without explanation, and enough dry humor to make the absurdities apparent. Think Michael Lewis meets Matt Levine. Keep it under 3,000 words but pack it with hard data and real examples. The goal: help readers understand why PE is simultaneously capitalism's most sophisticated expression and its most primitive. +``` + +![Prompt entered in Jan UI](../../../../../assets/octagon5.png) + +### Research Process + +The AI engages multiple Octagon tools to gather comprehensive data: + +![Kimi model using Octagon tools for research](../../../../../assets/octagon6.png) + +### The Results + +Octagon delivers a detailed analysis covering: + +**Part 1: The Mechanics Explained** +![First part of the research report](../../../../../assets/octagon7.png) + +**Part 2: Historical Analysis and Case Studies** +![Second part showing PE evolution and specific deals](../../../../../assets/octagon8.png) + +**Part 3: Financial Engineering and Human Impact** +![Final section on fee structures and consequences](../../../../../assets/octagon9.png) + +The report demonstrates Octagon's ability to: +- Access and analyze SEC filings +- Compare multiple deal outcomes +- Calculate real returns after fees +- Track political connections +- Assess human impact with data + +## Finance-Focused Use Cases + +### Investment Research +``` +Analyze Tesla's vertical integration strategy vs traditional automakers. Include supply chain dependencies, margin analysis, and capital efficiency metrics from the last 5 years. +``` + +### Market Structure Analysis +``` +Map the concentration of market makers in US equities. Who controls order flow, what are their profit margins, and how has this changed since zero-commission trading? +``` + +### Corporate Governance +``` +Investigate executive compensation at the 10 largest US banks post-2008. Compare pay ratios, stock buybacks vs R&D spending, and correlation with shareholder returns. +``` + +### Private Market Intelligence +``` +Track Series B+ funding rounds in AI/ML companies in 2024. Identify valuation trends, investor concentration, and compare to public market multiples. +``` + +### Regulatory Analysis +``` +Examine how Basel III implementation differs across major markets. Which banks gained competitive advantages and why? +``` + +### M&A Strategy +``` +Analyze Microsoft's acquisition strategy under Nadella. Calculate actual vs projected synergies, integration success rates, and impact on market position. +``` + +## Technical Research Capabilities + +While finance-focused, Octagon also handles technical research: + +### Framework Evaluation +``` +Compare Kubernetes alternatives for edge computing. Consider resource usage, latency, reliability, and operational complexity with real deployment data. +``` + +### API Economics +``` +Analyze the unit economics of major AI API providers. Include pricing history, usage patterns, and margin estimates based on reported compute costs. +``` + +### Open Source Sustainability +``` +Research funding models for critical open source infrastructure. Which projects are at risk and what are the economic incentives misalignments? +``` + +## Research Quality + +Octagon's reports typically include: +- **Primary Sources**: SEC filings, earnings calls, regulatory documents +- **Quantitative Analysis**: Financial metrics, ratios, trend analysis +- **Comparative Studies**: Peer benchmarking, historical context +- **Narrative Clarity**: Complex topics explained accessibly +- **Actionable Insights**: Not just data, but implications + +## Troubleshooting + +**Authentication Issues:** +- Verify API key from Octagon dashboard +- Check trial status hasn't expired +- Ensure correct API key format +- Contact Octagon support if needed + +**Research Failures:** +- Some queries may exceed scope (try narrowing) +- Financial data may have access restrictions +- Break complex queries into parts +- Allow time for comprehensive research + +**Tool Calling Problems:** +- Not all models handle multiple tools well +- Kimi-k2 via OpenRouter works reliably +- Claude 3.5+ Sonnet also recommended +- Enable tool calling in model settings + +**Performance Considerations:** +- Deep research takes time (be patient) +- Complex financial analysis may take minutes +- Monitor API usage in dashboard +- Consider query complexity vs urgency + + + +## Pricing After Trial + +After the 2-week Pro trial: +- Check current pricing at octagonagents.com +- Usage-based pricing for API access +- Different tiers for research depth +- Educational discounts may be available + +## Octagon vs Other Research Tools + +| Feature | Octagon | ChatGPT Deep Research | Perplexity | +|---------|---------|----------------------|------------| +| **Finance Focus** | Specialized | General | General | +| **Data Sources** | Financial databases | Web-wide | Web-wide | +| **SEC Integration** | Native | Limited | Limited | +| **Market Data** | Comprehensive | Basic | Basic | +| **Research Depth** | Very Deep | Deep | Moderate | +| **Speed** | Moderate | Slow | Fast | + +## Next Steps + +Octagon Deep Research MCP excels at complex financial analysis that would typically require a team of analysts. The integration provides institutional-quality research capabilities within Jan's conversational interface. + +Whether analyzing market structures, evaluating investments, or understanding business models, Octagon delivers the depth and accuracy that financial professionals expect, while maintaining readability for broader audiences. diff --git a/website/src/content/docs/jan/mcp-examples/design/canva.mdx b/website/src/content/docs/jan/mcp-examples/design/canva.mdx new file mode 100644 index 000000000..008bff70f --- /dev/null +++ b/website/src/content/docs/jan/mcp-examples/design/canva.mdx @@ -0,0 +1,279 @@ +--- +title: Canva MCP +description: Create and manage designs through natural language commands with Canva's official MCP server. +keywords: + [ + Jan, + MCP, + Model Context Protocol, + Canva, + design automation, + graphic design, + presentations, + templates, + tool calling, + ] +--- + +import { Aside, Steps } from '@astrojs/starlight/components' + +[Canva MCP](https://www.canva.com/newsroom/news/deep-research-integration-mcp-server/) gives AI models the ability to create, search, and manage designs directly within Canva. As the first design platform with native MCP integration, it lets you generate presentations, logos, and marketing materials through conversation rather than clicking through design interfaces. + +The integration provides comprehensive design capabilities without leaving your chat, though actual editing still happens in Canva's interface. + +## Available Tools + + + +### Design Operations +- **generate-design**: Create new designs using AI prompts +- **search-designs**: Search docs, presentations, videos, whiteboards +- **get-design**: Get detailed information about a Canva design +- **get-design-pages**: List pages in multi-page designs +- **get-design-content**: Extract content from designs +- **resize-design**: Adapt designs to different dimensions +- **get-design-resize-status**: Check resize operation status +- **get-design-generation-job**: Track AI generation progress + +### Import/Export +- **import-design-from-url**: Import files from URLs as new designs +- **get-design-import-from-url**: Check import status +- **export-design**: Export designs in various formats +- **get-export-formats**: List available export options +- **get-design-export-status**: Track export progress + +### Organization +- **create-folder**: Create folders in Canva +- **move-item-to-folder**: Organize designs and assets +- **list-folder-items**: Browse folder contents + +### Collaboration +- **comment-on-design**: Add comments to designs +- **list-comments**: View design comments +- **list-replies**: See comment threads +- **reply-to-comment**: Respond to feedback + +### Legacy Tools +- **search**: ChatGPT connector (use search-designs instead) +- **fetch**: Content retrieval for ChatGPT + +## Prerequisites + +- Jan with MCP enabled +- Canva account (free or paid) +- Model with tool calling support +- Node.js installed +- Internet connection for Canva API access + +## Setup + +### Enable MCP + +1. Go to **Settings** > **MCP Servers** +2. Toggle **Allow All MCP Tool Permission** ON + +![MCP settings page with toggle enabled](../../../../../assets/mcp-on.png) + +### Configure Canva MCP Server + +Click `+` in MCP Servers section: + +**Configuration:** +- **Server Name**: `Canva` +- **Command**: `npx` +- **Arguments**: `-y mcp-remote@latest https://mcp.canva.com/mcp` +- **Environment Variables**: Leave empty (authentication handled via OAuth) + +![Canva MCP server configuration in Jan](../../../../../assets/canva.png) + +### Authentication Process + +When you first use Canva tools: + +1. **Browser Opens Automatically** + - Canva authentication page appears in your default browser + - Log in with your Canva account + +![Canva authentication page](../../../../../assets/canva2.png) + +2. **Team Selection & Permissions** + - Select your team (if you have multiple) + - Review permissions the AI will have + - Click **Allow** to grant access + +![Canva team selection and permissions](../../../../../assets/canva3.png) + +The permissions include: +- Reading your profile and designs +- Creating new designs +- Managing folders and content +- Accessing team brand templates +- Commenting on designs + +### Model Configuration + +Use a tool-enabled model: + +- **Anthropic Claude 3.5+ Sonnet** +- **OpenAI GPT-4o** +- **Google Gemini Pro** + +## Real-World Usage Example + +Here's an actual workflow creating a company logo: + +### Initial Setup Confirmation + +``` +Are you able to access my projects? +``` + +The AI explains available capabilities: + +![AI response about available actions](../../../../../assets/canva4.png) + +### Design Creation Request + +``` +Create new designs with AI. Call it "VibeBusiness" and have it be a company focused on superintelligence for the benefit of humanity. +``` + +The AI initiates design generation: + +![AI generating design with tool call visible](../../../../../assets/canva5.png) + +### Design Options + +The AI creates multiple logo variations: + +**First Option:** +![First logo design option](../../../../../assets/canva6.png) + +**Selected Design:** +![Selected logo design](../../../../../assets/canva7.png) + +### Final Result + +After selection, the AI confirms: + +![Final response with design ready](../../../../../assets/canva8.png) + +Clicking the design link opens it directly in Canva: + +![Design opened in Canva browser tab](../../../../../assets/canva9.png) + +## Practical Use Cases + +### Marketing Campaign Development +``` +Create a social media campaign for our new product launch. Generate Instagram posts, Facebook covers, and LinkedIn banners with consistent branding. +``` + +### Presentation Automation +``` +Search for our Q4 sales presentation and create a simplified 5-slide version for the board meeting. +``` + +### Brand Asset Management +``` +List all designs in our "2025 Marketing" folder and export the approved ones as PDFs. +``` + +### Design Iteration +``` +Find our company logo designs from last month and resize them for business cards, letterheads, and email signatures. +``` + +### Content Extraction +``` +Extract all text from our employee handbook presentation so I can update it in our documentation. +``` + +### Collaborative Review +``` +Add a comment to the new website mockup asking the design team about the color scheme choices. +``` + +## Workflow Tips + +### Effective Design Generation +- **Be specific**: "Create a minimalist tech company logo with blue and silver colors" +- **Specify format**: "Generate an Instagram story template for product announcements" +- **Include context**: "Design a professional LinkedIn banner for a AI research company" +- **Request variations**: Ask for multiple options to choose from + +### Organization Best Practices +- Create folders before generating multiple designs +- Use descriptive names for easy searching later +- Move designs to appropriate folders immediately +- Export important designs for backup + +### Integration Patterns +- Generate designs → Review options → Select preferred → Open in Canva for fine-tuning +- Search existing designs → Extract content → Generate new versions +- Create templates → Resize for multiple platforms → Export all variants + +## Limitations and Considerations + +**Design Editing**: While the MCP can create and manage designs, actual editing requires opening Canva's interface. + +**Project Access**: The integration may not access all historical projects immediately, focusing on designs created or modified after connection. + +**Generation Time**: AI design generation takes a few moments. The tool provides job IDs to track progress. + +**Team Permissions**: Access depends on your Canva team settings and subscription level. + +## Troubleshooting + +**Authentication Issues:** +- Clear browser cookies for Canva +- Try logging out and back into Canva +- Ensure pop-ups aren't blocked for OAuth flow +- Check team admin permissions if applicable + +**Design Generation Failures:** +- Verify you have creation rights in selected team +- Check Canva subscription limits +- Try simpler design prompts first +- Ensure stable internet connection + +**Tool Availability:** +- Some tools require specific Canva plans +- Team features need appropriate permissions +- Verify MCP server is showing as active +- Restart Jan after authentication + +**Search Problems:** +- Use search-designs (not the legacy search tool) +- Be specific with design types and names +- Check folder permissions for team content +- Allow time for new designs to index + + + +## Advanced Workflows + +### Batch Operations +``` +Create 5 variations of our product announcement banner, then resize all of them for Twitter, LinkedIn, and Facebook. +``` + +### Content Migration +``` +Import all designs from [URLs], organize them into a "2025 Campaign" folder, and add review comments for the team. +``` + +### Automated Reporting +``` +Search for all presentation designs created this month, extract their content, and summarize the key themes. +``` + +## Next Steps + +Canva MCP bridges the gap between conversational AI and visual design. Instead of describing what you want and then manually creating it, you can generate professional designs directly through natural language commands. + +The real power emerges when combining multiple tools - searching existing assets, generating new variations, organizing content, and collaborating with teams, all within a single conversation flow. diff --git a/website/src/content/docs/local-server/api-server.mdx b/website/src/content/docs/local-server/api-server.mdx index c4ac4c32d..9ab97865e 100644 --- a/website/src/content/docs/local-server/api-server.mdx +++ b/website/src/content/docs/local-server/api-server.mdx @@ -17,33 +17,22 @@ keywords: API key ] --- -import { Aside, Steps } from '@astrojs/starlight/components'; +import { Aside, Steps } from '@astrojs/starlight/components' -Jan provides a built-in, OpenAI-compatible API server that runs entirely on your computer, -powered by `llama.cpp`. Use it as a drop-in replacement for cloud APIs to build private, -offline-capable AI applications. +Jan provides a built-in, OpenAI-compatible API server that runs entirely on your computer, powered by `llama.cpp`. Use it as a drop-in replacement for cloud APIs to build private, offline-capable AI applications. ![Jan's Local API Server Settings UI](../../../assets/api-server-ui.png) ## Quick Start -### 1. Start the Server - +### Start the Server 1. Navigate to **Settings** > **Local API Server**. 2. Enter a custom **API Key** (e.g., `secret-key-123`). This is required for all requests. 3. Click **Start Server**. -The server is ready when the logs show `JAN API listening at http://12.0.0.1:1337`. +The server is ready when the logs show `JAN API listening at http://127.0.0.1:1337`. -### 2. Load a model with cURL - -```sh -curl http://127.0.0.1:1337/v1/models/start -H "Content-Type: application/json" \ - -H "Authorization: Bearer secret-key-123" \ - -d '{"model": "gemma3:12b"}' -``` - -### 3. Test with cURL +### Test with cURL Open a terminal and make a request. Replace `YOUR_MODEL_ID` with the ID of an available model in Jan. ```bash @@ -95,7 +84,7 @@ A comma-separated list of hostnames allowed to access the server. This provides ## Troubleshooting - + ## Performance Settings diff --git a/website/src/content/docs/local-server/settings.mdx b/website/src/content/docs/local-server/settings.mdx index 8819442ba..8f366ef5f 100644 --- a/website/src/content/docs/local-server/settings.mdx +++ b/website/src/content/docs/local-server/settings.mdx @@ -14,11 +14,11 @@ keywords: ] --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; -import { Steps } from '@astrojs/starlight/components'; -import { Aside } from '@astrojs/starlight/components'; +import { Aside, Steps } from '@astrojs/starlight/components' -Access Jan's settings by clicking the ⚙️ icon in the bottom left corner. +# Settings + +Access Jan's settings by clicking the Settings icon in the bottom left corner. ## Managing AI Models @@ -163,41 +163,17 @@ Jan stores everything locally on your computer in standard file formats. This duplicates your data to the new location - your original files stay safe. -## Network Settings +## Local API Server -### HTTPS Proxy Setup +All settings for running Jan as a local, OpenAI-compatible server have been moved to their own dedicated page for clarity. -If you need to connect through a corporate network or want enhanced privacy: +This includes configuration for: +- Server Host and Port +- API Keys +- CORS (Cross-Origin Resource Sharing) +- Verbose Logging -1. **Enable** the proxy toggle -2. Enter your proxy details: -``` -http://:@: -``` - -**Example:** -``` -http://user:pass@proxy.company.com:8080 -``` - -![HTTPS Proxy](../../../assets/settings-13.png) - - - -### SSL Certificate Handling - -**Ignore SSL Certificates:** Only enable this for: -- Corporate networks with internal certificates -- Development/testing environments -- Trusted network setups - -![Ignore SSL Certificates](../../../assets/settings-14.png) - - +[**Go to Local API Server Settings →**](/docs/local-server/api-server) ## Emergency Options @@ -218,7 +194,7 @@ Only enable if you trust your network environment completely. ![Reset Confirmation](../../../assets/settings-18.png) -