Limeblock Docs

Getting Started with Limeblock

Welcome to Limeblock! This guide will walk you through the process of setting up your Limeblock AI integration from account creation to final implementation. Follow these steps to add AI-powered functionality to your application using our flexible API endpoint.

Step 1: Create Your Limeblock Account

First, you'll need to create an account on the Limeblock platform:

  1. Visit limeblock.io
  2. Click on "Sign Up" and follow the registration process
  3. Add your email address + team members
  4. Buy more tokens when needed

Tip: For team environments, consider setting up a shared organizational account that multiple team members can access. You can add multiple emails in your settings or when you create an account.

Step 2: Set Up Backend API Endpoints

Configure your backend endpoints in the Limeblock dashboard:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Example JSON schema for Limeblock backend integration

// For the API Endpoint - Create Board
const url = "https://example_endpoint.com/api/create_board/"

// Schema with context params and fully filled in 
// This is an example template for the AI to use
const schema = {
  "settings": {
    "borders": "#FFFFFF",
    "boardBackground": "#FFFFFF",
    "pageBackground": "#F1F1F1",
    "titleColor": "#000000",
    "subtitleColor": "#000000",
    "dateRange": "#333333",
    "tableHeaders": "#0b0b0b",
    "ranks": "#333333",
    "rankingField": "#333333",
    "nameField": "#333333",
    "title": "My Limeblock Dashboard",
    "subtitle": "Real-time data visualization",
    "rankingTitle": "Score",
    "nameTitle": "User",
    "titleFont": "'Roboto', sans-serif",
    "subtitleFont": "'Roboto', sans-serif",
    "boardRankTitleFont": "'Roboto', sans-serif",
    "boardRankFont": "'Roboto', sans-serif",
    "boardNameTitleFont": "'Roboto', sans-serif",
    "boardNameFont": "'Roboto', sans-serif"
  },
  "board_id": "{board_id}",
  "user_id": "{user_id}"
};
  1. Navigate to the "Backend" tab in your dashboard
  2. Add API endpoints for your application
  3. Configure the endpoint schemas and parameters
  4. Test the endpoints before publishing
  5. Reference Backend Docs for more detailed information

Important Note: You'll need to give Limeblock access to your backend by following the instructions in the Backend Integration page of the dashboard. This includes setting up proper authentication and defining the allowed scope of operations.

Step 3: Get Your API Key

To connect your application with Limeblock, you'll need your API key:

  1. Go to the Settings page in your Limeblock dashboard
  2. Navigate to the "API Keys" section
  3. Generate a new API key (or use an existing one)
  4. Copy the key and store it securely as an environment variable
javascript
// Using your API key from settings
const LIMEBLOCK_API_KEY = process.env.NEXT_PUBLIC_LIMEBLOCK_API_KEY || "lime_YOUR_API_KEY";

Step 4: Get Your Endpoint and Folder IDs

From your Limeblock dashboard, you'll need to get the specific IDs for your endpoints (Click the gray id icon):

  1. Navigate to the "Endpoint Tree" section in your dashboard
  2. Find the endpoint you want to use for AI actions
  3. Copy the endpoint_id (e.g., "endpoint_1745333462205")
  4. Copy the folder_id that contains your endpoint (e.g., "folder_1741747825504")
  5. Keep these IDs handy - you'll need them in your implementation

Pro Tip: You can organize multiple endpoints under different folders and use different endpoint/folder combinations for different features in your application.

Step 5: Implement in Your Application

Now you can integrate Limeblock into your application however you want! Style your interface any way you like - just hit our endpoint using this format:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// Example implementation - style however you want!
// Just hit our endpoint using this format

const handleAIAction = async (userPrompt) => {
  const requestData = {
    prompt: userPrompt,
    endpoint_id: "endpoint_1745333462205", // From your endpoint tree
    folder_id: "folder_1741747825504",     // From your endpoint tree
    api_key: "lime_YOUR_API_KEY",          // From settings
    formatting_needed: true,               // Optional: get formatted response
    context: { 
      user_id: "current_user_id",          // Your user identification
      // Add any additional context your endpoints need
    },
  };

  try {
    const response = await fetch("https://limeblockbackend.onrender.com/api/ai_action/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestData),
    });

    const data = await response.json();
    
    if (response.ok) {
      // Handle successful response
      console.log("AI Response:", data.response);
      console.log("Formatted Response:", data.formatted_response);
      return data;
    } else {
      console.error("Error:", data.error || data.message);
    }
  } catch (error) {
    console.error("Network error:", error);
  }
};

// Use it in your React component however you want
const MyCustomAIInterface = () => {
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState(null);
  
  const submitToAI = async () => {
    const result = await handleAIAction(prompt);
    setResponse(result);
  };
  
  return (
    <div className="your-custom-styling">
      {/* Style this however you want! */}
      <input 
        value={prompt} 
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Ask AI anything..."
      />
      <button onClick={submitToAI}>
        Get AI Response
      </button>
      {response && (
        <div>
          <p>{response.formatted_response || response.response}</p>
        </div>
      )}
    </div>
  );
};

Complete Freedom: Unlike traditional AI chat plugins, you have complete control over the UI/UX. Create buttons, forms, modals, or any interface that fits your application's design. Just send the prompt to our endpoint and handle the response however works best for your users.

More detail in Export Docs

Implementation Examples

Here are some ways you can integrate Limeblock:

  • Smart Help Button: Add a "Get AI Help" button that sends the current page context
  • Form Assistant: Help users fill out complex forms with AI suggestions
  • Search Enhancement: Process search queries through AI for better results
  • Custom Dashboard: Create AI-powered insights for your data
  • Content Generation: Let users generate content with AI assistance

Troubleshooting

API Connection Issues

Check your API key, endpoint_id, and folder_id. Ensure they match exactly what's shown in your Limeblock dashboard.

Backend Endpoint Not Found

Verify your backend endpoints are configured correctly in the dashboard and accessible to Limeblock's servers.

Context Not Working

Make sure your context parameters match what your backend endpoints expect. Check the endpoint configuration in your dashboard.

Getting Help

If you need assistance with your Limeblock implementation: