Tutorial 3: Integrating Kantan CMS Content with Your Website

Now that you've created both a website and content collections, it's time to connect them together. In this tutorial, we'll guide you through integrating your Kantan CMS content with your website using MCP (Model Context Protocol), creating a dynamic website that automatically pulls content from your CMS.

Prerequisites

Before starting this tutorial, ensure you have:

• Any AI Code Editor with MCP feature (such as Cline, Cursor, or similar)
• Git installed on your system
• GitHub account set up
• Your website project from Tutorial 1
• Blog collection from Tutorial 2

Getting Your API Access

Step 1: Generate API Key

1. Go to Settings > API Key in your Kantan CMS dashboard
2. Click "Generate an API Key"
3. Copy and securely store your API key - you'll need it for the integration

Setting Up MCP Integration

Step 1: Download the MCP Tool

1. Clone or download the Kantan CMS MCP repository:

   git clone https://github.com/kantan-cms/kantan-cms-mcp.git

2. Note the absolute path to where you saved the repository

Step 2: Configure MCP Settings

Configure your MCP settings according to your AI editor's requirements. For Cline users, your configuration should look like this:

{
  "mcpServers": {
    "kantan-cms-instruction": {
      "command": "python",
      "args": ["<absolute path to kantan-cms-mcp>/main.py"],
      "disabled": false,
      "env": {
        "PROJECT_ID": "<Your Project ID>",
        "CMS_API_KEY": "<Your API Key>"
      }
    }
  }
}

Replace the placeholders:

• <absolute path to kantan-cms-mcp>: Full path to your downloaded MCP repository
• <Your Project ID>: Your Kantan CMS project ID
• <Your API Key>: The API key you generated earlier

Step 3: Verify MCP Installation

1. Restart your AI editor after configuring MCP
2. Check that the Kantan CMS MCP server is recognized and running
3. Consult your editor's help documentation for specific setup details

Creating the Integration Script

Step 1: Open Your AI Editor

1. Open your AI code editor with MCP enabled
2. Load your website project
3. Ensure the Kantan CMS MCP is active and connected

Step 2: Generate Integration Script

Use the following prompt in your AI editor to create the integration script:

Create a script named `build.sh` that integrates Kantan CMS with this project and uploads the result website to Kantan CMS.

The script must have the following features:
- Get content from the CMS
- Modify the form to post data to the CMS
- Upload website to CMS

The following information represents collections from Kantan CMS and their corresponding directories:

-----
Category: <Collection Name>
Collection ID: <Collection ID>
Target Directory: <target directory>

[Add additional collections as needed]
-----

For forms, the following represents which collection corresponds to which form:
------
Category: <Collection Name>
Collection ID: <Collection ID>
Target Form: <target form element>
------

Customize the prompt:

• Replace <Collection Name> with your actual collection names
• Replace <Collection ID> with your collection IDs from Kantan CMS
• Replace <target directory> with where you want content to appear in your website
• Replace <target form element> with the specific forms that should submit to each collection

Step 3: Review and Test the Script

1. Review the generated build.sh script
2. Ensure it includes all necessary functionality:
   • API calls to fetch CMS content
   • Content integration into your website files
   • Form modifications for CMS submission
   • Upload functionality to Kantan CMS
3. Make any necessary adjustments

Step 4: Execute the Build Script

1. Make the script executable: chmod +x build.sh
2. Run the script: ./build.sh
3. Monitor the output for any errors or issues

Verifying the Integration

Step 1: Check Kantan CMS

1. Go to your Kantan CMS dashboard
2. Navigate to Hosting > Preview
3. Check that your website now displays content from your collections
4. Verify that forms are properly connected to submit data back to the CMS

Step 2: Test Dynamic Content

1. Add a new blog post in your CMS
2. Run your build script again
3. Check that the new content appears on your website
4. Test form submissions to ensure they create new records in your CMS

Accessing API Documentation

For advanced customization and troubleshooting:

1. Go to your Kantan CMS dashboard
2. Navigate to the Collections menu
3. Each collection has its own API documentation available
4. Use this documentation to customize your integration further

Common Integration Patterns

Blog Integration

• Fetch blog posts from your blog collection
• Generate static pages for each post
• Create index pages with post listings
• Add pagination for large numbers of posts

Form Integration

• Contact forms that create records in contact collections
• Newsletter signups that add to subscriber collections
• Comment systems that link to blog post collections

Content Management

• About page content managed through CMS
• Homepage hero sections updated via CMS
• Navigation items controlled through collections

Troubleshooting

Common issues and solutions:

• API Key Issues: Verify your API key is correct and has proper permissions
• MCP Connection Problems: Check your MCP configuration and restart your editor
• Build Script Errors: Review script logs and ensure all dependencies are installed
• Content Not Updating: Verify your build script is fetching the latest content from the API

Next Steps

Congratulations! You now have a dynamic website that automatically integrates with your Kantan CMS content. In the next tutorial, we'll automate this entire process using GitHub Actions, allowing your website to update automatically whenever you make changes to your content or code.