Skip to main content

Create a squid fact-sharing web application using Squid AI

Squid lets you create unique chatbot experiences using Squid AI. Follow along to create a chatbot that answers questions about squids!

What you'll build

  • A custom AI chatbot
  • A React frontend application in which to run the Squid AI chatbot

What you'll learn

  • How to create a Squid AI integration
  • How to add a Profile and Context to your integration
  • How to incorporate your Squid AI integration into a frontend

What you'll need

  • The Squid CLI
  • A Squid account with billing enabled

Create a Squid project

  1. Navigate to the Squid Cloud Console.
  2. Click Create new application.
  3. Name the app "squid-facts".
  4. Choose us-east-1.aws as the project region.
  5. Switch to the prod environment by clicking the dev button at the top of the window and selecting prod from the dropdown.

Add the Squid AI integration

  1. In the Squid Cloud Console, select the Integrations tab.
  2. Click the Available integrations tab to view all integrations.
  3. Scroll to the AI Chatbot integration and click Add integration.
  4. Enter squid-facts-ai as the Integration ID.
  5. Click the + next to Profiles to add a profile to your chatbot. Name the profile squid-facts-chatbot. Toggle on Set profile to public so the profile can be accessed by anyone on the frontend. To restrict access to your chatbot, keep the profile private and set up a security service.
  6. See the documentation on securing your AI chatbot for more information.

A profile can be thought of as one AI chatbot. You can have multiple profiles with different purposes. Notice profiles have two components: Instructions and Context.

  • Instructions are the rule set for how the chatbot profile responds and answers questions. They can be about tone or purpose. For example, "You are a pirate. Only answer questions like a pirate would", or "You are a helpful customer support expert that understands camping products and can answer questions in detail”.
  • Context is the body of knowledge the profile uses when responding to questions. Adding context allows the profile to provide relevant answers on specific topics that aren't part of the underlying AI model. Context can be text, URL, or file upload.
  1. Select GPT-3.5 from the Model name dropdown menu.
  2. Click Add. You have now added the Squid AI integration!
  3. Click the + next to Instructions to add a new instruction. Enter the following text as the instruction, and then press Add instruction:
You're a friendly AI who shares random facts about squids and answers user questions about squids.

Use only language that is appropriate for children.

Important: Only answer based on the provided context.
  1. Click the + next to Context to add context. Name the context Squid Wikipedia. Change the Context type to URL, and then enter the following URL:
https://en.wikipedia.org/wiki/Squid

Yes, this is just a link to the Wikipedia page on squids, but it's for demonstration purposes. ChatGPT likely already knows this information. In your own applications, you will provide context that is relevant to your use case. The URLs or text you provide most often come from your own sources on which ChatGPT was not trained.

Now that you have a Squid Cloud project with a Squid AI integration, you're ready to add functionality to an app!

View the code

  1. Download or clone the squid–samples repo. Change to the ai-tutorial-squid-facts/starter directory: cd ai-tutorial-squid-facts/starter Notice that there are two folders in the starter project: squid-facts and squid-facts-backend. The code we are writing is only on the frontend, so we don't need to make any changes to the backend.
  2. Change to the squid-facts directory, and then install the required NPM packages:
cd squid-facts
npm install

This installs the Squid React SDK, along with other React packages.

  1. Open the project in the IDE of your choice. Open src/main.tsx and inspect the contents. Notice there is a component called SquidContextProvider with the following code:
src/main.tsx
<SquidContextProvider
options={{
appId: 'YOUR_APP_ID',
region: 'YOUR_REGION',
environmentId: 'prod',
}}
>
<App />
</SquidContextProvider>
  1. In the Squid Console, select the Overview tab, and then copy the Application ID. Replace YOUR_APP_ID with the Application ID you just copied. Repeat the process for YOUR_REGION. Your app is now ready to be deployed to the prod environment.
  2. You will also need to create a .env file for the backend. Squid makes that easy:
    1. In the Squid Console, navigate to the Overview tab and scroll to the Backend project section.
    2. Click the Create .env file button. It should say to switch to the dev environment first, so go ahead and do that and then copy the squid init-env ... command that is provided.
    3. Run the copied terminal command in your squid-facts-backend folder.
    4. Back in the Squid Console, scroll to the top and switch back to the prod environment by clicking on the dev rectangle at the top of the page and selecting prod from the dropdown.
  3. To deploy your backend, scroll back down to the Backend project section and click the Deploy backend button and copy the command shown.
  4. Run the copied terminal command in your squid-facts-backend folder. The command format is as follows:
squid deploy --apiKey [prod api key] --environmentId prod

After deploying, we can run our frontend locally and view it, but there isn't much to it yet, so let's add the Squid AI chatbot first.

  1. Open the squid-facts-ai.tsx component, which is located in the components folder. The folder holds a component that's pretty empty right now:
components/squid-facts-ai.tsx
function SquidFactsAI() {
return <></>;
}

export default SquidFactsAI;
  1. Add the following import statement:
components/squid-facts-ai.tsx
import { useAiChatbot } from '@squidcloud/react';
  1. In the SquidFactsAI() function, add the following constants:
components/squid-facts-ai.tsx
const [question, setQuestion] = useState('');
const { history, chat, complete } = useAiChatbot(
'squid-facts-ai',
'squid-facts-chatbot'
);

The variables question and setQuestion use a standard useState hook to manage the state of a question the user asks.

The useAIChatbot hook wraps the AI Chatbot. It takes the AI Chatbot ID and Profile ID as parameters, and returns several results, including chat, data, and complete. To read more about useAIChatbot, check out the React SDK documentation.

  1. Add the following functions after the constants:
components/squid-facts-ai.tsx
function askQuestion() {
chat(question);
setQuestion('');
}

function questionChanged(e: ChangeEvent) {
setQuestion((e.target as HTMLInputElement).value);
}

function checkKey(ele: React.KeyboardEvent<HTMLDivElement>) {
if (ele.key === 'Enter') {
askQuestion();
}
}

The askQuestion function calls the Squid Client SDK's chat function, which accepts a prompt for the chatbot in the form of a string.

The questionChanged and checkKey functions handle UI changes as the user asks a question.

  1. Replace the existing return with the following code:
components/squid-facts-ai.tsx
return (
<>
<div className="scrolling">
<Messages messages={history} />
</div>
<div className="question">
<TextField
fullWidth
id="outlined-basic"
label="Enter your question"
variant="outlined"
onChange={questionChanged}
onKeyDown={(event) => checkKey(event)}
value={question}
/>
<Button variant="contained" disabled={!complete} onClick={askQuestion}>
Ask question
</Button>
</div>
</>
);

This code passes the chat history to the Messages component, which displays the conversation between the user and the AI chatbot. It also includes an input component where the user asks questions, and a button to trigger the askQuestion function.

  1. Add the relevant imports for things we've added. The imports should look like this:
components/squid-facts-ai.tsx
import { useAiChatbot } from '@squidcloud/react';
import Messages from './messages.tsx';
import { Button, TextField } from '@mui/material';
import React, { ChangeEvent, useState } from 'react';
  1. Open the messages.tsx file. Replace all of the contents of the file with the following code:
components/messages.tsx
import { useEffect, useRef } from 'react';
import { ChatMessage } from '@squidcloud/react';

interface ChatHistoryProps {
messages: ChatMessage[];
}

const Messages: React.FC<ChatHistoryProps> = ({ messages }) => {
const messagesEndRef = useRef<HTMLDivElement>(null);

const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};

useEffect(() => {
scrollToBottom();
}, [messages]);

return (
<div>
{messages.map(({ id, message, type }) => (
<div key={id}>
<span key={id}>
{type}: {message}
</span>
</div>
))}
<div ref={messagesEndRef} />
</div>
);
};

export default Messages;

This code iterates through the array of ChatMessages and displays them.

Run the code

  1. In the squid-facts folder where the frontend is located, run the following command to view the app: npm run dev To view the app, navigate to localhost:PORT where PORT is logged in the terminal. The address will likely be http://localhost:5173.

Why is there a picture of a squid on the page, you ask? Of course you don't ask. It's an app about squids.

  1. Ask the AI chatbot some questions about squids. Here are some examples if you're stumped:
    • Do squids have arms or tentacles?
    • What should I do if I encounter a squid?
    • What's your favorite fact about squids?
    • Tell me about the Onykia ingens.

Share your favorite squid questions and answers with the Squid Squad on Discord or X.

Conclusion

Congratulations! You just created a Squid AI integration and added it to a frontend app so users can access it. Feel free to keep asking questions to see just how much this AI chatbot knows about squids!

Next steps

Now that you know how to use the Squid AI integration with a public profile, here are some next steps you can take: Add a new profile to your Squid AI based on your use case. For example, SquidAI can support a different persona for each part of your user engagement: sales, support, product experts and more. Implement a Squid Service that limits access to the Squid AI. Connect your database to your frontend using Squid middle tier to enable data access capabilities through the Squid Client SDK.

Clean up

To prevent further billing, delete the Squid app in the Squid Console by selecting the Overview tab for the app and scrolling down to Delete Application.