This demo showcases ANA (Agent Native Application), a research canvas app that combines Human-in-the-Loop capabilities with Tavily's real-time search and CopilotKit's agentic interface.
Powered by LangGraph, it simplifies complex research tasks, making them more interactive and efficient.
This projects uses the following tools:
Running locally, you'll need the following API keys:
There are two main components to this project: the agent and the frontend. First, we'll start the agent. If you are using Copilot Cloud and LangGraph Platform, you can skip this step.
cd agent
# Create and populate .env
cat << EOF > .env
OPENAI_API_KEY=your_key
TAVILY_API_KEY=your_key
LANGSMITH_API_KEY=your_key
EOF
# Start the agent
langgraph up
# Note the API URL from the output (e.g., http://localhost:8000)
Next, we'll start the frontend.
cd frontend
pnpm install
# Create and populate .env
cat << EOF > .env
LOCAL_DEPLOYMENT_URL=http://localhost:8000 # URL from langgraph up
OPENAI_API_KEY=your_key
LANGSMITH_API_KEY=your_key
NEXT_PUBLIC_COPILOT_CLOUD_API_KEY=your_key
EOF
# Start the app
pnpm run dev
You can use either a local agent or a LangGraph Platform deployment with Copilot Cloud. Copilot Cloud is a free to start hosted runtime for CopilotKit that allows you easily integrate your LangGraph Platform endpoints into your CopilotKit agent.
- Create a tunnel to your local agent:
npx @copilotkit/cli tunnel 8000
- Deploy your agent using LangGraph Platform
- Use the deployment URL provided
For either option:
- Go to Copilot Cloud
- Add a new Remote Endpoint
- Enter your tunnel URL or LangGraph Platform deployment URL
- Provide your
LANGSMITH_API_KEY
- Test and Save
pnpm run dev
# Deploy agent using LangGraph Platform
# Set DEPLOYMENT_URL in frontend/.env
pnpm run remote-lgc-dev